` (MUI `Box` with `flex: 1`) grows so the footer sits at the bottom on short pages. ### Home Page - **Route split:** `src/app/page.tsx` exports SEO `metadata` and renders `HomePageContent` (a Client Component) so MUI buttons can use `component={next/link}` without violating React Server Component serialization rules in Next.js 16. - **Image slider:** Auto-rotating hero carousel with **three** slides (gradient backgrounds, headline, subtext, CTA). Timer via `useState`/`useEffect`; dot indicators and slide counter; generous min-heights on small and large breakpoints. - **Stats bar:** Icon-in-tinted-box treatment for metrics; section spacing aligned with the rest of the home page. - **Services cards:** Responsive grid of **six** service cards (e.g. Graphic Design, Social Media, Web Development, Video, Content, SEO) with tags, descriptions, and “Learn more” links — **ServicesCards** component. - **Process & CTA sections:** Increased vertical rhythm, heading letter-spacing, and hover motion on primary/secondary buttons. - **Social media links:** (On **About**) cards linking to Facebook, X, YouTube via **SocialMediaCard** (padding and hover shadow tuned for consistency). ### Blog (`/posts`) - **Post listing:** Server Component fetches published posts from Prisma. Falls back to hardcoded data if the database is unavailable. - **Category filtering:** Client-side category filter (All, Javascript, CSS, HTML) via `PostsClient` component — spaced header, tabs, and post cards with refined hover and padding. - **Post detail (`/posts/[slug]`):** Dynamic route with `generateMetadata` for per-post SEO. Uses `PostContent` client wrapper that detects HTML content (via regex) and renders with `RichContent` or plain text paragraphs. Article header uses comfortable vertical spacing; author avatar shows the author’s initial on a branded background. - **Article TOC:** On desktop (lg+), blog posts with HTML content containing `h2[id]` headings show a sticky sidebar table of contents (`ArticleTocSidebar`) with scroll-spy highlighting. ### Courses (`/courses`) - Server Component fetches courses from Prisma with static fallback. - Courses render in a **centered MUI Grid** (`xs=12` / `sm=6` / `lg=4`) so cards stay aligned at breakpoints; each **CourseCard** is full width of its cell with consistent padding and info rows. - Each card shows title, schedule, duration, fees, optional PDF link, and registration — free courses show a **FREE** chip in the header. ### Services - **Overview page (`/services`):** Uses `RoutableTabs` with URL-synced tabs (`?service=webdev|training|digital|internship`) so each service tab is shareable and bookmarkable. Four tabs render the existing feature components. The page shell uses **top padding only** (`pt`) so padding does not double with each tab’s feature section. - **Individual pages:** `/services/webdevelopment`, `/services/training`, `/services/digital` each render their feature component directly with dedicated metadata. - **Internship (`/internship`):** Dedicated internship page. ### Documentation Hub (`/documentation`) - Card/list layout linking to services, courses, blog, help center, and about page. Cards use rounded corners, consistent **CardContent** padding, and bold section titles with icons. - **Project & deployment (developers):** links to **`/docs`** (technical documentation index from `docs/documentation-index.json`) and the environment & deployment guide; Neon PostgreSQL and `.env.local` (NextAuth, admin seed) are documented there. - Organized into sections: Training & Courses, Services, Resources, plus the developer block above. ### Project documentation (`/docs`) - **`/docs`** — Server-rendered index of HTML/Markdown guides in the repo `docs/` folder (architecture, setup, deployment, Prisma, auth). - **`/docs/...`** — Route handler serves `.html`, `.md`, and `documentation-index.json` from the `docs/` tree for in-browser reading (same origin as the marketing site). ### Help Center (`/help`) - FAQ accordions with 8 questions covering enrollment, prerequisites, certificates, schedules, internships, digital marketing, web development quotes, and refunds. - Quick links to documentation, courses, email, and phone support. Page spacing and card styling match the documentation hub (generous `py`, outlined cards with padding). ### About Us (`/about`) - Server Component wrapper with `AboutContent` client component (uses MUI `styled`). - Team information, company mission, and contact details. ### Contact (`/contact`) - **ContactForm** only (no extra wrapper): split hero (gradient) and overlapping card with info column + form column; larger hero and form padding after UI polish. - Fields: first name, last name, email, message; submission to `/api/contact` with validation and success/error feedback. ## SEO Features ### Metadata API - **Root layout:** Global metadata (title template, description, keywords, Open Graph, Twitter cards, icons). - **Per-page metadata:** Each page exports a `metadata` object or `generateMetadata` function (for dynamic pages like blog posts). ### JSON-LD Structured Data - `OrganizationJsonLd` in root layout for company info. - `BlogPostingJsonLd` for blog posts (dynamic). - `CourseJsonLd` for course listings. - `BreadcrumbListJsonLd` for navigation breadcrumbs. - Helper components in `src/components/JsonLd.tsx`. ### Sitemap & Robots - **Dynamic sitemap** (`src/app/sitemap.ts`): Static routes + dynamically fetched published post slugs from the database. - **robots.txt** (`src/app/robots.ts`): Allows all user agents, disallows `/admin/` and `/api/` paths. ## Admin Panel ### Authentication (`/admin/login`, `/admin/signup`) - **Login page:** Polished form card with field-level validation, loading states, show/hide password toggle, callback URL support, and optional Google/GitHub buttons (feature-flag controlled). - **Signup page:** New admin signup flow with first/last name fields, password confirmation, password-strength meter, and optional social signup buttons. - **Registration API:** `POST /api/auth/register` performs server-side validation, duplicate-email checks, bcrypt hashing, and user creation before redirecting to sign-in/dashboard. - **Route guard behavior:** Middleware allows anonymous access to login/signup, protects remaining `/admin/*` routes, and redirects authenticated users away from auth pages to `/admin`. ### Dashboard (`/admin`) - Server Component fetching stats from Prisma: total posts, courses, and contact submissions. - Cards displaying counts with quick navigation links. ### Posts CRUD (`/admin/posts`) - **List:** Server Component fetches all posts → `AdminPostsList` client component with table display, published status badges, edit/delete actions. - **Create (`/admin/posts/new`):** `PostForm` client component with React Hook Form for title, slug (auto-generated), excerpt, content (textarea), category, author, cover image URL, published toggle, and publish date. - **Edit (`/admin/posts/[id]/edit`):** Same `PostForm` pre-filled with existing post data, fetched via `/api/posts/[id]`. ### Courses CRUD (`/admin/courses`) - **List:** Similar to posts — table with title, instructor, price, published status, edit/delete. - **Create/Edit:** `CourseForm` with fields for title, description, instructor, duration, price, original price, start date, schedule, image URL, registration link, and published toggle. ### Contacts (`/admin/contacts`) - **List:** Server Component fetches all contacts → `AdminContactsList` client component. - View full message details, mark as read/unread, reply via email link. ## Reusable Components (Ported from Codevensiva) ### RichContent (`src/components/common/RichContent/`) - Client component for rendering HTML content safely. - **Sanitization:** DOMPurify with allowlisted tags (iframe, audio, video) and forbidden attributes (event handlers). - **Syntax highlighting:** PrismJS with 12 language grammars (JS, TS, JSX, TSX, CSS, HTML, JSON, Bash, Python, Java, SQL). - **Copy buttons:** Injected into every `

` block with hover reveal, clipboard copy, and visual feedback.
- **Responsive embeds:** YouTube/Vimeo iframes wrapped in responsive containers.

### RoutableTabs (`src/components/common/RoutableTabs/`)
- URL-synced tabs using `useSearchParams`. Changing a tab updates the URL (`replaceState`) so the active tab is shareable and browser back/forward works.
- Props: `paramName`, `tabs` array, `defaultTab`, `syncUrlOnInvalid`, `keepMounted`, `scrollOnChange`.
- Includes `useRoutableTabValue` hook for programmatic tab control.
- Used on the `/services` page for service browsing.

### ArticleTocSidebar (`src/components/common/ArticleToc/`)
- Presentational "On this page" sidebar collecting `h2[id]` headings from content.
- `useArticleTocItems` hook polls the DOM after RichContent renders (async innerHTML) to collect headings.
- Scroll-spy in the parent (`PostContent`) highlights the active section.
- Shown only on desktop (lg+) and when content has 2+ headings.