Sindbad~EG File Manager

Current Path : /home/copmadinaarea/thecopmadinaarea.org/portal/
Upload File :
Current File : /home/copmadinaarea/thecopmadinaarea.org/portal/features.php

<?php
require_once 'config/config.php';

$pageTitle = "Features - " . APP_NAME;

// Get settings for theme colors
$db = Database::getInstance()->getConnection();
$stmt = $db->query("SELECT * FROM general_settings ORDER BY id DESC LIMIT 1");
$settings = $stmt->fetch();

// Default settings if none exist
$settings = array_merge([
    'site_title' => 'Church Membership System',
    'theme_primary_color' => '#1E40AF',
    'theme_secondary_color' => '#F97316',
], $settings ?: []);
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo $pageTitle; ?></title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        .hero-gradient {
            background: linear-gradient(135deg, #1E40AF 0%, #9333EA 50%, #F97316 100%);
        }
        .feature-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Simple Header -->
    <header class="bg-white shadow-md">
        <div class="container mx-auto px-4 py-4 flex items-center justify-between">
            <div class="flex items-center space-x-3">
                <div class="w-10 h-10 rounded-xl flex items-center justify-center" style="background: linear-gradient(135deg, #1E40AF 0%, #F97316 100%);">
                    <i class="fas fa-church text-white"></i>
                </div>
                <span class="text-xl font-bold" style="background: linear-gradient(135deg, #1E40AF 0%, #F97316 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;"><?php echo htmlspecialchars($settings['site_title']); ?></span>
            </div>
            <a href="index.php" class="px-6 py-2 rounded-full text-white font-semibold hover:shadow-lg transition" style="background: linear-gradient(135deg, #1E40AF 0%, #9333EA 100%);">
                <i class="fas fa-home mr-2"></i>Back to Home
            </a>
        </div>
    </header>

    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20">
        <div class="container mx-auto px-4 text-center">
            <h1 class="text-5xl md:text-6xl font-bold mb-6">Powerful Features</h1>
            <p class="text-xl md:text-2xl text-white/90">Everything you need to manage your church community effectively</p>
        </div>
    </section>

    <!-- Features Section -->
    <section class="py-20">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
                <!-- Member Management -->
                <div class="feature-card bg-white rounded-2xl p-8 shadow-lg">
                    <div class="w-20 h-20 rounded-2xl flex items-center justify-center mx-auto mb-6" style="background: linear-gradient(135deg, #1E40AF 0%, #9333EA 100%);">
                        <i class="fas fa-users text-white text-3xl"></i>
                    </div>
                    <h3 class="text-2xl font-bold text-gray-800 mb-4 text-center">Member Management</h3>
                    <p class="text-gray-600 text-center">Comprehensive member profiles with 44+ fields, contact information, membership tracking, and hierarchical access control for different levels.</p>
                </div>
                
                <!-- Event Management -->
                <div class="feature-card bg-white rounded-2xl p-8 shadow-lg">
                    <div class="w-20 h-20 rounded-2xl flex items-center justify-center mx-auto mb-6" style="background: linear-gradient(135deg, #F97316 0%, #FBBF24 100%);">
                        <i class="fas fa-calendar-alt text-white text-3xl"></i>
                    </div>
                    <h3 class="text-2xl font-bold text-gray-800 mb-4 text-center">Event Management</h3>
                    <p class="text-gray-600 text-center">Schedule and manage church events, services, conferences, and special occasions with registration and attendance tracking.</p>
                </div>
                
                <!-- Membership Cards -->
                <div class="feature-card bg-white rounded-2xl p-8 shadow-lg">
                    <div class="w-20 h-20 rounded-2xl flex items-center justify-center mx-auto mb-6" style="background: linear-gradient(135deg, #9333EA 0%, #F97316 100%);">
                        <i class="fas fa-id-card text-white text-3xl"></i>
                    </div>
                    <h3 class="text-2xl font-bold text-gray-800 mb-4 text-center">Membership Cards</h3>
                    <p class="text-gray-600 text-center">Generate and print professional membership ID cards with unique card numbers, QR codes, and tracking capabilities.</p>
                </div>
                
                <!-- Reports & Analytics -->
                <div class="feature-card bg-white rounded-2xl p-8 shadow-lg">
                    <div class="w-20 h-20 rounded-2xl flex items-center justify-center mx-auto mb-6" style="background: linear-gradient(135deg, #FBBF24 0%, #F97316 100%);">
                        <i class="fas fa-chart-bar text-white text-3xl"></i>
                    </div>
                    <h3 class="text-2xl font-bold text-gray-800 mb-4 text-center">Reports & Analytics</h3>
                    <p class="text-gray-600 text-center">Generate detailed reports and gain insights into your community with export capabilities in multiple formats (Excel, PDF).</p>
                </div>
                
                <!-- Communication -->
                <div class="feature-card bg-white rounded-2xl p-8 shadow-lg">
                    <div class="w-20 h-20 rounded-2xl flex items-center justify-center mx-auto mb-6" style="background: linear-gradient(135deg, #1E40AF 0%, #F97316 100%);">
                        <i class="fas fa-envelope text-white text-3xl"></i>
                    </div>
                    <h3 class="text-2xl font-bold text-gray-800 mb-4 text-center">Communication</h3>
                    <p class="text-gray-600 text-center">Send notifications, emails, and SMS to keep everyone connected with customizable templates and bulk messaging.</p>
                </div>
                
                <!-- Security -->
                <div class="feature-card bg-white rounded-2xl p-8 shadow-lg">
                    <div class="w-20 h-20 rounded-2xl flex items-center justify-center mx-auto mb-6" style="background: linear-gradient(135deg, #9333EA 0%, #1E40AF 100%);">
                        <i class="fas fa-shield-alt text-white text-3xl"></i>
                    </div>
                    <h3 class="text-2xl font-bold text-gray-800 mb-4 text-center">Secure & Reliable</h3>
                    <p class="text-gray-600 text-center">Role-based access control, audit logging, and secure authentication to protect sensitive membership data.</p>
                </div>
                
                <!-- Public Search -->
                <div class="feature-card bg-white rounded-2xl p-8 shadow-lg">
                    <div class="w-20 h-20 rounded-2xl flex items-center justify-center mx-auto mb-6" style="background: linear-gradient(135deg, #F97316 0%, #9333EA 100%);">
                        <i class="fas fa-search text-white text-3xl"></i>
                    </div>
                    <h3 class="text-2xl font-bold text-gray-800 mb-4 text-center">Public Search</h3>
                    <p class="text-gray-600 text-center">Allow public members to search and verify their membership details without login, with privacy protection.</p>
                </div>
                
                <!-- Multi-Level Access -->
                <div class="feature-card bg-white rounded-2xl p-8 shadow-lg">
                    <div class="w-20 h-20 rounded-2xl flex items-center justify-center mx-auto mb-6" style="background: linear-gradient(135deg, #FBBF24 0%, #9333EA 100%);">
                        <i class="fas fa-sitemap text-white text-3xl"></i>
                    </div>
                    <h3 class="text-2xl font-bold text-gray-800 mb-4 text-center">Multi-Level Access</h3>
                    <p class="text-gray-600 text-center">Hierarchical management structure supporting Area, District, Assembly, and Superuser levels with permission control.</p>
                </div>
                
                <!-- Mobile Responsive -->
                <div class="feature-card bg-white rounded-2xl p-8 shadow-lg">
                    <div class="w-20 h-20 rounded-2xl flex items-center justify-center mx-auto mb-6" style="background: linear-gradient(135deg, #1E40AF 0%, #FBBF24 100%);">
                        <i class="fas fa-mobile-alt text-white text-3xl"></i>
                    </div>
                    <h3 class="text-2xl font-bold text-gray-800 mb-4 text-center">Mobile Responsive</h3>
                    <p class="text-gray-600 text-center">Fully responsive design works seamlessly on all devices - desktop, tablet, and mobile phones.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-gradient-to-r from-gray-900 via-gray-800 to-gray-900 text-white py-8">
        <div class="container mx-auto px-4 text-center">
            <p class="text-gray-400">© <?php echo date('Y'); ?> <?php echo htmlspecialchars($settings['site_title']); ?>. All rights reserved.</p>
        </div>
    </footer>

    <?php 
    // Include Chat Hub Widget (Admin Chat + AI Chatbot)
    if (file_exists(__DIR__ . '/includes/chat-hub-widget.php')) {
        include 'includes/chat-hub-widget.php';
    }
    ?>
</body>
</html>

Sindbad File Manager Version 1.0, Coded By Sindbad EG ~ The Terrorists