From 56e7f1be53a1d347cbf4f0f35668f3586447f47f Mon Sep 17 00:00:00 2001 From: Kobe Date: Mon, 23 Jun 2025 22:35:12 +0200 Subject: [PATCH] Better public pages style --- templates/components/cta_buttons.html | 4 +- .../components/explainer_video_modal.html | 111 +++ templates/components/hero_section.html | 73 ++ templates/components/pricing_section.html | 64 +- templates/home.html | 158 +++- templates/public/contact.html | 14 +- templates/public/features.html | 894 ++++++++++++------ templates/public/pricing.html | 29 +- 8 files changed, 1003 insertions(+), 344 deletions(-) create mode 100644 templates/components/explainer_video_modal.html create mode 100644 templates/components/hero_section.html 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 @@
- + {{ primary_text }} - + {{ secondary_text }}
\ 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 @@ + + + + \ 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 @@ + +
+
+
+
+
+
+
+

{{ title }}

+

{{ description }}

+ {% if buttons %} +
+ {% for button in buttons %} + {% if button.type == 'link' %} + + {% if button.icon %}{% endif %}{{ button.text }} + + {% elif button.type == 'modal' %} + + {% elif button.type == 'button' %} + + {% endif %} + {% endfor %} +
+ {% endif %} +
+
+ + \ 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 @@
  • Email support
    • - Get Started + Get Started @@ -51,7 +51,7 @@
  • Priority support
    • - Get Started + Get Started @@ -73,7 +73,7 @@
  • 24/7 dedicated support
    • - Get Started + Get Started @@ -92,7 +92,7 @@
  • Dedicated account manager
    • - Contact Sales + Contact Sales @@ -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; + } {% include 'components/header_nav.html' %} -
    -
    -

    Enterprise Document Management
    Made Simple

    -

    Secure, intelligent, and scalable document management platform designed for modern enterprises. Streamline workflows, enhance collaboration, and protect your data.

    -
    - - Get Started - - - Learn More - -
    -
    -
    + {% 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 %}
    @@ -287,7 +393,7 @@

    Ready to Get Started?

    Contact us today to learn how DocuPulse can transform your document management

    - {% 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 %}
    @@ -297,6 +403,24 @@ {% include 'components/footer_nav.html' %} + + {% 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 %} +
    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' %} -
    -
    -

    Get in Touch

    -

    We're here to help with your enterprise document management needs

    -
    -
    + {% 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 %}
    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 @@ @@ -222,201 +383,171 @@ {% include 'components/header_nav.html' %} -
    -
    -
    -
    -
    -
    -
    -

    Powerful Features for Modern Enterprises

    -

    Discover how DocuPulse transforms document management with intelligent workflows, secure collaboration, and scalable architecture.

    -
    -
    + {% 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

    -

    Create isolated collaboration environments with granular permissions, file storage, and real-time messaging for teams and projects.

    -
      -
    • Isolated team spaces for each project
      • -
    • Granular permissions and access controls
      • -
    • Integrated file storage and messaging
      • -
    • Real-time collaboration tools
      • -
    -
    -
    -
    -
    -
    - -

    Visual Guide: Room Workspace Interface

    - Screenshot or demo of room creation and management -
    -
    -
    -
    -
    -
    - - -
    -
    -
    -
    -
    -

    Client Document Requests

    -

    Streamlined communication system for requesting documents from clients with file attachments and conversation tracking.

    -
      -
    • Document request workflows
      • -
    • Conversation tracking and history
      • -
    • File attachments and sharing
      • -
    • Status tracking and notifications
      • -
    -
    -
    -
    -
    -
    - -

    Visual Guide: Document Request Flow

    - Workflow diagram or interface screenshot -
    -
    -
    -
    -
    -
    - - -
    -
    -
    -
    -
    -

    Advanced File Management

    -

    Upload, organize, search, and manage files with hierarchical folders and comprehensive metadata tracking.

    -
      -
    • Hierarchical folder structure
      • -
    • Advanced search and filtering
      • -
    • Metadata tracking and organization
      • -
    • File versioning and history
      • -
    -
    -
    -
    -
    -
    - -

    Visual Guide: File Management Interface

    - File browser and organization interface -
    -
    -
    -
    -
    -
    - - -
    -
    -
    -
    -
    -

    Security & Compliance

    -

    Enterprise-grade security with comprehensive compliance features for data protection and regulatory requirements.

    -
      -
    • Role-based access controls
      • -
    • End-to-end encryption
      • -
    • GDPR and HIPAA compliance
      • -
    • Comprehensive audit logging
      • -
    -
    -
    -
    -
    -
    - -

    Visual Guide: Security Dashboard

    - Security settings and compliance reports -
    -
    -
    -
    -
    -
    - - -
    -
    -
    -
    -
    -

    White Labeling

    -

    Complete brand customization with custom logos, company colors, and personalized branding throughout the platform.

    -
      -
    • Custom company logo upload
      • -
    • Brand color customization
      • -
    • Personalized email templates
      • -
    • Complete platform rebranding
      • -
    -
    -
    -
    -
    -
    - -

    Visual Guide: Brand Customization

    - Logo upload and color customization interface -
    -
    -
    -
    -
    -
    - - -
    -

    Additional Features

    -

    More powerful tools to enhance your document management workflow

    +

    Core Features

    +

    Everything you need to revolutionize your document management workflow

    +
    +
    +
    +
    + +
    +

    Room-Based Workspaces

    +

    Create isolated collaboration environments with granular permissions, file storage, and real-time messaging for teams and projects.

    +
      +
    • Isolated team spaces
      • +
    • Granular permissions
      • +
    • Real-time messaging
      • +
    • Integrated file storage
      • +
    +
    + +
    +
    + +
    +

    Client Document Requests

    +

    Streamlined communication system for requesting documents from clients with file attachments and conversation tracking.

    +
      +
    • Document workflows
      • +
    • Conversation tracking
      • +
    • File attachments
      • +
    • Status notifications
      • +
    +
    + +
    +
    + +
    +

    Advanced File Management

    +

    Upload, organize, search, and manage files with hierarchical folders and comprehensive metadata tracking.

    +
      +
    • Hierarchical folders
      • +
    • Advanced search
      • +
    • Metadata tracking
      • +
    • File versioning
      • +
    +
    +
    +
    +
    + + +
    +
    +
    +
    +
    +

    See It In Action

    +

    Experience the intuitive interface and powerful features that make DocuPulse the choice for modern enterprises.

    +
    +
    +
    + +
    Team Collaboration
    + Real-time messaging and file sharing +
    +
    +
    +
    + +
    Enterprise Security
    + Role-based access controls +
    +
    +
    +
    + +
    Smart Search
    + Find files instantly +
    +
    +
    +
    + +
    Notifications
    + Stay updated in real-time +
    +
    +
    +
    +
    +
    +
    +
    + +
    Interactive Demo
    +

    Experience the platform firsthand

    + +
    +
    +
    +
    +
    +
    + + +
    +
    +
    +

    Advanced Capabilities

    +

    Enterprise-grade features for complex document management needs

    -
    -
    +
    +
    - +
    -

    Team Management

    -

    Efficient team management with member roles, permissions, and collaborative workflows for seamless project execution.

    +

    Security & Compliance

    +

    Enterprise-grade security with comprehensive compliance features for data protection and regulatory requirements.

      -
    • Member roles
      • -
    • Collaborative workflows
      • -
    • Project execution
      • +
    • Role-based access controls
      • +
    • End-to-end encryption
      • +
    • GDPR and HIPAA compliance
    -
    -
    +
    +
    - +
    -

    File Organization

    -

    Advanced file organization with starring, tagging, and intelligent search capabilities for quick access to important documents.

    +

    White Labeling

    +

    Complete brand customization with custom logos, company colors, and personalized branding throughout the platform.

      -
    • File starring
      • -
    • Intelligent search
      • -
    • Quick access
      • +
    • Custom company logo
      • +
    • Brand color customization
      • +
    • Personalized templates
    -
    -
    +
    +
    @@ -433,6 +564,38 @@
    + +
    +
    +
    +
    +
    + 99.9% +
    Uptime
    +
    +
    +
    +
    + 256-bit +
    Encryption
    +
    +
    +
    +
    + 24/7 +
    Support
    +
    +
    +
    +
    + 1000+ +
    Organizations
    +
    +
    +
    +
    +
    +
    @@ -446,6 +609,133 @@ {% include 'components/footer_nav.html' %} + + {% 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 %} + + \ 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); } @@ -68,12 +81,14 @@ {% include 'components/header_nav.html' %} -
    -
    -

    Simple, Transparent Pricing

    -

    Choose the perfect plan for your enterprise. No hidden fees, no surprises.

    -
    -
    + {% 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 %} {% with contact_url=url_for('public.contact') %}