Project_Compass/app/Views/home/index.php

<section class="hero">
    <div class="hero-copy">
        <span class="eyebrow">Command center</span>
        <h1>See every project, task, and risk in one view.</h1>
        <p class="hero-text">Project Compass is a focused delivery system for keeping portfolios organized. Track budgets, deadlines, blocked work, and team momentum without losing the narrative of what is happening next.</p>

        <div class="hero-actions">
            <a class="button button-primary" href="/projects">Open projects</a>
            <a class="button button-secondary" href="/projects/create">Create a project</a>
            <a class="button button-ghost" href="/activity">View activity</a>
        </div>

        <div class="metrics-grid">
            <div class="metric-card"><span class="meta-label">Projects</span><strong><?= e((string) $summary['project_count']) ?></strong></div>
            <div class="metric-card"><span class="meta-label">Active</span><strong><?= e((string) $summary['active_projects']) ?></strong></div>
            <div class="metric-card"><span class="meta-label">Open tasks</span><strong><?= e((string) $summary['open_tasks']) ?></strong></div>
            <div class="metric-card"><span class="meta-label">Blocked</span><strong><?= e((string) $summary['blocked_tasks']) ?></strong></div>
        </div>
    </div>

    <aside class="hero-panel">
        <div>
            <p class="panel-label">Delivery snapshot</p>
            <h2><?= e((string) $summary['due_soon_tasks']) ?> tasks due soon</h2>
            <p><?= e((string) $summary['overdue_tasks']) ?> tasks are already overdue, so the board is watching deadline risk closely.</p>
        </div>

        <div class="summary-chips">
            <span class="tag is-amber">Due in 7 days: <?= e((string) $summary['due_soon_tasks']) ?></span>
            <span class="tag is-red">Overdue: <?= e((string) $summary['overdue_tasks']) ?></span>
            <span class="tag is-blue">In motion: <?= e((string) $summary['active_projects']) ?></span>
        </div>

        <div class="notice">
            <p class="kicker">How the app works</p>
            <p>Projects carry budgets, team members, status, and a live Kanban board. Every status change creates activity so the project story stays visible.</p>
        </div>
    </aside>
</section>

<section class="layout-two" style="margin-top: 1.2rem;">
    <div class="stack">
        <div class="block-title">
            <div>
                <span class="eyebrow">Featured projects</span>
                <h2>Most active workstreams</h2>
            </div>
            <a class="button button-secondary" href="/projects">Browse all</a>
        </div>

        <div class="card-grid">
            <?php foreach ($featuredProjects as $project): ?>
                <article class="project-card card" data-filter-item>
                    <div class="project-top">
                        <div>
                            <span class="kicker"><?= e($project['code']) ?></span>
                            <h3><a href="/projects/<?= e((string) $project['id']) ?>"><?= e($project['name']) ?></a></h3>
                        </div>
                        <span class="status-pill <?= e($project['health_class']) ?>"><?= e($project['status_label']) ?></span>
                    </div>
                    <p><?= e($project['description']) ?></p>
                    <div class="progress" aria-label="Project completion progress"><span style="width: <?= e((string) $project['progress_percent']) ?>%"></span></div>
                    <div class="project-bottom">
                        <span class="mini-pill is-neutral"><?= e((string) $project['task_count']) ?> tasks</span>
                        <span class="mini-pill is-blue"><?= e($project['task_traffic']) ?></span>
                        <span class="mini-pill is-amber">Budget <?= e($project['budget_label']) ?></span>
                    </div>
                </article>
            <?php endforeach; ?>
        </div>
    </div>

    <div class="side-stack">
        <section class="panel">
            <div class="block-title">
                <div>
                    <span class="eyebrow">Due soon</span>
                    <h2>Tasks needing attention</h2>
                </div>
            </div>
            <div class="list">
                <?php foreach ($dueSoon as $task): ?>
                    <div class="feed-item">
                        <header>
                            <strong><?= e($task['title']) ?></strong>
                            <span class="status-pill is-amber"><?= e(format_date($task['due_date'])) ?></span>
                        </header>
                        <p><?= e($task['project_name']) ?> · <?= e($task['assignee']) ?></p>
                    </div>
                <?php endforeach; ?>
            </div>
        </section>

        <section class="panel">
            <div class="block-title">
                <div>
                    <span class="eyebrow">Overdue</span>
                    <h2>Risk items</h2>
                </div>
            </div>
            <div class="list">
                <?php foreach ($overdue as $task): ?>
                    <div class="feed-item">
                        <header>
                            <strong><?= e($task['title']) ?></strong>
                            <span class="status-pill is-red"><?= e(format_date($task['due_date'])) ?></span>
                        </header>
                        <p><?= e($task['project_name']) ?> · <?= e($task['assignee']) ?></p>
                    </div>
                <?php endforeach; ?>
            </div>
        </section>

        <section class="panel">
            <div class="block-title">
                <div>
                    <span class="eyebrow">Activity feed</span>
                    <h2>Recent changes</h2>
                </div>
                <a class="button button-ghost" href="/activity">Open full feed</a>
            </div>
            <div class="list">
                <?php foreach ($activity as $item): ?>
                    <div class="feed-item">
                        <header>
                            <strong><?= e($item['headline']) ?></strong>
                            <span class="kicker"><?= e(format_date($item['created_at'], 'M j · H:i')) ?></span>
                        </header>
                        <p><?= e($item['detail'] !== '' ? $item['detail'] : ($item['project_name'] ?? '')) ?></p>
                    </div>
                <?php endforeach; ?>
            </div>
        </section>
    </div>
</section>