Overview
The Landing Page Content Generator is a full-stack solution that transforms design sources (Figma URLs or PDFs) and business details into structured, editable landing page content. It solves the problem of turning raw designs and basic business context into production-ready copy and sections using AI, while providing tooling to upload, extract, plan, generate, preview, and manage landing pages.This Landing Page Generator is part of Weam. Configuration, usage, and access happen within Weam.
What It Does (Capabilities)
- Design ingestion – Upload PDFs or reference Figma URLs; basic validation and metadata capture.
- Content extraction – OCR/parse PDFs; extract design elements and structure from URLs/Figma (public demo endpoints available).
- Business context capture – Collect business name, overview, audience, brand tone, and optional website URL.
- AI content generation – Use Gemini to plan and generate section-based landing page content; per-section regeneration supported.
- Section management - Normalize sections with titles, ordering, components, and bounding boxes; publish flow.
- Editing & preview – Review, inline edit, and preview generated content in the Next.js app.
- History & management – List, filter, update, and delete landing pages; track status (draft/published/archived).
- Security and validation – Request validation, input sanitization, basic rate limiting, and structured error handling.
User Flows (Non-Ops Usage)
- Configure business context → Enter business details (name, overview, audience, tone, optional website URL).
- Ingest design → Upload a PDF or provide a Figma/website URL for extraction.
- Extract & analyze → Parse files or URLs and extract layout/content hints.
- Plan & generate → Use AI endpoints to plan content structure and generate copy by sections.
- Review & edit → Adjust sections, regenerate selectively, and refine text in the editor.
- Save & publish → Save updates, manage status, and publish when complete.
Architecture
| Layer | Technologies | Purpose |
|---|---|---|
| UI | Next.js 14 (App Router), React, TypeScript, Tailwind, Radix UI | End-to-end UX: upload, forms, editor, previews |
| API / Services | Node.js (Express) | REST endpoints: auth, CRUD, uploads, AI generation |
| Data Store | MongoDB (Mongoose) | Stores users, landing pages, and metadata |
| AI / External | Gemini (Google Generative AI) | Content planning and generation |
| Auth / Session | JWT, iron-session | Authentication and session persistence |
| Security | Helmet, CORS, express-validator, express-rate-limit | Validation, input sanitization, rate limiting |
Technical Design
- Modules
- Ingestion – Validates uploads (type/size) via Multer; captures metadata.
- Extraction – OCR or parse PDFs; normalize data into sections.
- Planning & Generation – Combines business context and extracted data; uses Gemini for structured copy.
- Lifecycle – CRUD for landing pages; handles section normalization and ordering.
- Logging & Errors – Centralized logger (Winston) and error middleware.
- Pipelines
Extraction → Validation → Content Planning → Section Generation → Edit/Preview → Publish. - Retrieval Logic
Section normalization ensures consistent schema (title, content, components, order, bounding boxes). - Security & Validation
- Helmet, CORS, express-validator, bcrypt for hashing.
- express-rate-limit for request throttling.
API Reference (High-Level)
Auth
POST /api/auth/registerPOST /api/auth/loginGET /api/auth/mePUT /api/auth/profilePUT /api/auth/change-password
Landing Pages
GET /api/landing-pagesGET /api/landing-pages/:idPOST /api/landing-pagesPUT /api/landing-pages/:idPUT /api/landing-pages/:id/sectionsDELETE /api/landing-pages/:idPUT /api/landing-pages/:id/publish
Upload & Processing
POST /api/upload/publicDELETE /api/upload/cleanupPOST /api/upload/pdfPOST /api/upload/figmaGET /api/upload/status/:fileIdDELETE /api/upload/:fileId
AI & Content
- Extraction:
POST /api/ai/extract-pdf,extract-design-from-url,extract-figma - Planning:
POST /api/ai/validate,plan-content,analyze-design - Generation:
POST /api/ai/generate-content,regenerate-section - Full-page:
POST /api/ai/generate-landing-page,preview-landing-page,download-landing-page
Public demo endpoints exist; production should enforce JWT authentication.
Data & Schemas (Conceptual)
User
| Field | Type | Description |
|---|---|---|
| name | String | User’s full name |
| String | Unique; used for login | |
| password | String | Hashed |
| role | Enum | user or admin |
| profile | Object | avatar, preferences, lastLogin |
| tokens | Methods | JWT generation and bcrypt validation |
LandingPage
| Field | Type | Description |
|---|---|---|
| businessName | String | Company name |
| businessOverview | String | Business overview |
| targetAudience | String | Audience or market |
| brandTone | Enum | professional, friendly, playful, authoritative, casual |
| websiteUrl | String | Optional URL |
| designSource | Object | Figma/PDF metadata |
| sections | Array | Section objects (id, title, content, components, order, etc.) |
| status | Enum | draft, published, archived |
| aiMetadata | Object | model, generatedAt, steps |
Troubleshooting
- File Upload Issues
- Extraction & Parsing Errors
- AI Output & Generation
- Content Validation & Publishing
- Session & Editor Issues
- Performance & Cost Optimization
File rejected or upload fails
File rejected or upload fails
Symptoms
- 400 errors on upload
- “Invalid file type” message
- Large PDFs fail quickly
- MIME type not allowed (PDF/JPEG/PNG/GIF)
- File exceeds max size
- Incorrect form field name
- Use
pdffield for PDF uploads - Reduce file size under configured limit
- Verify
Content-Typeand multipart form settings
Upload succeeded but file not found
Upload succeeded but file not found
Symptoms
GET /api/upload/status/:fileIdreturns 404- File deleted prematurely
- Use correct
fileId - Confirm uploads dir matches backend config
- Avoid early cleanup
Figma URL rejected
Figma URL rejected
Symptoms
- 400 error on
POST /api/upload/figma - “Invalid Figma URL format”
- Use full file URL (
https://www.figma.com/file/...) - Avoid share/prototype links
Tech Stack Summary
| Layer | Technologies | Purpose |
|---|---|---|
| Frontend | Next.js 14, React 18, Tailwind, Radix, Lucide | UI, editor, preview |
| Backend | Node.js, Express, Helmet, CORS, Winston | REST APIs, validation, logging |
| Database | MongoDB, Mongoose | Data persistence |
| Auth | JWT, bcryptjs, iron-session | Authentication |
| Files | Multer | PDF uploads and metadata |
| OCR | pdf-parse, pdfjs-dist | PDF extraction |
| AI | @google/generative-ai | Gemini-based content generation |
| Utils | dotenv, uuid, sharp, axios | Config and assets |
Best Practices
- Normalize sections before publish.
- Provide rich business and design context.
- Validate inputs per schema.
- Keep public and private routes separate.
- Paginate and filter results efficiently.
- Log actions meaningfully (avoid sensitive data).
- Restrict uploads to safe types and sizes.
- Limit regeneration and cache stable planning steps.