name: html-to-next-page description: Converts static HTML mockups (especially multi-section pages under docs/inputhtmls) into Next.js App Router pages or React section components for this portfolio. Maps Tailwind-style tokens from the mock (primary, background-light/dark, surface, glass-card, animations) to project CSS variables and existing utilities in src/app/globals.css. Use when the user references docs/inputhtmls/*.html, asks to port a section or full page from HTML, or to sync a Storybook-style HTML export with the live site.

HTML mockup → Next.js page/section (portfolio-eros)

Clarify scope

1. Full page: New or updated src/app/<route>/page.tsx composing sections; avoid duplicating Header / Footer (already in src/app/layout.tsx).
2. Single section: New or updated component under src/components/features/ (mirror home-page/ grouping) and import it from the target page.
3. If the user names a section (e.g. hero, testimonials), extract only that subtree from the HTML (<section>, <header> region, or element with a clear id/class).

Read the HTML file completely enough to preserve structure, copy, and responsive classes before coding.

Strip what never ships

• Remove <script src="https://cdn.tailwindcss.com"> and inline tailwind.config from the mock; the app uses Tailwind v4 via globals.css (@import "tailwindcss", @theme inline).
• Remove Google Fonts / Material Symbols links unless the user explicitly wants those assets; default typography is Geist from src/app/layout.tsx (font-sans). Only add next/font for a mock font if requested.
• Replace <a href> to internal routes with import Link from "next/link".
• Use next/image for static images when paths exist in public/; otherwise keep a placeholder or the user-supplied src with explicit dimensions where possible.

Map mock tokens → project tokens

The mock often extends Tailwind with hex colors that match --pallete-* in globals.css. Do not hard-code mock hex values unless filling a one-off decorative gradient; prefer theme tokens so data-theme and .dark keep working.

If the mock uses arbitrary hex that matches --pallete-primary-main / background palette, still prefer token classes so theme switching stays consistent.

React / Next patterns

• Default to Server Components; add "use client" only when using hooks, client-only browser APIs, or interactive widgets that require it.
• Reuse @/components/ui (Button, etc.) for CTAs instead of raw <button> when the design aligns with existing variants.
• Icons: prefer lucide-react (see existing sections) over Material Symbols from the mock; map symbol meaning to closest Lucide icon.
• Preserve semantic HTML (section, heading hierarchy, aria on icons/buttons where appropriate).
• Match local conventions: import alias @/, named exports vs default as used in neighboring feature files.

File placement

• Page: src/app/<segment>/page.tsx.
• Section module: src/components/features/<area>/<Name>Section.tsx (or existing folder the user points to).
• If the mock duplicates site chrome (top nav in HTML), omit it or merge behavior into existing Header only when the user asks; otherwise strip nav from the conversion.

Verification checklist

• No CDN Tailwind or duplicate global animations that already exist in globals.css.
• Colors go through bg-background, text-foreground, primary*, surface, stroke, muted-foreground where applicable.
• Layout does not nest a second full header/footer unless explicitly requested.
• pnpm lint / typecheck passes for touched files.

Optional reference

For a concrete mock shape, see docs/inputhtmls/home.html (multi-section, dark class, extended colors). Use it as a structural reference only; output must follow this repo’s components and tokens.