Fanar: Admin portal home/landing page (section cards)

Objective: Admin Portal Home · Quarter: Q1 1448 · Size: S · Priority: High Roadmap: Fanar 1448 Q1 & Q2 Roadmap

Context

Navigating to the admin portal root currently shows a blank overview page with no content until a sidebar link is clicked. Content managers and system staff need an overview landing page presenting available operational sections as cards.

Why

Improves admin navigation and discovery by providing a visual entry point with title, icon, and short description for each content ops section.

Acceptance criteria

• Admin root route (/admin) displays a grid of section cards (Recitations, Assets, Audio, Analytics).
• Each card presents an icon, bold title, short description, and navigational hover effect.
• Clicking a section card navigates cleanly to the target route without page reload.
• Built with Angular 20 standalone components and NG-ZORRO card grids (nz-card, nz-row, nz-col).
• Fully responsive and supports RTL/LTR layouts.

🛠️ Implementation & Technical Guidance

Target File Paths

• cms-frontend/src/app/features/admin/pages/admin-home/admin-home.component.ts
• cms-frontend/src/app/features/admin/pages/admin-home/admin-home.component.html

Code Structure

import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';
import { NzCardModule } from 'ng-zorro-antd/card';
import { NzGridModule } from 'ng-zorro-antd/grid';
import { NzIconModule } from 'ng-zorro-antd/icon';

@Component({
  selector: 'app-admin-home',
  standalone: true,
  imports: [RouterLink, NzCardModule, NzGridModule, NzIconModule],
  templateUrl: './admin-home.component.html'
})
export class AdminHomeComponent {}

---

🤝 Before you pick this up

Fanar is an open-source, community-maintained project. For it to outlive any one of us, the people contributing need to genuinely understand how it works internally — that understanding is the thing we're actually building.

We all have AI subscriptions. Using AI to help you work is fine and expected. But if you copy this issue into an agent, paste back whatever it produces, and open a PR you haven't read, you're taking more from this project than you're giving it. Reviewing code that its own author never read or ran costs the maintainers more than writing it would have.

So before you open a PR, please make sure you:

• understand the code you're submitting, well enough to explain why it works
• ran it on your own machine and saw it behave correctly
• tested it — including the cases you expect to fail

If you're not planning to do that on this one, please leave it for someone who will. And if you're stuck partway, say so in the comments — a half-finished PR you understand is far more welcome than a complete one you don't.