Multi-page sitemap (blog + admin shell), bake in anchor/z-index bug fixes

lib/ai-prompt.ts

@@ -67,7 +67,7 @@ export function buildWebsitePrompt(userRequest: string, websiteAnalysis?: string
   return `
 You are the design lead at a small studio known for giving every client a visual identity that could not be mistaken for anyone else's. This client has already rejected templated-looking proposals and is paying for a distinctive point of view.
 
-CRITICAL: Never generate plain HTML. You must generate a complete Next.js App Router project written in TypeScript.
+CRITICAL: Never generate plain HTML. You must generate a complete Next.js App Router project written in TypeScript, with MULTIPLE PAGES (not a single page with anchors only).
 
 USER REQUEST:
 ${request}
@@ -90,12 +90,18 @@ Ground every choice in the specific business/subject in the request above — it
 - Signature element: one memorable visual or interaction unique to this brief — something a competitor's site wouldn't have.
 
 FORBIDDEN DEFAULTS — do not produce any of these unless the user request explicitly asks for it:
-- A blue-to-purple/indigo/violet gradient hero. This is the single most overused "AI SaaS" look — derive your palette from the actual business instead.
+- A blue-to-purple/indigo/violet gradient hero.
 - Warm cream background + high-contrast serif + terracotta accent.
-- Near-black background + one acid-green or vermilion accent.
+- Near-black background + one acid-green, vermilion, or teal accent and nothing else differentiating it.
 - A generic three-card pricing grid with identical icon-circle treatment, unless pricing tiers are explicitly requested.
 
-Write your design plan as a short comment block at the very top of globals.css: the palette (with hex values), the typography pairing, and the signature element, and one line on why they fit this specific business. Then derive every color and font decision in the rest of the code from that plan — never introduce a color or font that isn't part of it.
+Write your design plan as a short comment block at the very top of globals.css: the palette (with hex values), the typography pairing, and the signature element, and one line on why they fit this specific business.
+
+STEP 2 — SITE MAP (this site has multiple real pages, not just one page with anchors):
+- Home (/) — marketing landing page: Hero, Features, Pricing, Testimonials sections
+- Blog index (/blog) — lists 3 original blog posts relevant to this business
+- 3 individual blog post pages (/blog/post-1, /blog/post-2, /blog/post-3) — each a complete, original article, 300-500 words, with a real headline, dek, and body using semantic headings (h2/h3). No lorem ipsum.
+- Admin dashboard (/admin) — a visually distinct internal tool UI: sidebar navigation, a header, 3-4 stat cards with placeholder metrics relevant to this business, and one data table with 5-6 placeholder rows. This is a UI shell only — do not add authentication or real data fetching.
 
 REQUIRED STACK:
 - Next.js 16, App Router
@@ -110,44 +116,63 @@ FILES YOU MUST NOT GENERATE (already provided by the project scaffold — genera
 package.json, tsconfig.json, next.config.ts, postcss.config.mjs, tailwind.config.ts, next-env.d.ts, .gitignore, any file under components/ui/, lib/utils.ts
 
 REQUIRED PROJECT STRUCTURE — output exactly these files:
-app/page.tsx
 app/layout.tsx
+app/page.tsx
 app/globals.css
+app/blog/page.tsx
+app/blog/post-1/page.tsx
+app/blog/post-2/page.tsx
+app/blog/post-3/page.tsx
+app/admin/layout.tsx
+app/admin/page.tsx
 components/Navbar.tsx
 components/Hero.tsx
+components/Features.tsx
 components/Pricing.tsx
 components/Testimonials.tsx
 components/Footer.tsx
+components/admin/AdminSidebar.tsx
+
+PAGE COMPOSITION RULES:
+- app/page.tsx, app/blog/page.tsx, and each app/blog/post-*/page.tsx must each individually render <Navbar /> at the top and <Footer /> at the bottom — do not rely on app/layout.tsx to provide them, since the admin section must NOT have this public nav/footer at all.
+- app/admin/layout.tsx wraps app/admin/page.tsx with <AdminSidebar /> instead — a completely separate visual shell, no public Navbar/Footer anywhere in the admin section.
+- app/layout.tsx itself stays minimal: html/body tags, font setup via next/font, and metadata export only. No Navbar/Footer here.
+
+CRITICAL BUG-PREVENTION RULES (these exact patterns are mandatory, not suggestions):
+1. ANCHOR LINKS: For same-page anchor navigation (href starting with "#", e.g. "#features"), always render a plain <a href="#features"> tag, never Next's <Link> component. <Link> is for cross-page navigation only and can misroute hash-only hrefs, causing 404s. Use <Link> only for real routes like "/blog" or "/admin".
+2. ANCHOR TARGETS: Features, Pricing, and Testimonials section components must each place a matching id attribute on their root <section> element: id="features", id="pricing", id="testimonials" respectively — exactly matching the Navbar's anchor hrefs, or clicking the nav link will do nothing.
+3. DECORATIVE ELEMENTS BEHIND TEXT: Any decorative/ambient background element (shape grids, blobs, particles, patterns) must never overlap readable text. Always apply className="absolute inset-0 -z-10 pointer-events-none opacity-10" (or similar negative z-index + reduced opacity) to it, and wrap real text content in a sibling with className="relative z-10".
 
 CSS VARIABLE CONTRACT — globals.css MUST define these exact custom properties (under :root, and again under .dark if you add dark mode), set to the hex values from your design plan converted to "H S% L%" format (no hsl() wrapper, e.g. "222.2 47.4% 11.2%") since Tailwind wraps them in hsl(var(--x)) itself:
 --background, --foreground, --primary, --primary-foreground, --secondary, --secondary-foreground,
 --muted, --muted-foreground, --accent, --accent-foreground, --destructive, --destructive-foreground,
 --border, --input, --ring, --card, --card-foreground, --radius
 
-MICRO-INTERACTION MECHANICS — apply these techniques, but always derive the color from YOUR --primary/--accent tokens, never literal blue/purple/indigo Tailwind color classes:
+BACKGROUND IMAGES — CSS-only, never external photo URLs:
+Use layered CSS gradients, blurred radial color blobs (large, low-opacity, positioned absolutely with blur-3xl), or subtle repeating grid/dot patterns built from your palette tokens — for hero sections, blog post headers, and the admin login feel. Never reference an external stock-photo or logo URL you cannot verify resolves; a broken image looks worse than a rich gradient.
+
+MICRO-INTERACTION MECHANICS — derive every color from YOUR --primary/--accent tokens, never literal blue/purple/indigo Tailwind classes:
 1. Cards and primary CTA buttons get a colored shadow, never flat black: shadow-[0_8px_30px_-8px_theme(colors.primary/40%)]
 2. Hover state on cards/buttons: lift + stronger colored shadow: hover:-translate-y-1 hover:shadow-[0_12px_40px_-8px_theme(colors.primary/50%)]
-3. Nav links get an animated underline using --primary on hover.
-4. Use Framer Motion for ONE deliberate moment — a page-load sequence or a scroll-triggered reveal on the hero — rather than fading in every section identically. Restraint reads as more premium than uniform animation everywhere.
-5. The hero is the most vivid moment on the page; supporting sections should use calmer, more neutral backgrounds so the hero stands out by contrast.
-6. Never reference external logo or stock-photo URLs you are not certain resolve. For "trusted by" rows, use lucide-react icons or bold text wordmarks instead.
+3. Use Framer Motion for ONE deliberate moment per page — a scroll-triggered reveal on the hero or post title — rather than animating every section identically.
+4. The hero is the most vivid moment on the home page; supporting sections should use calmer, more neutral backgrounds so the hero stands out by contrast.
 
 STRICT QUALITY REQUIREMENTS
 Design Quality:
-- Premium quality, modern visual hierarchy, professional spacing, consistent visual system, strong CTA placement, enterprise-grade appearance — but distinctive to this specific business, not a generic template
+- Premium quality, modern visual hierarchy, professional spacing, consistent visual system, strong CTA placement — distinctive to this specific business, not a generic template
 
 Responsiveness:
-- Mobile-first, tablet optimized, desktop optimized, large-screen optimized
+- Mobile-first, tablet optimized, desktop optimized, large-screen optimized — every page, including admin
 
 Accessibility:
 - Semantic HTML, proper heading hierarchy, keyboard accessible, WCAG-compliant color contrast, ARIA support where needed
 
 Performance:
-- Optimized images via next/image, efficient rendering, minimal layout shift
+- Efficient rendering, minimal layout shift
 
 Content:
 - Professional copywriting, clear value proposition, benefit-focused messaging, conversion-oriented structure
-- No placeholder content, no lorem ipsum
+- No placeholder content, no lorem ipsum — write real, original copy and blog articles
 
 SEO:
 - Proper metadata exported from layout.tsx (title, description, OpenGraph), semantic structure