# Ported Components from Codevensiva

Components ported from the [Codevensiva](https://codevensiva.com) platform, adapted for the Evensiva Technologies website.

## Source Repository

- **From:** `D:\Evensiva Technologies\Test Platform\codevensiva`
- **Framework:** Next.js 16 + MUI v7 + Emotion (source) → Next.js 16 + MUI v6 + Emotion + `@mui/material-nextjs` v7 (target)

## What Was Ported

### 1. Documentation Hub Page

- **Source:** `codevensiva/src/app/documentation/page.tsx`
- **Target:** `src/app/documentation/page.tsx`
- **Adaptation:** Replaced Codevensiva-specific links (skills, dashboard, API reference, security) with Evensiva links (courses, training, internship, web development, digital marketing, blog, help center, about). Added a **Project & deployment** card linking to **`/docs`** (technical docs index) and the environment/deployment HTML guide.
- **Related:** Repo-root `docs/` is served in-app at `/docs` and `/docs/...` (not part of the Codevensiva port).
- **Pattern kept:** Card + List layout with icons, `Container maxWidth="md"`, metadata export.

### 2. Help Center Page

- **Source:** `codevensiva/src/app/help/page.tsx`
- **Target:** `src/app/help/page.tsx`
- **Adaptation:** Replaced Codevensiva FAQs (getting started, progress, bugs, support) with Evensiva FAQs (enrollment, prerequisites, certificates, schedules, internships, digital marketing, web development quotes, refunds). Added phone contact link. Changed support email to `contact@evensiva.com`.
- **Pattern kept:** FAQ accordion with `disableGutters` + `elevation={0}`, quick links list.

### 3. RichContent Component

- **Source:** `codevensiva/src/components/RichContent.tsx`
- **Target:** `src/components/common/RichContent/RichContent.tsx`
- **Adaptation:** Removed `mermaid` diagram rendering (not needed). Removed `copyRestriction` mode (interview-specific). Removed `proseVariant` prop (simplified to single variant). Removed `skillSlug`/`skillTitle` props.
- **Pattern kept:** Full DOMPurify sanitization pipeline, PrismJS highlighting (all 12 grammars), copy button injection with SVG icons, iframe allowlist (YouTube/Vimeo), responsive embed wrapping, `React.memo` for performance.
- **Dependencies added:** `isomorphic-dompurify`, `html-react-parser`, `prismjs`, `@types/prismjs`, `@types/dompurify`.
- **CSS added:** `.rich-code-copy-btn` and `.rich-embed` styles in `globals.css`.

### 4. RoutableTabs Component

- **Source:** `codevensiva/src/components/RoutableTabs.tsx`
- **Target:** `src/components/common/RoutableTabs/RoutableTabs.tsx`
- **Adaptation:** Added optional chaining on `searchParams?.get()` and `searchParams?.toString()` for App Router compatibility (nullable `useSearchParams`). Otherwise identical.
- **Pattern kept:** Full URL sync, `replaceState` navigation, `syncUrlOnInvalid`, `keepMounted`, `useRoutableTabValue` hook, scrollable tabs with mobile support.
- **Usage:** `/services` page (`ServicesOverviewTabs.tsx`) with 4 service tabs.

### 5. Article TOC Sidebar

- **Source:** `codevensiva/src/components/interview-prep/InterviewArticleToc.tsx` + `useInterviewArticleTocItems.ts`
- **Target:** `src/components/common/ArticleToc/ArticleTocSidebar.tsx` + `useArticleTocItems.ts`
- **Adaptation:** Renamed from "Interview" to generic "Article" naming. Changed `borderRight` to `borderLeft` (sidebar on right side of content). Used theme palette colors instead of hardcoded dark-mode hex values (supports both light/dark modes). Renamed types (`InterviewTocItem` → `TocItem`).
- **Pattern kept:** "On this page" label, scrollable list with custom scrollbar, active item highlighting with `aria-current`, 44px touch targets, ellipsis truncation, ButtonBase for accessibility.
- **Integration:** `PostContent.tsx` wraps `RichContent` with the TOC sidebar, adds scroll-spy via `useEffect`, and navigates with smooth scrolling on heading click.

### 6. Services Overview with Tabs

- **New:** `src/app/services/page.tsx` + `ServicesOverviewTabs.tsx`
- **Pattern from codevensiva:** Uses the ported `RoutableTabs` component to create a shareable tabbed view of all services at `/services?service=webdev|training|digital|internship`.

### 7. Blog Post Content Wrapper

- **New:** `src/app/posts/[slug]/PostContent.tsx`
- **Pattern from codevensiva:** Combines `RichContent` + `ArticleTocSidebar` with scroll-spy, similar to how `InterviewDetailClient` combines `InterviewArticleBody` + `InterviewArticleToc` in the source project.

### 8. Admin Auth UX + Social Auth Pattern

- **Source references:** `codevensiva` auth UI and provider flow patterns
- **Target:** `src/app/admin/login/LoginForm.tsx`, `src/app/admin/signup/SignupForm.tsx`, `src/lib/auth.ts`, `src/app/api/auth/register/route.ts`
- **Adaptation:** Kept Evensiva visual language (MUI spacing, card style, color system, typography rhythm) while porting stronger validation and form UX. Added first/last name signup, password strength feedback, and social buttons that appear only when feature flags are enabled.
- **Provider logic:** Added conditional Google/GitHub providers and first-login user provisioning in NextAuth callbacks, keeping middleware Edge-safe via `auth.config.ts`.
- **Platform fit:** Added `/admin/signup` route and registration endpoint to match existing admin architecture instead of copying source paths 1:1.

## Files Changed in Existing Codebase

| File | Change |
|------|--------|
| `src/app/posts/[slug]/page.tsx` | Imports `PostContent`, replaces plain text rendering with `RichContent`-aware wrapper |
| `src/components/layouts/Footer/Footer.tsx` | Resources column includes `/documentation` and `/help` |
| `src/components/layouts/Banner/Banner.tsx`, `Footer/Footer.tsx` | `SiteLogo` (`/Logo.png`) + two-line wordmark (**Evensiva** / **TECHNOLOGIES**); logo `alt="Evensiva Technologies"`. Banner: scroll-based app bar elevation, wider nav spacing, refined drawer. Footer: icon wells for contact rows, link hover motion, social buttons with hover lift. |
| `src/app/admin/login/LoginForm.tsx`, `src/app/admin/signup/SignupForm.tsx`, `src/lib/auth.ts`, `src/app/api/auth/register/route.ts` | Ported and adapted auth UX/patterns: improved login/signup forms, optional Google/GitHub auth, callback-aware redirects, registration API, and automatic OAuth user provisioning. |
| `src/components/admin/AdminSidebar.tsx` | Logo + admin nav |
| `src/app/globals.css` | Added `.rich-code-copy-btn` and `.rich-embed` CSS |
| `package.json` | Added `isomorphic-dompurify`, `html-react-parser`, `prismjs` + type packages |

## Not Ported (Not Applicable)

- **DocViewerClient** — requires admin docs API, markdown bundling, and auth-gated doc visibility. Evensiva uses simpler markdown rendering.
- **Header/Footer** — Evensiva already has its own Banner and Footer components.
- **Theme system** — Evensiva uses its own MUI theme in `ThemeRegistry`. The light/dark auto-switching from codevensiva was not ported.
- **Mermaid diagrams** — not needed for a marketing/blog site.
- **Copy restriction** — interview-specific feature, not applicable.
- **Monaco editor / Sandpack** — learning platform features, not applicable.