<%- include('web/layouts/header') %>

<div class="container-fluid">
    <!-- Hero Section -->
    <div class="bg-primary bg-gradient text-white py-5">
        <div class="container py-5">
            <div class="row align-items-center">
                <div class="col-lg-6">
                    <div class="mb-4">
                        <div class="d-flex align-items-center">
                            <div class="bg-warning rounded-circle p-3 me-3">
                                <i class="bi bi-lightning-charge-fill fs-1"></i>
                            </div>
                            <h1 class="display-4 fw-bold mb-0">MEX</h1>
                        </div>
                    </div>
                    
                    <h2 class="display-5 fw-bold mb-3">Structured & Maintainable Express Framework</h2>
                    <p class="lead mb-4 opacity-75">
                        A modular Express.js framework with centralized routing and organized architecture 
                        for scalable web applications.
                    </p>
                    
                    <div class="d-flex flex-wrap gap-3 mt-5">
                        <a href="/login" class="btn btn-light btn-lg px-4">
                            <i class="bi bi-box-arrow-in-right me-2"></i>Get Started
                        </a>
                        <a href="/docs" class="btn btn-outline-light btn-lg px-4">
                            <i class="bi bi-book me-2"></i>View Documentation
                        </a>
                    </div>
                    
                    <div class="mt-5">
                        <div class="row g-3">
                            <div class="col-auto">
                                <span class="badge bg-light text-dark p-2">
                                    <i class="bi bi-diagram-3 me-1"></i>
                                    Modular Architecture
                                </span>
                            </div>
                            <div class="col-auto">
                                <span class="badge bg-light text-dark p-2">
                                    <i class="bi bi-files me-1"></i>
                                    Centralized Routing
                                </span>
                            </div>
                            <div class="col-auto">
                                <span class="badge bg-light text-dark p-2">
                                    <i class="bi bi-shield-check me-1"></i>
                                    Built-in Security
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-6 d-none d-lg-block">
                    <div class="bg-dark rounded-3 p-4 shadow-lg">
                        <div class="d-flex align-items-center mb-3">
                            <div class="d-flex me-3">
                                <span class="bg-danger rounded-circle me-1" style="width: 12px; height: 12px;"></span>
                                <span class="bg-warning rounded-circle me-1" style="width: 12px; height: 12px;"></span>
                                <span class="bg-success rounded-circle" style="width: 12px; height: 12px;"></span>
                            </div>
                            <span class="text-muted font-monospace">routes/web.js</span>
                        </div>
                        <div class="bg-black rounded p-3">
                            <code class="text-light font-monospace">
                                <span class="text-primary">/**</span><br>
                                <span class="text-primary"> * MEX Framework - Centralized Routing Module</span><br>
                                <span class="text-primary"> */</span><br>
                                <span class="text-info">import</span> express <span class="text-info">from</span> <span class="text-warning">"express"</span>;<br>
                                <span class="text-info">import</span> authRoutes <span class="text-info">from</span> <span class="text-warning">"@routes/auth"</span>;<br>
                                <span class="text-info">import</span> WebController <span class="text-info">from</span> <span class="text-warning">"@app/controllers/web/WebController"</span>;<br><br>
                                
                                <span class="text-info">const</span> router = express.<span class="text-info">Router</span>();<br><br>
                                
                                <span class="text-success">// Auth Routes</span><br>
                                authRoutes(router);<br><br>
                                
                                <span class="text-success">// Web Routes</span><br>
                                router.<span class="text-info">get</span>(<span class="text-warning">'/'</span>, WebController.<span class="text-info">index</span>);<br><br>
                                
                                <span class="text-info">export default</span> router;
                            </code>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Features Section -->
    <div class="container py-5">
        <div class="row mb-5">
            <div class="col-12 text-center">
                <h3 class="display-5 fw-bold mb-3">Framework Architecture</h3>
                <p class="text-muted lead">Designed for clean, maintainable, and scalable applications</p>
            </div>
        </div>
        
        <div class="row g-4">
            <div class="col-md-4">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body p-4">
                        <div class="bg-primary bg-gradient rounded-circle p-3 mb-3" style="width: 60px; height: 60px;">
                            <i class="bi bi-diagram-3 text-white fs-4"></i>
                        </div>
                        <h4 class="card-title fw-bold">Centralized Routing</h4>
                        <p class="card-text text-muted">All routes organized in one place with modular imports for better structure.</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body p-4">
                        <div class="bg-primary bg-gradient rounded-circle p-3 mb-3" style="width: 60px; height: 60px;">
                            <i class="bi bi-controller text-white fs-4"></i>
                        </div>
                        <h4 class="card-title fw-bold">MVC Pattern</h4>
                        <p class="card-text text-muted">Clean separation of concerns with controllers, models, and views.</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body p-4">
                        <div class="bg-primary bg-gradient rounded-circle p-3 mb-3" style="width: 60px; height: 60px;">
                            <i class="bi bi-plug text-white fs-4"></i>
                        </div>
                        <h4 class="card-title fw-bold">Modular Design</h4>
                        <p class="card-text text-muted">Easy to extend with pluggable modules and middleware support.</p>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row mt-4 g-4">
            <div class="col-md-6">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body p-4">
                        <div class="bg-primary bg-gradient rounded-circle p-3 mb-3" style="width: 60px; height: 60px;">
                            <i class="bi bi-shield-lock text-white fs-4"></i>
                        </div>
                        <h4 class="card-title fw-bold">Built-in Security</h4>
                        <p class="card-text text-muted">Authentication middleware and secure routing patterns included.</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body p-4">
                        <div class="bg-primary bg-gradient rounded-circle p-3 mb-3" style="width: 60px; height: 60px;">
                            <i class="bi bi-gear text-white fs-4"></i>
                        </div>
                        <h4 class="card-title fw-bold">Configuration Ready</h4>
                        <p class="card-text text-muted">Easy configuration management for different environments.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Quick Start Section -->
    <div class="bg-light py-5">
        <div class="container py-5">
            <div class="row align-items-center">
                <div class="col-lg-6 mb-5 mb-lg-0">
                    <h3 class="display-6 fw-bold mb-4">Quick Installation</h3>
                    <div class="bg-dark rounded-3 p-4">
                        <code class="text-light font-monospace">
                            <span class="text-success"># Install MEX CLI</span><br>
                            $ npm install -g mex-cli<br><br>
                            
                            <span class="text-success"># Create new project</span><br>
                            $ mex new myapp<br><br>
                            
                            <span class="text-success"># Navigate to project</span><br>
                            $ cd myapp<br><br>
                            
                            <span class="text-success"># Install dependencies</span><br>
                            $ npm install<br><br>
                            
                            <span class="text-success"># Start development server</span><br>
                            $ npm run dev
                        </code>
                    </div>
                </div>
                
                <div class="col-lg-6">
                    <div class="ps-lg-5">
                        <h3 class="fw-bold mb-4">Get Started in Minutes</h3>
                        <p class="text-muted mb-4">
                            MEX provides a solid foundation for your web applications with 
                            pre-configured routing, authentication, and project structure.
                        </p>
                        <div class="d-flex flex-wrap gap-3">
                            <a href="/register" class="btn btn-primary btn-lg px-5">
                                <i class="bi bi-rocket-takeoff me-2"></i>Start Building
                            </a>
                            <a href="https://github.com/Gicehajunior/mex-framework" target="_blank" class="btn btn-outline-dark btn-lg px-5">
                                <i class="bi bi-github me-2"></i>View on GitHub
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<%- include('web/layouts/footer') %>