{% extends "base.html" %}

{% block content %}
<!-- Roadmap Hero -->
<section class="roadmap-hero bg-gradient-dark text-white py-5">
    <div class="container">
        <div class="row">
            <div class="col-12 text-center">
                <h1 class="display-4 fw-bold mb-4">
                    <i class="fas fa-road" aria-hidden="true"></i>
                    Development Roadmap
                </h1>
                <p class="lead">
                    Track our progress as we build the most accessible mobile operating system. 
                    Our roadmap is transparent and community-driven.
                </p>
            </div>
        </div>
    </div>
</section>

<!-- Current Status -->
<section class="current-status py-5">
    <div class="container">
        <div class="row">
            <div class="col-12 text-center mb-5">
                <h2 class="display-5 fw-bold">Current Development Status</h2>
                <p class="lead text-muted">Phase 1: Foundation - Building the core architecture</p>
            </div>
        </div>
        
        <div class="row g-4">
            <div class="col-md-3">
                <div class="status-card h-100 text-center p-4 border rounded-3">
                    <div class="progress-circle mb-3">
                        <svg width="80" height="80" viewBox="0 0 80 80" aria-labelledby="kernel-progress-title">
                            <title id="kernel-progress-title">Kernel development: 75% complete</title>
                            <circle cx="40" cy="40" r="35" stroke="#e9ecef" stroke-width="6" fill="none"/>
                            <circle cx="40" cy="40" r="35" stroke="#28a745" stroke-width="6" fill="none"
                                    stroke-dasharray="164.93" stroke-dashoffset="41.23" 
                                    transform="rotate(-90 40 40)"/>
                            <text x="40" y="45" text-anchor="middle" font-size="16" font-weight="bold" fill="#28a745">75%</text>
                        </svg>
                    </div>
                    <h3 class="h5 fw-bold">Kernel Adaptation</h3>
                    <p class="text-muted small">Red Hat Linux kernel modified for mobile and accessibility features</p>
                </div>
            </div>
            
            <div class="col-md-3">
                <div class="status-card h-100 text-center p-4 border rounded-3">
                    <div class="progress-circle mb-3">
                        <svg width="80" height="80" viewBox="0 0 80 80" aria-labelledby="accessibility-progress-title">
                            <title id="accessibility-progress-title">Accessibility framework: 60% complete</title>
                            <circle cx="40" cy="40" r="35" stroke="#e9ecef" stroke-width="6" fill="none"/>
                            <circle cx="40" cy="40" r="35" stroke="#ffc107" stroke-width="6" fill="none"
                                    stroke-dasharray="164.93" stroke-dashoffset="65.97" 
                                    transform="rotate(-90 40 40)"/>
                            <text x="40" y="45" text-anchor="middle" font-size="16" font-weight="bold" fill="#ffc107">60%</text>
                        </svg>
                    </div>
                    <h3 class="h5 fw-bold">Accessibility Core</h3>
                    <p class="text-muted small">Foundation accessibility services and APIs</p>
                </div>
            </div>
            
            <div class="col-md-3">
                <div class="status-card h-100 text-center p-4 border rounded-3">
                    <div class="progress-circle mb-3">
                        <svg width="80" height="80" viewBox="0 0 80 80" aria-labelledby="ui-progress-title">
                            <title id="ui-progress-title">Mobile UI development: 40% complete</title>
                            <circle cx="40" cy="40" r="35" stroke="#e9ecef" stroke-width="6" fill="none"/>
                            <circle cx="40" cy="40" r="35" stroke="#17a2b8" stroke-width="6" fill="none"
                                    stroke-dasharray="164.93" stroke-dashoffset="98.96" 
                                    transform="rotate(-90 40 40)"/>
                            <text x="40" y="45" text-anchor="middle" font-size="16" font-weight="bold" fill="#17a2b8">40%</text>
                        </svg>
                    </div>
                    <h3 class="h5 fw-bold">Mobile UI Layer</h3>
                    <p class="text-muted small">Touch-optimized interface with accessibility integration</p>
                </div>
            </div>
            
            <div class="col-md-3">
                <div class="status-card h-100 text-center p-4 border rounded-3">
                    <div class="progress-circle mb-3">
                        <svg width="80" height="80" viewBox="0 0 80 80" aria-labelledby="sdk-progress-title">
                            <title id="sdk-progress-title">SDK development: 25% complete</title>
                            <circle cx="40" cy="40" r="35" stroke="#e9ecef" stroke-width="6" fill="none"/>
                            <circle cx="40" cy="40" r="35" stroke="#6f42c1" stroke-width="6" fill="none"
                                    stroke-dasharray="164.93" stroke-dashoffset="123.70" 
                                    transform="rotate(-90 40 40)"/>
                            <text x="40" y="45" text-anchor="middle" font-size="16" font-weight="bold" fill="#6f42c1">25%</text>
                        </svg>
                    </div>
                    <h3 class="h5 fw-bold">Developer SDK</h3>
                    <p class="text-muted small">Tools and APIs for third-party developers</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Roadmap Timeline -->
<section class="roadmap-timeline bg-light py-5">
    <div class="container">
        <div class="row">
            <div class="col-12 text-center mb-5">
                <h2 class="display-5 fw-bold">Development Timeline</h2>
                <p class="lead text-muted">Our planned phases and milestones for PrismaOS development</p>
            </div>
        </div>
        
        <div class="row">
            <div class="col-12">
                <div class="timeline">
                    <!-- Phase 1: Foundation -->
                    <div class="timeline-item completed">
                        <div class="timeline-marker">
                            <div class="timeline-status completed">
                                <i class="fas fa-check" aria-hidden="true"></i>
                            </div>
                        </div>
                        <div class="timeline-content">
                            <div class="timeline-header">
                                <h3 class="h4 fw-bold text-success">Phase 1: Foundation</h3>
                                <span class="timeline-date badge bg-success">Q1-Q2 2025</span>
                            </div>
                            <div class="timeline-body">
                                <p class="text-muted mb-3">
                                    Adapt Red Hat Linux kernel for mobile hardware and establish core infrastructure.
                                </p>
                                <div class="timeline-milestones">
                                    <h4 class="h6 fw-bold mb-2">Completed Milestones:</h4>
                                    <ul class="list-unstyled">
                                        <li class="mb-1">
                                            <i class="fas fa-check-circle text-success" aria-hidden="true"></i>
                                            Kernel compilation for ARM64 architecture
                                        </li>
                                        <li class="mb-1">
                                            <i class="fas fa-check-circle text-success" aria-hidden="true"></i>
                                            Basic device driver framework
                                        </li>
                                        <li class="mb-1">
                                            <i class="fas fa-check-circle text-success" aria-hidden="true"></i>
                                            Real-time scheduling implementation
                                        </li>
                                        <li class="mb-1">
                                            <i class="fas fa-check-circle text-success" aria-hidden="true"></i>
                                            Power management optimization
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Phase 2: Accessibility Core -->
                    <div class="timeline-item active">
                        <div class="timeline-marker">
                            <div class="timeline-status active">
                                <i class="fas fa-cog fa-spin" aria-hidden="true"></i>
                            </div>
                        </div>
                        <div class="timeline-content">
                            <div class="timeline-header">
                                <h3 class="h4 fw-bold text-primary">Phase 2: Accessibility Core</h3>
                                <span class="timeline-date badge bg-primary">Q2-Q3 2025</span>
                            </div>
                            <div class="timeline-body">
                                <p class="text-muted mb-3">
                                    Implement fundamental accessibility framework and services.
                                </p>
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <div class="timeline-milestones">
                                            <h4 class="h6 fw-bold mb-2 text-success">Completed:</h4>
                                            <ul class="list-unstyled">
                                                <li class="mb-1">
                                                    <i class="fas fa-check-circle text-success" aria-hidden="true"></i>
                                                    Text-to-speech engine integration
                                                </li>
                                                <li class="mb-1">
                                                    <i class="fas fa-check-circle text-success" aria-hidden="true"></i>
                                                    Basic voice recognition framework
                                                </li>
                                                <li class="mb-1">
                                                    <i class="fas fa-check-circle text-success" aria-hidden="true"></i>
                                                    Haptic feedback system
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="timeline-milestones">
                                            <h4 class="h6 fw-bold mb-2 text-warning">In Progress:</h4>
                                            <ul class="list-unstyled">
                                                <li class="mb-1">
                                                    <i class="fas fa-clock text-warning" aria-hidden="true"></i>
                                                    Screen reader service architecture
                                                </li>
                                                <li class="mb-1">
                                                    <i class="fas fa-clock text-warning" aria-hidden="true"></i>
                                                    Gesture recognition system
                                                </li>
                                                <li class="mb-1">
                                                    <i class="fas fa-clock text-warning" aria-hidden="true"></i>
                                                    Accessibility API framework
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Phase 3: UI Development -->
                    <div class="timeline-item upcoming">
                        <div class="timeline-marker">
                            <div class="timeline-status upcoming">
                                <i class="fas fa-clock" aria-hidden="true"></i>
                            </div>
                        </div>
                        <div class="timeline-content">
                            <div class="timeline-header">
                                <h3 class="h4 fw-bold text-info">Phase 3: UI Development</h3>
                                <span class="timeline-date badge bg-info">Q3-Q4 2025</span>
                            </div>
                            <div class="timeline-body">
                                <p class="text-muted mb-3">
                                    Create mobile interface with accessibility integration and adaptive design.
                                </p>
                                <div class="timeline-milestones">
                                    <h4 class="h6 fw-bold mb-2">Planned Milestones:</h4>
                                    <ul class="list-unstyled">
                                        <li class="mb-1">
                                            <i class="fas fa-circle text-muted" aria-hidden="true"></i>
                                            Adaptive UI component library
                                        </li>
                                        <li class="mb-1">
                                            <i class="fas fa-circle text-muted" aria-hidden="true"></i>
                                            High contrast theme system
                                        </li>
                                        <li class="mb-1">
                                            <i class="fas fa-circle text-muted" aria-hidden="true"></i>
                                            Touch gesture optimization
                                        </li>
                                        <li class="mb-1">
                                            <i class="fas fa-circle text-muted" aria-hidden="true"></i>
                                            Voice-controlled navigation
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Phase 4: App Ecosystem -->
                    <div class="timeline-item upcoming">
                        <div class="timeline-marker">
                            <div class="timeline-status upcoming">
                                <i class="fas fa-clock" aria-hidden="true"></i>
                            </div>
                        </div>
                        <div class="timeline-content">
                            <div class="timeline-header">
                                <h3 class="h4 fw-bold text-warning">Phase 4: App Ecosystem</h3>
                                <span class="timeline-date badge bg-warning">Q4 2025 - Q1 2026</span>
                            </div>
                            <div class="timeline-body">
                                <p class="text-muted mb-3">
                                    Develop essential applications and SDK for third-party developers.
                                </p>
                                <div class="timeline-milestones">
                                    <h4 class="h6 fw-bold mb-2">Planned Milestones:</h4>
                                    <ul class="list-unstyled">
                                        <li class="mb-1">
                                            <i class="fas fa-circle text-muted" aria-hidden="true"></i>
                                            Core system applications
                                        </li>
                                        <li class="mb-1">
                                            <i class="fas fa-circle text-muted" aria-hidden="true"></i>
                                            Developer SDK release
                                        </li>
                                        <li class="mb-1">
                                            <i class="fas fa-circle text-muted" aria-hidden="true"></i>
                                            App store framework
                                        </li>
                                        <li class="mb-1">
                                            <i class="fas fa-circle text-muted" aria-hidden="true"></i>
                                            Accessibility compliance tools
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Phase 5: Testing & Refinement -->
                    <div class="timeline-item upcoming">
                        <div class="timeline-marker">
                            <div class="timeline-status upcoming">
                                <i class="fas fa-clock" aria-hidden="true"></i>
                            </div>
                        </div>
                        <div class="timeline-content">
                            <div class="timeline-header">
                                <h3 class="h4 fw-bold text-danger">Phase 5: Testing & Refinement</h3>
                                <span class="timeline-date badge bg-danger">Q1-Q2 2026</span>
                            </div>
                            <div class="timeline-body">
                                <p class="text-muted mb-3">
                                    Extensive testing with users who have various disabilities and performance optimization.
                                </p>
                                <div class="timeline-milestones">
                                    <h4 class="h6 fw-bold mb-2">Planned Milestones:</h4>
                                    <ul class="list-unstyled">
                                        <li class="mb-1">
                                            <i class="fas fa-circle text-muted" aria-hidden="true"></i>
                                            Comprehensive accessibility testing
                                        </li>
                                        <li class="mb-1">
                                            <i class="fas fa-circle text-muted" aria-hidden="true"></i>
                                            Performance optimization
                                        </li>
                                        <li class="mb-1">
                                            <i class="fas fa-circle text-muted" aria-hidden="true"></i>
                                            Security audit and hardening
                                        </li>
                                        <li class="mb-1">
                                            <i class="fas fa-circle text-muted" aria-hidden="true"></i>
                                            Beta release preparation
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Phase 6: Community Building -->
                    <div class="timeline-item upcoming">
                        <div class="timeline-marker">
                            <div class="timeline-status upcoming">
                                <i class="fas fa-clock" aria-hidden="true"></i>
                            </div>
                        </div>
                        <div class="timeline-content">
                            <div class="timeline-header">
                                <h3 class="h4 fw-bold text-secondary">Phase 6: Community Building</h3>
                                <span class="timeline-date badge bg-secondary">Q2-Q3 2026</span>
                            </div>
                            <div class="timeline-body">
                                <p class="text-muted mb-3">
                                    Establish open-source community focused on accessibility-first design and public release.
                                </p>
                                <div class="timeline-milestones">
                                    <h4 class="h6 fw-bold mb-2">Planned Milestones:</h4>
                                    <ul class="list-unstyled">
                                        <li class="mb-1">
                                            <i class="fas fa-circle text-muted" aria-hidden="true"></i>
                                            Public beta release
                                        </li>
                                        <li class="mb-1">
                                            <i class="fas fa-circle text-muted" aria-hidden="true"></i>
                                            Developer documentation portal
                                        </li>
                                        <li class="mb-1">
                                            <i class="fas fa-circle text-muted" aria-hidden="true"></i>
                                            Community governance structure
                                        </li>
                                        <li class="mb-1">
                                            <i class="fas fa-circle text-muted" aria-hidden="true"></i>
                                            Stable release (v1.0)
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Key Milestones -->
<section class="key-milestones py-5">
    <div class="container">
        <div class="row">
            <div class="col-12 text-center mb-5">
                <h2 class="display-5 fw-bold">Key Milestones</h2>
                <p class="lead text-muted">Important dates and achievements in PrismaOS development</p>
            </div>
        </div>
        
        <div class="row g-4">
            <div class="col-md-6 col-lg-3">
                <div class="milestone-card h-100 text-center p-4 bg-success text-white rounded-3">
                    <div class="milestone-icon mb-3">
                        <i class="fas fa-flag-checkered fa-3x" aria-hidden="true"></i>
                    </div>
                    <h3 class="h5 fw-bold">Project Launch</h3>
                    <p class="milestone-date mb-2">January 2025</p>
                    <p class="small mb-0">Official project announcement and team formation</p>
                </div>
            </div>
            
            <div class="col-md-6 col-lg-3">
                <div class="milestone-card h-100 text-center p-4 bg-primary text-white rounded-3">
                    <div class="milestone-icon mb-3">
                        <i class="fas fa-code fa-3x" aria-hidden="true"></i>
                    </div>
                    <h3 class="h5 fw-bold">First Kernel Boot</h3>
                    <p class="milestone-date mb-2">March 2025</p>
                    <p class="small mb-0">Modified Red Hat kernel successfully boots on mobile hardware</p>
                </div>
            </div>
            
            <div class="col-md-6 col-lg-3">
                <div class="milestone-card h-100 text-center p-4 bg-warning text-dark rounded-3">
                    <div class="milestone-icon mb-3">
                        <i class="fas fa-volume-up fa-3x" aria-hidden="true"></i>
                    </div>
                    <h3 class="h5 fw-bold">TTS Integration</h3>
                    <p class="milestone-date mb-2">June 2025</p>
                    <p class="small mb-0">Text-to-speech engine fully integrated and functional</p>
                </div>
            </div>
            
            <div class="col-md-6 col-lg-3">
                <div class="milestone-card h-100 text-center p-4 bg-info text-white rounded-3">
                    <div class="milestone-icon mb-3">
                        <i class="fas fa-mobile-alt fa-3x" aria-hidden="true"></i>
                    </div>
                    <h3 class="h5 fw-bold">Alpha Release</h3>
                    <p class="milestone-date mb-2">Q4 2025</p>
                    <p class="small mb-0">First alpha version available for developer testing</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Technical Challenges -->
<section class="technical-challenges bg-light py-5">
    <div class="container">
        <div class="row">
            <div class="col-12 text-center mb-5">
                <h2 class="display-5 fw-bold">Technical Challenges</h2>
                <p class="lead text-muted">Key challenges we're addressing in PrismaOS development</p>
            </div>
        </div>
        
        <div class="row g-4">
            <div class="col-lg-4">
                <div class="challenge-card h-100 p-4 bg-white border rounded-3">
                    <div class="challenge-icon mb-3">
                        <i class="fas fa-microchip fa-3x text-danger" aria-hidden="true"></i>
                    </div>
                    <h3 class="h5 fw-bold">Hardware Compatibility</h3>
                    <p class="text-muted mb-3">
                        Ensuring compatibility with diverse smartphone hardware while maintaining 
                        optimal performance for accessibility features.
                    </p>
                    <div class="challenge-status">
                        <div class="d-flex justify-content-between mb-2">
                            <span class="small fw-bold">Progress</span>
                            <span class="small">70%</span>
                        </div>
                        <div class="progress">
                            <div class="progress-bar bg-danger" role="progressbar" style="width: 70%" 
                                 aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"
                                 aria-label="Hardware compatibility progress: 70%"></div>
                        </div>
                    </div>
                    <div class="challenge-solutions mt-3">
                        <h4 class="h6 fw-bold">Solutions:</h4>
                        <ul class="list-unstyled small text-muted">
                            <li><i class="fas fa-check text-success" aria-hidden="true"></i> Modular driver architecture</li>
                            <li><i class="fas fa-check text-success" aria-hidden="true"></i> Hardware abstraction layer</li>
                            <li><i class="fas fa-clock text-warning" aria-hidden="true"></i> Device-specific optimizations</li>
                        </ul>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-4">
                <div class="challenge-card h-100 p-4 bg-white border rounded-3">
                    <div class="challenge-icon mb-3">
                        <i class="fas fa-battery-half fa-3x text-warning" aria-hidden="true"></i>
                    </div>
                    <h3 class="h5 fw-bold">Performance Optimization</h3>
                    <p class="text-muted mb-3">
                        Balancing comprehensive accessibility features with battery life and 
                        system performance requirements.
                    </p>
                    <div class="challenge-status">
                        <div class="d-flex justify-content-between mb-2">
                            <span class="small fw-bold">Progress</span>
                            <span class="small">55%</span>
                        </div>
                        <div class="progress">
                            <div class="progress-bar bg-warning" role="progressbar" style="width: 55%" 
                                 aria-valuenow="55" aria-valuemin="0" aria-valuemax="100"
                                 aria-label="Performance optimization progress: 55%"></div>
                        </div>
                    </div>
                    <div class="challenge-solutions mt-3">
                        <h4 class="h6 fw-bold">Solutions:</h4>
                        <ul class="list-unstyled small text-muted">
                            <li><i class="fas fa-check text-success" aria-hidden="true"></i> Adaptive CPU scaling</li>
                            <li><i class="fas fa-clock text-warning" aria-hidden="true"></i> GPU acceleration for AI</li>
                            <li><i class="fas fa-clock text-warning" aria-hidden="true"></i> Memory optimization</li>
                        </ul>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-4">
                <div class="challenge-card h-100 p-4 bg-white border rounded-3">
                    <div class="challenge-icon mb-3">
                        <i class="fas fa-users fa-3x text-info" aria-hidden="true"></i>
                    </div>
                    <h3 class="h5 fw-bold">Community Support</h3>
                    <p class="text-muted mb-3">
                        Building a developer ecosystem around accessibility-first design and 
                        fostering community contributions.
                    </p>
                    <div class="challenge-status">
                        <div class="d-flex justify-content-between mb-2">
                            <span class="small fw-bold">Progress</span>
                            <span class="small">40%</span>
                        </div>
                        <div class="progress">
                            <div class="progress-bar bg-info" role="progressbar" style="width: 40%" 
                                 aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"
                                 aria-label="Community support progress: 40%"></div>
                        </div>
                    </div>
                    <div class="challenge-solutions mt-3">
                        <h4 class="h6 fw-bold">Initiatives:</h4>
                        <ul class="list-unstyled small text-muted">
                            <li><i class="fas fa-check text-success" aria-hidden="true"></i> Developer documentation</li>
                            <li><i class="fas fa-check text-success" aria-hidden="true"></i> Community platforms</li>
                            <li><i class="fas fa-clock text-warning" aria-hidden="true"></i> Mentorship programs</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Future Vision -->
<section class="future-vision py-5">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8 text-center">
                <h2 class="display-5 fw-bold mb-4">Our Vision for the Future</h2>
                <p class="lead text-muted mb-4">
                    PrismaOS aims to become the leading mobile operating system for accessibility, 
                    setting new standards for inclusive technology design.
                </p>
                
                <div class="vision-goals row g-4 text-start">
                    <div class="col-md-6">
                        <div class="vision-goal p-3 border rounded">
                            <h3 class="h6 fw-bold text-primary mb-2">
                                <i class="fas fa-globe" aria-hidden="true"></i>
                                Global Accessibility Standard
                            </h3>
                            <p class="text-muted small mb-0">
                                Establish PrismaOS as the reference implementation for mobile accessibility standards.
                            </p>
                        </div>
                    </div>
                    
                    <div class="col-md-6">
                        <div class="vision-goal p-3 border rounded">
                            <h3 class="h6 fw-bold text-success mb-2">
                                <i class="fas fa-code-branch" aria-hidden="true"></i>
                                Open Source Ecosystem
                            </h3>
                            <p class="text-muted small mb-0">
                                Foster a thriving community of developers building accessible applications.
                            </p>
                        </div>
                    </div>
                    
                    <div class="col-md-6">
                        <div class="vision-goal p-3 border rounded">
                            <h3 class="h6 fw-bold text-warning mb-2">
                                <i class="fas fa-rocket" aria-hidden="true"></i>
                                Innovation Driver
                            </h3>
                            <p class="text-muted small mb-0">
                                Pioneer new accessibility technologies and push the boundaries of inclusive design.
                            </p>
                        </div>
                    </div>
                    
                    <div class="col-md-6">
                        <div class="vision-goal p-3 border rounded">
                            <h3 class="h6 fw-bold text-info mb-2">
                                <i class="fas fa-heart" aria-hidden="true"></i>
                                User Empowerment
                            </h3>
                            <p class="text-muted small mb-0">
                                Empower users with disabilities to fully participate in the digital world.
                            </p>
                        </div>
                    </div>
                </div>
                
                <div class="mt-5">
                    <a href="{{ url_for('community') }}" class="btn btn-primary btn-lg me-3">
                        <i class="fas fa-users" aria-hidden="true"></i>
                        Join Our Mission
                    </a>
                    <a href="{{ url_for('contact') }}" class="btn btn-outline-primary btn-lg">
                        <i class="fas fa-envelope" aria-hidden="true"></i>
                        Share Your Ideas
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}