# Landing Page (Public Page Renderer)

## Overview

**File Path:** `admin/src/pages/public/LandingPage.tsx` (68 lines)

**Route:** `/p/:slug`

**Role Requirements:** Public access

**Purpose:** Simple renderer for admin-authored landing pages created with GrapesJS editor. Fetches page by slug and displays HTML/CSS content with SEO meta tags.

**Key Features:**

- Minimal wrapper around admin-authored HTML
- SEO meta tags (title, description, og:image)
- dangerouslySetInnerHTML for HTML + CSS rendering
- Loading spinner during fetch
- 404 page for invalid slugs
- No layout wrapper (pages are self-contained)

---

## Features

### 1. SEO Meta Tags

```tsx
<Helmet>
  <title>{page.title}</title>
  <meta name="description" content={page.description || ''} />
  <meta property="og:title" content={page.title} />
  <meta property="og:description" content={page.description || ''} />
  {page.coverImage && <meta property="og:image" content={page.coverImage} />}
</Helmet>
```

### 2. HTML Rendering

```tsx
<div dangerouslySetInnerHTML={{ __html: page.html }} />
<style>{page.css}</style>
```

### 3. Loading State

```tsx
{loading && (
  <div style={{ textAlign: 'center', padding: 100 }}>
    <Spin size="large" />
  </div>
)}
```

### 4. 404 Handling

```tsx
{!loading && !page && (
  <Result
    status="404"
    title="Page Not Found"
    subTitle="The page you're looking for doesn't exist."
    extra={<Link to="/"><Button type="primary">Go Home</Button></Link>}
  />
)}
```

---

## API Integration

```http
GET /api/public/pages/:slug
```

Response:
```json
{
  "slug": "welcome",
  "title": "Welcome to Our Campaign",
  "description": "Join us in making a difference",
  "html": "<div><h1>Welcome</h1>...</div>",
  "css": "h1 { color: #1890ff; }",
  "coverImage": "https://example.com/cover.jpg",
  "isPublished": true
}
```

---

## Security Considerations

**XSS Risk Accepted:**
- Pages authored by trusted admins only
- dangerouslySetInnerHTML allows full HTML/JS
- No user-submitted content
- Alternative would break GrapesJS output

---

## Related Documentation

- [Landing Pages Admin](../admin/landing-pages-page.md)
- [Page Editor](../admin/page-editor-page.md)
- [GrapesJS Component](../../components/grapesjs-editor.md)