diff --git a/templates/components/cta_buttons.html b/templates/components/cta_buttons.html
index d4913da..3219423 100644
--- a/templates/components/cta_buttons.html
+++ b/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> 
\ No newline at end of file
diff --git a/templates/components/explainer_video_modal.html b/templates/components/explainer_video_modal.html
new file mode 100644
index 0000000..7295413
--- /dev/null
+++ b/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> 
\ No newline at end of file
diff --git a/templates/components/hero_section.html b/templates/components/hero_section.html
new file mode 100644
index 0000000..1c0c41a
--- /dev/null
+++ b/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> 
\ No newline at end of file
diff --git a/templates/components/pricing_section.html b/templates/components/pricing_section.html
index 16e96d4..a1fc72e 100644
--- a/templates/components/pricing_section.html
+++ b/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
-            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);
+            });
         }
     });
 });
diff --git a/templates/home.html b/templates/home.html
index 7fa188f..de0c124 100644
--- a/templates/home.html
+++ b/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">
-        <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">
diff --git a/templates/public/contact.html b/templates/public/contact.html
index c39c95f..2fb99c1 100644
--- a/templates/public/contact.html
+++ b/templates/public/contact.html
@@ -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">
diff --git a/templates/public/features.html b/templates/public/features.html
index 8bc731b..104cf1c 100644
--- a/templates/public/features.html
+++ b/templates/public/features.html
@@ -9,22 +9,48 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
     <link rel="stylesheet" href="{{ url_for('static', filename='css/colors.css') }}?v={{ 'css/colors.css'|asset_version }}">
     <style>
-        .feature-section {
-            padding: 80px 0;
+        /* Enhanced Features Page Styles */
+        .hero-section {
+            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
+            color: white;
+            padding: 120px 0 80px 0;
             position: relative;
             overflow: hidden;
         }
+        
+        .hero-section::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
+            opacity: 0.3;
+        }
+        
+        .feature-section {
+            padding: 100px 0;
+            position: relative;
+        }
+        
+        .feature-section:nth-child(even) {
+            background: linear-gradient(135deg, var(--bg-color) 0%, rgba(var(--primary-color-rgb), 0.02) 100%);
+        }
+        
         .feature-card {
             background: var(--white);
             border-radius: 20px;
-            padding: 40px 30px;
-            box-shadow: 0 10px 30px var(--shadow-color);
+            padding: 40px;
+            box-shadow: 0 15px 35px var(--shadow-color);
             transition: all 0.4s ease;
             height: 100%;
             border: none;
             position: relative;
             overflow: hidden;
+            transform: translateY(0);
         }
+        
         .feature-card::before {
             content: '';
             position: absolute;
@@ -36,27 +62,35 @@
             transform: scaleX(0);
             transition: transform 0.3s ease;
         }
+        
         .feature-card:hover::before {
             transform: scaleX(1);
         }
+        
         .feature-card:hover {
             transform: translateY(-10px);
-            box-shadow: 0 20px 40px var(--shadow-color-light);
+            box-shadow: 0 25px 50px var(--shadow-color-light);
         }
+        
         .feature-icon {
-            width: 90px;
-            height: 90px;
+            width: 80px;
+            height: 80px;
             background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
-            border-radius: 50%;
+            border-radius: 20px;
             display: flex;
             align-items: center;
             justify-content: center;
-            margin: 0 auto 30px;
+            margin-bottom: 25px;
             color: white;
-            font-size: 2.2rem;
+            font-size: 2rem;
             position: relative;
-            z-index: 2;
+            transition: all 0.3s ease;
         }
+        
+        .feature-card:hover .feature-icon {
+            transform: scale(1.1) rotate(5deg);
+        }
+        
         .feature-icon::after {
             content: '';
             position: absolute;
@@ -65,87 +99,27 @@
             right: -5px;
             bottom: -5px;
             background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
-            border-radius: 50%;
+            border-radius: 25px;
             z-index: -1;
-            opacity: 0.3;
+            opacity: 0.2;
             transition: all 0.3s ease;
         }
+        
         .feature-card:hover .feature-icon::after {
             transform: scale(1.2);
-            opacity: 0.5;
-        }
-        .hero-section {
-            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
-            color: white;
-            padding: 120px 0 80px 0;
-            position: relative;
-            overflow: hidden;
-        }
-        .hero-section::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
             opacity: 0.3;
         }
-        .section-title {
-            color: var(--text-dark);
-            font-weight: 700;
-            margin-bottom: 1rem;
-            position: relative;
-        }
-        .section-title::after {
-            content: '';
-            position: absolute;
-            bottom: -10px;
-            left: 0;
-            width: 60px;
-            height: 3px;
-            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
-            border-radius: 2px;
-        }
-        .section-subtitle {
-            color: var(--text-muted);
-            font-size: 1.1rem;
-            margin-bottom: 3rem;
-        }
-        .visual-guide-placeholder {
-            border-radius: 20px;
-            padding: 40px;
-            text-align: center;
-            min-height: 350px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            position: relative;
-            overflow: hidden;
-            box-shadow: 0 15px 35px var(--shadow-color);
-        }
-        .visual-guide-placeholder::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%);
-            transform: translateX(-100%);
-            transition: transform 0.6s ease;
-        }
-        .visual-guide-placeholder:hover::before {
-            transform: translateX(100%);
-        }
-        .feature-highlight {
+        
+        .feature-showcase {
             background: linear-gradient(135deg, var(--primary-bg-light) 0%, var(--secondary-bg-light) 100%);
             border-radius: 25px;
             padding: 60px 40px;
             position: relative;
             overflow: hidden;
+            box-shadow: 0 20px 40px var(--shadow-color);
         }
-        .feature-highlight::before {
+        
+        .feature-showcase::before {
             content: '';
             position: absolute;
             top: -50%;
@@ -155,66 +129,253 @@
             background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
             animation: float 6s ease-in-out infinite;
         }
+        
         @keyframes float {
             0%, 100% { transform: translateY(0px) rotate(0deg); }
             50% { transform: translateY(-20px) rotate(180deg); }
         }
-        .staggered-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-            gap: 30px;
-            margin-top: 50px;
-        }
-        .staggered-item:nth-child(odd) {
-            transform: translateY(30px);
-        }
-        .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, var(--primary-color) 0%, var(--secondary-color) 100%);
-            border-radius: 50%;
-            opacity: 0.1;
-            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); }
-        }
+        
         .gradient-text {
             background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
             background-clip: text;
         }
-        .feature-badge {
+        
+        .section-title {
+            color: var(--text-dark);
+            font-weight: 700;
+            margin-bottom: 1rem;
+            position: relative;
+        }
+        
+        .section-subtitle {
+            color: var(--text-muted);
+            font-size: 1.1rem;
+            margin-bottom: 3rem;
+        }
+        
+        .feature-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 30px;
+            margin-top: 50px;
+        }
+        
+        .feature-highlight {
+            background: linear-gradient(135deg, var(--white) 0%, rgba(var(--primary-color-rgb), 0.02) 100%);
+            border-radius: 20px;
+            padding: 40px;
+            border: 2px solid transparent;
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .feature-highlight::before {
+            content: '';
             position: absolute;
-            top: -15px;
-            right: 20px;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
+            opacity: 0;
+            transition: opacity 0.3s ease;
+            z-index: 0;
+        }
+        
+        .feature-highlight:hover::before {
+            opacity: 0.05;
+        }
+        
+        .feature-highlight > * {
+            position: relative;
+            z-index: 1;
+        }
+        
+        .feature-highlight:hover {
+            border-color: var(--primary-color);
+            transform: translateY(-5px);
+            box-shadow: 0 15px 35px var(--shadow-color);
+        }
+        
+        .interactive-demo {
+            background: var(--white);
+            border-radius: 20px;
+            padding: 40px;
+            box-shadow: 0 15px 35px var(--shadow-color);
+            position: relative;
+            overflow: hidden;
+            min-height: 400px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .interactive-demo::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(45deg, transparent 30%, rgba(var(--primary-color-rgb), 0.05) 50%, transparent 70%);
+            transform: translateX(-100%);
+            transition: transform 0.6s ease;
+        }
+        
+        .interactive-demo:hover::before {
+            transform: translateX(100%);
+        }
+        
+        .demo-placeholder {
+            text-align: center;
+            color: var(--text-muted);
+        }
+        
+        .demo-placeholder i {
+            font-size: 4rem;
+            margin-bottom: 20px;
+            opacity: 0.5;
+        }
+        
+        .stats-section {
             background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
             color: white;
-            padding: 8px 16px;
-            border-radius: 20px;
-            font-size: 0.8rem;
-            font-weight: 600;
-            transform: rotate(3deg);
+            padding: 80px 0;
+            position: relative;
+            overflow: hidden;
         }
-        .additional-features .section-title::after {
-            display: none;
+        
+        .stats-section::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
+            opacity: 0.3;
+        }
+        
+        .stat-item {
+            text-align: center;
+            position: relative;
+            z-index: 1;
+        }
+        
+        .stat-number {
+            font-size: 3rem;
+            font-weight: 700;
+            margin-bottom: 10px;
+            display: block;
+        }
+        
+        .stat-label {
+            font-size: 1.1rem;
+            opacity: 0.9;
+        }
+        
+        .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.1);
+            border-color: white;
+            transform: translateY(-2px);
+        }
+        
+        .btn-lg {
+            padding: 15px 40px;
+            font-size: 1.1rem;
+        }
+        
+        /* Unified button styling */
+        .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;
+        }
+        .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: 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;
+        }
+        
+        /* Animation classes */
+        .fade-in-up {
+            opacity: 0;
+            transform: translateY(30px);
+            transition: all 0.6s ease;
+        }
+        
+        .fade-in-up.visible {
+            opacity: 1;
+            transform: translateY(0);
+        }
+        
+        .stagger-delay-1 { transition-delay: 0.1s; }
+        .stagger-delay-2 { transition-delay: 0.2s; }
+        .stagger-delay-3 { transition-delay: 0.3s; }
+        .stagger-delay-4 { transition-delay: 0.4s; }
+        
+        @media (max-width: 768px) {
+            .hero-section {
+                padding: 100px 0 60px 0;
+            }
+            
+            .feature-section {
+                padding: 60px 0;
+            }
+            
+            .feature-showcase {
+                padding: 40px 20px;
+            }
+            
+            .stat-number {
+                font-size: 2.5rem;
+            }
         }
     </style>
 </head>
@@ -222,201 +383,171 @@
     {% include 'components/header_nav.html' %}
 
     <!-- Hero Section -->
-    <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-4 fw-bold mb-4">Powerful Features for Modern Enterprises</h1>
-            <p class="lead fs-5">Discover how DocuPulse transforms document management with intelligent workflows, secure collaboration, and scalable architecture.</p>
-        </div>
-    </section>
+    {% with 
+        title="Powerful Features for Modern Enterprises",
+        description="Discover how DocuPulse transforms document management with intelligent workflows, secure collaboration, and scalable architecture.",
+        title_size="4",
+        description_size="5",
+        buttons=[
+            {
+                'type': 'modal',
+                'target': '#explainerVideoModal',
+                'text': 'Watch Demo',
+                'icon': 'fas fa-play',
+                'style': 'outline-light'
+            }
+        ]
+    %}
+        {% include 'components/hero_section.html' %}
+    {% endwith %}
 
-    <!-- Room-Based Workspaces Feature -->
+    <!-- Key Features Grid -->
     <section class="feature-section">
-        <div class="container">
-            <div class="row align-items-center">
-                <div class="col-lg-6">
-                    <div class="feature-highlight">
-                        <h2 class="section-title gradient-text">Room-Based Workspaces</h2>
-                        <p class="section-subtitle">Create isolated collaboration environments with granular permissions, file storage, and real-time messaging for teams and projects.</p>
-                        <ul class="list-unstyled">
-                            <li class="mb-3"><i class="fas fa-check text-success me-2"></i>Isolated team spaces for each project</li>
-                            <li class="mb-3"><i class="fas fa-check text-success me-2"></i>Granular permissions and access controls</li>
-                            <li class="mb-3"><i class="fas fa-check text-success me-2"></i>Integrated file storage and messaging</li>
-                            <li class="mb-3"><i class="fas fa-check text-success me-2"></i>Real-time collaboration tools</li>
-                        </ul>
-                    </div>
-                </div>
-                <div class="col-lg-6">
-                    <div class="visual-guide-placeholder" style="background: var(--bg-color);">
-                        <div>
-                            <i class="fas fa-image fa-4x text-muted mb-3"></i>
-                            <p class="text-muted fw-bold">Visual Guide: Room Workspace Interface</p>
-                            <small class="text-muted">Screenshot or demo of room creation and management</small>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
-
-    <!-- Client Document Requests Feature -->
-    <section class="feature-section" style="background-color: var(--bg-color);">
-        <div class="container">
-            <div class="row align-items-center">
-                <div class="col-lg-6 order-lg-2">
-                    <div class="feature-highlight">
-                        <h2 class="section-title gradient-text">Client Document Requests</h2>
-                        <p class="section-subtitle">Streamlined communication system for requesting documents from clients with file attachments and conversation tracking.</p>
-                        <ul class="list-unstyled">
-                            <li class="mb-3"><i class="fas fa-check text-success me-2"></i>Document request workflows</li>
-                            <li class="mb-3"><i class="fas fa-check text-success me-2"></i>Conversation tracking and history</li>
-                            <li class="mb-3"><i class="fas fa-check text-success me-2"></i>File attachments and sharing</li>
-                            <li class="mb-3"><i class="fas fa-check text-success me-2"></i>Status tracking and notifications</li>
-                        </ul>
-                    </div>
-                </div>
-                <div class="col-lg-6 order-lg-1">
-                    <div class="visual-guide-placeholder" style="background: var(--white);">
-                        <div>
-                            <i class="fas fa-image fa-4x text-muted mb-3"></i>
-                            <p class="text-muted fw-bold">Visual Guide: Document Request Flow</p>
-                            <small class="text-muted">Workflow diagram or interface screenshot</small>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
-
-    <!-- Advanced File Management Feature -->
-    <section class="feature-section">
-        <div class="container">
-            <div class="row align-items-center">
-                <div class="col-lg-6">
-                    <div class="feature-highlight">
-                        <h2 class="section-title gradient-text">Advanced File Management</h2>
-                        <p class="section-subtitle">Upload, organize, search, and manage files with hierarchical folders and comprehensive metadata tracking.</p>
-                        <ul class="list-unstyled">
-                            <li class="mb-3"><i class="fas fa-check text-success me-2"></i>Hierarchical folder structure</li>
-                            <li class="mb-3"><i class="fas fa-check text-success me-2"></i>Advanced search and filtering</li>
-                            <li class="mb-3"><i class="fas fa-check text-success me-2"></i>Metadata tracking and organization</li>
-                            <li class="mb-3"><i class="fas fa-check text-success me-2"></i>File versioning and history</li>
-                        </ul>
-                    </div>
-                </div>
-                <div class="col-lg-6">
-                    <div class="visual-guide-placeholder" style="background: var(--bg-color);">
-                        <div>
-                            <i class="fas fa-image fa-4x text-muted mb-3"></i>
-                            <p class="text-muted fw-bold">Visual Guide: File Management Interface</p>
-                            <small class="text-muted">File browser and organization interface</small>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
-
-    <!-- Security & Compliance Feature -->
-    <section class="feature-section" style="background-color: var(--bg-color);">
-        <div class="container">
-            <div class="row align-items-center">
-                <div class="col-lg-6 order-lg-2">
-                    <div class="feature-highlight">
-                        <h2 class="section-title gradient-text">Security & Compliance</h2>
-                        <p class="section-subtitle">Enterprise-grade security with comprehensive compliance features for data protection and regulatory requirements.</p>
-                        <ul class="list-unstyled">
-                            <li class="mb-3"><i class="fas fa-check text-success me-2"></i>Role-based access controls</li>
-                            <li class="mb-3"><i class="fas fa-check text-success me-2"></i>End-to-end encryption</li>
-                            <li class="mb-3"><i class="fas fa-check text-success me-2"></i>GDPR and HIPAA compliance</li>
-                            <li class="mb-3"><i class="fas fa-check text-success me-2"></i>Comprehensive audit logging</li>
-                        </ul>
-                    </div>
-                </div>
-                <div class="col-lg-6 order-lg-1">
-                    <div class="visual-guide-placeholder" style="background: var(--white);">
-                        <div>
-                            <i class="fas fa-image fa-4x text-muted mb-3"></i>
-                            <p class="text-muted fw-bold">Visual Guide: Security Dashboard</p>
-                            <small class="text-muted">Security settings and compliance reports</small>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
-
-    <!-- White Labeling Feature -->
-    <section class="feature-section">
-        <div class="container">
-            <div class="row align-items-center">
-                <div class="col-lg-6">
-                    <div class="feature-highlight">
-                        <h2 class="section-title gradient-text">White Labeling</h2>
-                        <p class="section-subtitle">Complete brand customization with custom logos, company colors, and personalized branding throughout the platform.</p>
-                        <ul class="list-unstyled">
-                            <li class="mb-3"><i class="fas fa-check text-success me-2"></i>Custom company logo upload</li>
-                            <li class="mb-3"><i class="fas fa-check text-success me-2"></i>Brand color customization</li>
-                            <li class="mb-3"><i class="fas fa-check text-success me-2"></i>Personalized email templates</li>
-                            <li class="mb-3"><i class="fas fa-check text-success me-2"></i>Complete platform rebranding</li>
-                        </ul>
-                    </div>
-                </div>
-                <div class="col-lg-6">
-                    <div class="visual-guide-placeholder" style="background: var(--bg-color);">
-                        <div>
-                            <i class="fas fa-image fa-4x text-muted mb-3"></i>
-                            <p class="text-muted fw-bold">Visual Guide: Brand Customization</p>
-                            <small class="text-muted">Logo upload and color customization interface</small>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
-
-    <!-- Additional Features Grid -->
-    <section class="feature-section additional-features" style="background-color: var(--bg-color);">
         <div class="container">
             <div class="text-center mb-5">
-                <h2 class="section-title gradient-text" style="position: relative;">Additional Features</h2>
-                <p class="section-subtitle">More powerful tools to enhance your document management workflow</p>
+                <h2 class="section-title gradient-text">Core Features</h2>
+                <p class="section-subtitle">Everything you need to revolutionize your document management workflow</p>
+            </div>
+            <div class="feature-grid">
+                <div class="feature-card fade-in-up">
+                    <div class="feature-icon">
+                        <i class="fas fa-door-open"></i>
+                    </div>
+                    <h3 class="h4 fw-bold mb-3">Room-Based Workspaces</h3>
+                    <p class="text-muted mb-4">Create isolated collaboration environments with granular permissions, file storage, and real-time messaging for teams and projects.</p>
+                    <ul class="list-unstyled">
+                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Isolated team spaces</li>
+                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Granular permissions</li>
+                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Real-time messaging</li>
+                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Integrated file storage</li>
+                    </ul>
+                </div>
+                
+                <div class="feature-card fade-in-up stagger-delay-1">
+                    <div class="feature-icon">
+                        <i class="fas fa-comments"></i>
+                    </div>
+                    <h3 class="h4 fw-bold mb-3">Client Document Requests</h3>
+                    <p class="text-muted mb-4">Streamlined communication system for requesting documents from clients with file attachments and conversation tracking.</p>
+                    <ul class="list-unstyled">
+                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Document workflows</li>
+                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Conversation tracking</li>
+                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>File attachments</li>
+                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Status notifications</li>
+                    </ul>
+                </div>
+                
+                <div class="feature-card fade-in-up stagger-delay-2">
+                    <div class="feature-icon">
+                        <i class="fas fa-folder-tree"></i>
+                    </div>
+                    <h3 class="h4 fw-bold mb-3">Advanced File Management</h3>
+                    <p class="text-muted mb-4">Upload, organize, search, and manage files with hierarchical folders and comprehensive metadata tracking.</p>
+                    <ul class="list-unstyled">
+                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Hierarchical folders</li>
+                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Advanced search</li>
+                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Metadata tracking</li>
+                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>File versioning</li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Interactive Demo Section -->
+    <section class="feature-section" style="background-color: var(--bg-color);">
+        <div class="container">
+            <div class="row align-items-center">
+                <div class="col-lg-6">
+                    <div class="feature-showcase">
+                        <h2 class="section-title gradient-text">See It In Action</h2>
+                        <p class="section-subtitle">Experience the intuitive interface and powerful features that make DocuPulse the choice for modern enterprises.</p>
+                        <div class="row g-3">
+                            <div class="col-6">
+                                <div class="text-center p-3">
+                                    <i class="fas fa-users fa-2x mb-2" style="color: var(--primary-color);"></i>
+                                    <h6 class="fw-bold">Team Collaboration</h6>
+                                    <small class="text-muted">Real-time messaging and file sharing</small>
+                                </div>
+                            </div>
+                            <div class="col-6">
+                                <div class="text-center p-3">
+                                    <i class="fas fa-shield-alt fa-2x mb-2" style="color: var(--primary-color);"></i>
+                                    <h6 class="fw-bold">Enterprise Security</h6>
+                                    <small class="text-muted">Role-based access controls</small>
+                                </div>
+                            </div>
+                            <div class="col-6">
+                                <div class="text-center p-3">
+                                    <i class="fas fa-search fa-2x mb-2" style="color: var(--primary-color);"></i>
+                                    <h6 class="fw-bold">Smart Search</h6>
+                                    <small class="text-muted">Find files instantly</small>
+                                </div>
+                            </div>
+                            <div class="col-6">
+                                <div class="text-center p-3">
+                                    <i class="fas fa-bell fa-2x mb-2" style="color: var(--primary-color);"></i>
+                                    <h6 class="fw-bold">Notifications</h6>
+                                    <small class="text-muted">Stay updated in real-time</small>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-lg-6">
+                    <div class="interactive-demo">
+                        <div class="demo-placeholder">
+                            <i class="fas fa-laptop"></i>
+                            <h5 class="fw-bold">Interactive Demo</h5>
+                            <p>Experience the platform firsthand</p>
+                            <button class="btn btn-primary btn-lg px-4 py-3">
+                                <i class="fas fa-play me-2"></i>Launch Demo
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Advanced Features -->
+    <section class="feature-section">
+        <div class="container">
+            <div class="text-center mb-5">
+                <h2 class="section-title gradient-text">Advanced Capabilities</h2>
+                <p class="section-subtitle">Enterprise-grade features for complex document management needs</p>
             </div>
             <div class="row g-4">
-                <div class="col-lg-4 col-md-6">
-                    <div class="feature-card">
+                <div class="col-lg-4">
+                    <div class="feature-highlight fade-in-up">
                         <div class="feature-icon">
-                            <i class="fas fa-users"></i>
+                            <i class="fas fa-user-shield"></i>
                         </div>
-                        <h3 class="h5 fw-bold mb-3">Team Management</h3>
-                        <p class="text-muted">Efficient team management with member roles, permissions, and collaborative workflows for seamless project execution.</p>
+                        <h3 class="h5 fw-bold mb-3">Security & Compliance</h3>
+                        <p class="text-muted">Enterprise-grade security with comprehensive compliance features for data protection and regulatory requirements.</p>
                         <ul class="list-unstyled mt-3">
-                            <li><i class="fas fa-check text-success me-2"></i>Member roles</li>
-                            <li><i class="fas fa-check text-success me-2"></i>Collaborative workflows</li>
-                            <li><i class="fas fa-check text-success me-2"></i>Project execution</li>
+                            <li><i class="fas fa-check text-success me-2"></i>Role-based access controls</li>
+                            <li><i class="fas fa-check text-success me-2"></i>End-to-end encryption</li>
+                            <li><i class="fas fa-check text-success me-2"></i>GDPR and HIPAA compliance</li>
                         </ul>
                     </div>
                 </div>
-                <div class="col-lg-4 col-md-6">
-                    <div class="feature-card">
+                <div class="col-lg-4">
+                    <div class="feature-highlight fade-in-up stagger-delay-1">
                         <div class="feature-icon">
-                            <i class="fas fa-star"></i>
+                            <i class="fas fa-palette"></i>
                         </div>
-                        <h3 class="h5 fw-bold mb-3">File Organization</h3>
-                        <p class="text-muted">Advanced file organization with starring, tagging, and intelligent search capabilities for quick access to important documents.</p>
+                        <h3 class="h5 fw-bold mb-3">White Labeling</h3>
+                        <p class="text-muted">Complete brand customization with custom logos, company colors, and personalized branding throughout the platform.</p>
                         <ul class="list-unstyled mt-3">
-                            <li><i class="fas fa-check text-success me-2"></i>File starring</li>
-                            <li><i class="fas fa-check text-success me-2"></i>Intelligent search</li>
-                            <li><i class="fas fa-check text-success me-2"></i>Quick access</li>
+                            <li><i class="fas fa-check text-success me-2"></i>Custom company logo</li>
+                            <li><i class="fas fa-check text-success me-2"></i>Brand color customization</li>
+                            <li><i class="fas fa-check text-success me-2"></i>Personalized templates</li>
                         </ul>
                     </div>
                 </div>
-                <div class="col-lg-4 col-md-6">
-                    <div class="feature-card">
+                <div class="col-lg-4">
+                    <div class="feature-highlight fade-in-up stagger-delay-2">
                         <div class="feature-icon">
                             <i class="fas fa-bell"></i>
                         </div>
@@ -433,6 +564,38 @@
         </div>
     </section>
 
+    <!-- Stats Section -->
+    <section class="stats-section">
+        <div class="container">
+            <div class="row text-center">
+                <div class="col-md-3">
+                    <div class="stat-item">
+                        <span class="stat-number">99.9%</span>
+                        <div class="stat-label">Uptime</div>
+                    </div>
+                </div>
+                <div class="col-md-3">
+                    <div class="stat-item">
+                        <span class="stat-number">256-bit</span>
+                        <div class="stat-label">Encryption</div>
+                    </div>
+                </div>
+                <div class="col-md-3">
+                    <div class="stat-item">
+                        <span class="stat-number">24/7</span>
+                        <div class="stat-label">Support</div>
+                    </div>
+                </div>
+                <div class="col-md-3">
+                    <div class="stat-item">
+                        <span class="stat-number">1000+</span>
+                        <div class="stat-label">Organizations</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
     <!-- CTA Section -->
     <section class="py-5">
         <div class="container text-center">
@@ -446,6 +609,133 @@
 
     {% include 'components/footer_nav.html' %}
 
+    <!-- Explainer Video Modal -->
+    {% with 
+        modal_title='DocuPulse Features Overview',
+        video_title='Features Demo Video',
+        video_placeholder='Video placeholder - Replace with actual features demo video',
+        learning_title='What you\'ll see:',
+        learning_points=[
+            'Room-based workspace creation and management',
+            'Document request workflows and client communication',
+            'Advanced file management and organization',
+            'Security features and permission controls',
+            'White labeling and brand customization'
+        ],
+        cta_url=url_for('public.pricing'),
+        cta_text='Get Started Now'
+    %}
+        {% include 'components/explainer_video_modal.html' %}
+    {% endwith %}
+
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <script>
+        // Intersection Observer for animations
+        const observerOptions = {
+            threshold: 0.1,
+            rootMargin: '0px 0px -50px 0px'
+        };
+
+        const observer = new IntersectionObserver(function(entries) {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    entry.target.classList.add('visible');
+                }
+            });
+        }, observerOptions);
+
+        // Function to animate number counting
+        function animateNumber(element, endValue, duration = 2000) {
+            const start = performance.now();
+            const startValue = 0;
+            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);
+                
+                // Format the number based on the end value
+                let displayValue;
+                if (endValue === 99.9) {
+                    displayValue = currentValue.toFixed(1) + '%';
+                } else if (endValue === 256) {
+                    displayValue = Math.round(currentValue) + '-bit';
+                } else if (endValue === 24) {
+                    displayValue = Math.round(currentValue) + '/7';
+                } else {
+                    displayValue = Math.round(currentValue) + '+';
+                }
+                
+                element.textContent = displayValue;
+                
+                if (progress < 1) {
+                    requestAnimationFrame(updateNumber);
+                } else {
+                    // Ensure the final value is correct
+                    if (endValue === 99.9) {
+                        element.textContent = '99.9%';
+                    } else if (endValue === 256) {
+                        element.textContent = '256-bit';
+                    } else if (endValue === 24) {
+                        element.textContent = '24/7';
+                    } else {
+                        element.textContent = '1000+';
+                    }
+                }
+            }
+            
+            requestAnimationFrame(updateNumber);
+        }
+
+        // Observe elements for fade-in animation
+        document.addEventListener('DOMContentLoaded', function() {
+            const fadeElements = document.querySelectorAll('.fade-in-up');
+            fadeElements.forEach(el => {
+                observer.observe(el);
+            });
+            
+            // Stats animation observer
+            const statsObserver = new IntersectionObserver(function(entries) {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        const statNumbers = entry.target.querySelectorAll('.stat-number');
+                        statNumbers.forEach((stat, index) => {
+                            setTimeout(() => {
+                                const text = stat.textContent;
+                                let endValue;
+                                
+                                if (text.includes('99.9%')) {
+                                    endValue = 99.9;
+                                } else if (text.includes('256-bit')) {
+                                    endValue = 256;
+                                } else if (text.includes('24/7')) {
+                                    endValue = 24;
+                                } else if (text.includes('1000+')) {
+                                    endValue = 1000;
+                                }
+                                
+                                if (endValue) {
+                                    animateNumber(stat, endValue, 2000);
+                                }
+                            }, index * 300); // Stagger the animations
+                        });
+                        
+                        // Only trigger once
+                        statsObserver.unobserve(entry.target);
+                    }
+                });
+            }, { threshold: 0.5 });
+            
+            // Observe the stats section
+            const statsSection = document.querySelector('.stats-section');
+            if (statsSection) {
+                statsObserver.observe(statsSection);
+            }
+        });
+    </script>
 </body>
 </html> 
\ No newline at end of file
diff --git a/templates/public/pricing.html b/templates/public/pricing.html
index b7aafdc..3c44ddf 100644
--- a/templates/public/pricing.html
+++ b/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">
-        <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') %}