@djangocfg/layouts 2.0.3 → 2.0.5

package/README.md

@@ -254,41 +254,89 @@ import { ChatWidget, ChatUIProvider, useChatUI } from '@djangocfg/layouts/snippe
 
 ## Components
 
-Utility components for common use cases.
+Utility components organized by category.
+
+### Core Components
 
 ```tsx
 import { 
-  ErrorBoundary, 
-  PageProgress, 
   JsonLd, 
-  LucideIcon 
-} from '@djangocfg/layouts/components';
+  LucideIcon,
+  PageProgress,
+  Suspense
+} from '@djangocfg/layouts/components/core';
 ```
 
 | Component | Description |
 |-----------|-------------|
-| `ErrorBoundary` | React error boundary component |
-| `PageProgress` | Page loading progress indicator |
 | `JsonLd` | JSON-LD structured data component |
 | `LucideIcon` | Lucide icon wrapper component |
+| `PageProgress` | Page loading progress indicator |
+| `Suspense` | Suspense wrapper component |
 
-## Validation
-
-Error tracking and validation utilities.
+### Error Components
 
 ```tsx
 import { 
-  ErrorTrackingProvider, 
-  useErrors,
-  ErrorButtons,
-  ErrorToast
-} from '@djangocfg/layouts/validation';
+  ErrorBoundary,
+  ErrorLayout,
+  getErrorContent,
+  ERROR_CODES
+} from '@djangocfg/layouts/components/errors';
+```
+
+| Component | Description |
+|-----------|-------------|
+| `ErrorBoundary` | React error boundary component |
+| `ErrorLayout` | Reusable error page layout (404, 500, etc.) |
+| `getErrorContent` | Get error content by status code |
+| `ERROR_CODES` | Common HTTP error code constants |
+
+**ErrorLayout Usage:**
+
+```tsx
+// app/not-found.tsx
+import { ErrorLayout } from '@djangocfg/layouts/components/errors';
+
+export default function NotFound() {
+  return <ErrorLayout code={404} supportEmail="support@example.com" />;
+}
+
+// app/error.tsx
+'use client';
+import { ErrorLayout } from '@djangocfg/layouts/components/errors';
+
+export default function Error({ error, reset }) {
+  return <ErrorLayout code={500} supportEmail="support@example.com" />;
+}
+```
+
+### Redirect Component
+
+```tsx
+import { RedirectPage } from '@djangocfg/layouts/components/RedirectPage';
+
+// app/page.tsx
+export default function Page() {
+  return (
+    <RedirectPage
+      authenticatedPath="/dashboard"
+      unauthenticatedPath="/auth"
+      loadingText="Loading..."
+    />
+  );
+}
 ```
 
 ### Error Tracking
 
 ```tsx
-import { ErrorTrackingProvider, useErrors } from '@djangocfg/layouts/validation';
+import { 
+  ErrorTrackingProvider, 
+  useErrors,
+  ErrorButtons,
+  ErrorToast
+} from '@djangocfg/layouts/components/errors/ErrorsTracker';
 
 <ErrorTrackingProvider>
   <YourApp />
@@ -298,6 +346,76 @@ import { ErrorTrackingProvider, useErrors } from '@djangocfg/layouts/validation'
 const { addError, clearErrors, errors } = useErrors();
 ```
 
+### Update Notifier
+
+```tsx
+import { UpdateNotifier } from '@djangocfg/layouts/components/UpdateNotifier';
+
+<UpdateNotifier />
+```
+
+## Pages
+
+Ready-to-use page components.
+
+### Legal Pages
+
+Pre-built legal page components with default configurations.
+
+```tsx
+import { 
+  PrivacyPage, 
+  TermsPage, 
+  CookiesPage, 
+  SecurityPage 
+} from '@djangocfg/layouts/pages/legal';
+
+// app/legal/privacy/page.tsx
+export default PrivacyPage;
+
+// Or customize
+import { PrivacyPage, privacyConfig } from '@djangocfg/layouts/pages/legal';
+
+export default function CustomPrivacy() {
+  return <PrivacyPage config={{
+    ...privacyConfig,
+    lastUpdated: '2024-01-01',
+  }} />;
+}
+```
+
+| Page | Description |
+|------|-------------|
+| `PrivacyPage` | Privacy policy page |
+| `TermsPage` | Terms of service page |
+| `CookiesPage` | Cookie policy page |
+| `SecurityPage` | Security policy page |
+
+## Utils
+
+Utility functions and helpers.
+
+```tsx
+import { 
+  generateOgImageUrl,
+  getAbsoluteOgImageUrl,
+  createOgImageUrlBuilder
+} from '@djangocfg/layouts/utils/og-image';
+
+// Generate OG image URL
+const ogUrl = generateOgImageUrl('/api/og', {
+  title: 'My Page',
+  description: 'Page description',
+  siteName: 'My Site',
+});
+```
+
+| Utility | Description |
+|---------|-------------|
+| `generateOgImageUrl` | Generate OG image URL with base64 encoding |
+| `getAbsoluteOgImageUrl` | Get absolute OG image URL |
+| `createOgImageUrlBuilder` | Create OG image URL builder with defaults |
+
 ## Exports
 
 | Path | Content |
@@ -308,10 +426,10 @@ const { addError, clearErrors, errors } = useErrors();
 | `@djangocfg/layouts/auth/context` | Auth context only |
 | `@djangocfg/layouts/auth/hooks` | Auth hooks only |
 | `@djangocfg/layouts/snippets` | Reusable components + Analytics |
-| `@djangocfg/layouts/components` | Utility components |
-| `@djangocfg/layouts/validation` | Validation & error tracking |
-| `@djangocfg/layouts/utils` | Utilities |
-| `@djangocfg/layouts/types` | TypeScript types |
+| `@djangocfg/layouts/components` | All utility components |
+| `@djangocfg/layouts/pages` | Page components (legal pages) |
+| `@djangocfg/layouts/pages/legal` | Legal page components |
+| `@djangocfg/layouts/utils` | Utilities (og-image, logger) |
 | `@djangocfg/layouts/styles` | CSS |
 | `@djangocfg/layouts/styles/dashboard` | Dashboard-specific CSS |
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.0.3",
+  "version": "2.0.5",
   "description": "Simple, straightforward layout components for Next.js - import and use with props",
   "keywords": [
     "layouts",
@@ -64,6 +64,16 @@
       "import": "./src/utils/index.ts",
       "default": "./src/utils/index.ts"
     },
+    "./components": {
+      "types": "./src/components/index.ts",
+      "import": "./src/components/index.ts",
+      "default": "./src/components/index.ts"
+    },
+    "./pages": {
+      "types": "./src/pages/index.ts",
+      "import": "./src/pages/index.ts",
+      "default": "./src/pages/index.ts"
+    },
     "./styles": "./src/styles/index.css",
     "./styles/dashboard": "./src/styles/dashboard.css"
   },
@@ -77,9 +87,9 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^1.4.33",
-    "@djangocfg/centrifugo": "^1.4.33",
-    "@djangocfg/ui": "^1.4.33",
+    "@djangocfg/api": "^1.4.35",
+    "@djangocfg/centrifugo": "^1.4.35",
+    "@djangocfg/ui": "^1.4.35",
     "@hookform/resolvers": "^5.2.0",
     "consola": "^3.4.2",
     "lucide-react": "^0.468.0",
@@ -98,8 +108,7 @@
     "react-ga4": "^2.1.0"
   },
   "devDependencies": {
-    "@djangocfg/centrifugo": "^1.4.33",
-    "@djangocfg/typescript-config": "^1.4.33",
+    "@djangocfg/typescript-config": "^1.4.35",
     "@types/node": "^24.7.2",
     "@types/react": "19.2.2",
     "@types/react-dom": "19.2.1",

package/src/components/RedirectPage/RedirectPage.tsx

@@ -0,0 +1,70 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useAuth } from '../../auth';
+import { useRouter } from '@djangocfg/ui/hooks';
+import { Preloader } from '@djangocfg/ui/components';
+
+export interface RedirectPageProps {
+  /**
+   * Path to redirect to when user is authenticated
+   * @default '/private'
+   */
+  authenticatedPath?: string;
+  /**
+   * Path to redirect to when user is not authenticated
+   * @default '/auth'
+   */
+  unauthenticatedPath?: string;
+  /**
+   * Custom loading text
+   * @default 'Loading...'
+   */
+  loadingText?: string;
+}
+
+/**
+ * RedirectPage - Root page component that handles authentication redirect
+ *
+ * Redirects authenticated users to authenticatedPath, otherwise to unauthenticatedPath
+ *
+ * Usage:
+ * ```tsx
+ * // app/page.tsx
+ * import { RedirectPage } from '@djangocfg/layouts/components';
+ *
+ * export default function Page() {
+ *   return (
+ *     <RedirectPage
+ *       authenticatedPath="/private"
+ *       unauthenticatedPath="/auth"
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export function RedirectPage({
+  authenticatedPath = '/private',
+  unauthenticatedPath = '/auth',
+  loadingText = 'Loading...',
+}: RedirectPageProps) {
+  const { isAuthenticated } = useAuth();
+  const router = useRouter();
+
+  useEffect(() => {
+    if (!isAuthenticated) {
+      router.push(unauthenticatedPath);
+    } else {
+      router.push(authenticatedPath);
+    }
+  }, [isAuthenticated, router, authenticatedPath, unauthenticatedPath]);
+
+  return (
+    <Preloader
+      variant="fullscreen"
+      text={loadingText}
+      size="lg"
+    />
+  );
+}
+

package/src/components/RedirectPage/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Redirect component exports
+ */
+
+export { RedirectPage } from './RedirectPage';
+export type { RedirectPageProps } from './RedirectPage';
+

package/src/components/core/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Core components exports
+ */
+
+export { JsonLd } from './JsonLd';
+export { LucideIcon } from './LucideIcon';
+export type { LucideIconProps } from './LucideIcon';
+export { PageProgress } from './PageProgress';
+export { Suspense } from './Suspense';
+

package/src/components/errors/ErrorLayout.tsx

@@ -0,0 +1,228 @@
+/**
+ * ErrorLayout - Universal Error Display
+ *
+ * Minimalist error page with customizable content
+ * Works with Next.js error pages (404.tsx, 500.tsx, error.tsx)
+ *
+ * Usage:
+ * ```tsx
+ * // app/not-found.tsx
+ * import { ErrorLayout } from '@djangocfg/layouts/components';
+ *
+ * export default function NotFound() {
+ *   return <ErrorLayout code={404} supportEmail={settings.contact.email} />;
+ * }
+ * ```
+ */
+
+'use client';
+
+import React from 'react';
+import { Button } from '@djangocfg/ui/components';
+import { getErrorContent } from './errorConfig';
+
+export interface ErrorLayoutProps {
+  /** Error code (e.g., "404", "500", "403") - if provided, auto-configures title/description/icon */
+  code?: string | number;
+  /** Error title (auto-generated from code if not provided) */
+  title?: string;
+  /** Error description (auto-generated from code if not provided) */
+  description?: string;
+  /** Custom action buttons */
+  actions?: React.ReactNode;
+  /** Show default actions (back, home) */
+  showDefaultActions?: boolean;
+  /** Custom illustration/icon (auto-generated from code if not provided) */
+  illustration?: React.ReactNode;
+  /** Support email for contact link */
+  supportEmail?: string;
+}
+
+// Local function to select the icon based on the code. 
+// This is safe as it's defined and used inside a Client Component.
+function getErrorIcon(code?: string | number): React.ReactNode {
+  const c = code ? String(code) : '';
+  
+  // NOTE: You can replace these SVG paths with imported Lucid Icons 
+  // (e.g., <AlertTriangle />) if you prefer.
+  switch (c) {
+    case '404':
+      return (
+        <svg
+          className="w-24 h-24 mx-auto text-muted-foreground/50"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          aria-hidden="true"
+        >
+          {/* Missing Page Icon */}
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={1.5}
+            d="M9.343 3.07a7.227 7.227 0 0111.558 0c.806.515 1.393 1.39 1.393 2.37v6.636c0 .98-.587 1.855-1.393 2.37a7.227 7.227 0 01-11.558 0c-.806-.515-1.393-1.39-1.393-2.37V5.44c0-.98.587-1.855 1.393-2.37zM12 13a1 1 0 100-2 1 1 0 000 2z"
+          />
+        </svg>
+      );
+    case '500':
+      return (
+        <svg
+          className="w-24 h-24 mx-auto text-muted-foreground/50"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          aria-hidden="true"
+        >
+          {/* Server Error Icon */}
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={1.5}
+            d="M18.364 18.364A9 9 0 005.636 5.636m12.728 0l-6.849 6.849m0 0l-6.849-6.849m6.849 6.849V21m0 0h7.5M12 21v-7.5M7.5 21H3m7.5 0h7.5M3 18V9a4.5 4.5 0 014.5-4.5h9A4.5 4.5 0 0121 9v9a4.5 4.5 0 01-4.5 4.5h-9A4.5 4.5 0 013 18z"
+          />
+        </svg>
+      );
+    case '403':
+      return (
+        <svg
+          className="w-24 h-24 mx-auto text-muted-foreground/50"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          aria-hidden="true"
+        >
+          {/* Forbidden Icon */}
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={1.5}
+            d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
+          />
+        </svg>
+      );
+    default:
+      return null;
+  }
+}
+
+/**
+ * ErrorLayout Component
+ */
+export function ErrorLayout({
+  code,
+  title,
+  description,
+  actions,
+  showDefaultActions = true,
+  illustration,
+  supportEmail = 'support@example.com',
+}: ErrorLayoutProps) {
+  
+  // Get content (Title/Description) from config. Note: Illustration check removed.
+  // The function getErrorContent MUST NOT return React components/functions.
+  const autoContent = code && (!title || !description)
+    ? getErrorContent(code)
+    : null;
+
+  // Fallback to auto-generated values
+  const finalTitle = title || autoContent?.title || 'Error';
+  const finalDescription = description || autoContent?.description;
+  
+  // ILLUSTRATION FIX: Use passed prop OR compute the icon locally using getErrorIcon.
+  const finalIllustration = illustration ?? getErrorIcon(code);
+
+
+  const handleGoBack = () => {
+    if (document.referrer && document.referrer !== window.location.href) {
+      window.location.href = document.referrer;
+    } else if (window.history.length > 1) {
+      window.history.back();
+    } else {
+      window.location.href = '/';
+    }
+  };
+
+  const handleGoHome = () => {
+    window.location.href = '/';
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center px-4 bg-background">
+      <div className="max-w-2xl w-full text-center space-y-8">
+        {/* Error Code */}
+        {code && (
+          <div className="relative">
+            <h1
+              className="text-[12rem] font-bold leading-none text-muted/20 select-none"
+              aria-hidden="true"
+            >
+              {code}
+            </h1>
+          </div>
+        )}
+
+        {/* Illustration */}
+        {finalIllustration && (
+          <div className="flex justify-center py-8">
+            {finalIllustration}
+          </div>
+        )}
+
+        {/* Error Content */}
+        <div className="space-y-4">
+          <h2 className="text-4xl font-bold text-foreground">
+            {finalTitle}
+          </h2>
+
+          {finalDescription && (
+            <p className="text-lg text-muted-foreground max-w-md mx-auto">
+              {finalDescription}
+            </p>
+          )}
+        </div>
+
+        {/* Actions */}
+        <div className="flex flex-col sm:flex-row items-center justify-center gap-4 pt-4">
+          {/* Custom actions */}
+          {actions}
+
+          {/* Default actions */}
+          {showDefaultActions && !actions && (
+            <>
+              <Button
+                variant="outline"
+                size="lg"
+                onClick={handleGoBack}
+                style={{ minWidth: '140px', padding: '12px 32px' }}
+              >
+                Go Back
+              </Button>
+              <Button
+                variant="default"
+                size="lg"
+                onClick={handleGoHome}
+                style={{ minWidth: '140px', padding: '12px 32px' }}
+              >
+                Go Home
+              </Button>
+            </>
+          )}
+        </div>
+
+        {/* Additional Info */}
+        <div className="pt-8 text-sm text-muted-foreground">
+          <p>
+            Need help? Contact{' '}
+            <a
+              href={`mailto:${supportEmail}`}
+              className="text-primary hover:underline"
+            >
+              support
+            </a>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+

package/src/components/errors/errorConfig.ts

@@ -0,0 +1,118 @@
+/**
+ * Universal Error Configuration
+ *
+ * Provides standard error content for common HTTP status codes
+ * Use this to maintain consistency across error pages
+ *
+ * NOTE: Only returns primitives (title, description) - NO React components
+ * This ensures safe serialization during prerendering
+ */
+
+export interface ErrorContent {
+  title: string;
+  description: string;
+}
+
+/**
+ * Get standardized error content based on status code
+ *
+ * @param statusCode - HTTP status code or custom error type
+ * @returns Error content configuration (title and description only)
+ *
+ * @example
+ * ```tsx
+ * const { title, description } = getErrorContent(404);
+ * <ErrorLayout title={title} description={description} code={404} />
+ * ```
+ */
+export function getErrorContent(statusCode?: number | string): ErrorContent {
+  const code = typeof statusCode === 'string' ? parseInt(statusCode, 10) : statusCode;
+
+  switch (code) {
+    // 400 Bad Request
+    case 400:
+      return {
+        title: 'Bad Request',
+        description: 'The request could not be understood. Please check your input and try again.',
+      };
+
+    // 401 Unauthorized
+    case 401:
+      return {
+        title: 'Authentication Required',
+        description: 'You need to sign in to access this page.',
+      };
+
+    // 403 Forbidden
+    case 403:
+      return {
+        title: 'Access Denied',
+        description: "You don't have permission to access this resource.",
+      };
+
+    // 404 Not Found
+    case 404:
+      return {
+        title: 'Page Not Found',
+        description: "The page you're looking for doesn't exist or has been moved.",
+      };
+
+    // 408 Request Timeout
+    case 408:
+      return {
+        title: 'Request Timeout',
+        description: 'The request took too long to process. Please try again.',
+      };
+
+    // 500 Internal Server Error
+    case 500:
+      return {
+        title: 'Server Error',
+        description: "Something went wrong on our end. We're working to fix it.",
+      };
+
+    // 502 Bad Gateway
+    case 502:
+      return {
+        title: 'Bad Gateway',
+        description: 'The server received an invalid response. Please try again later.',
+      };
+
+    // 503 Service Unavailable
+    case 503:
+      return {
+        title: 'Service Unavailable',
+        description: 'The service is temporarily unavailable. Please try again later.',
+      };
+
+    // 504 Gateway Timeout
+    case 504:
+      return {
+        title: 'Gateway Timeout',
+        description: 'The server took too long to respond. Please try again.',
+      };
+
+    // Default / Unknown Error
+    default:
+      return {
+        title: 'Something Went Wrong',
+        description: 'An unexpected error occurred. Please try again or contact support.',
+      };
+  }
+}
+
+/**
+ * Common error codes as constants
+ */
+export const ERROR_CODES = {
+  BAD_REQUEST: 400,
+  UNAUTHORIZED: 401,
+  FORBIDDEN: 403,
+  NOT_FOUND: 404,
+  TIMEOUT: 408,
+  SERVER_ERROR: 500,
+  BAD_GATEWAY: 502,
+  SERVICE_UNAVAILABLE: 503,
+  GATEWAY_TIMEOUT: 504,
+} as const;
+

package/src/components/errors/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Error components exports
+ */
+
+export { ErrorBoundary } from './ErrorBoundary';
+export { ErrorLayout } from './ErrorLayout';
+export type { ErrorLayoutProps } from './ErrorLayout';
+export { getErrorContent, ERROR_CODES } from './errorConfig';
+export type { ErrorContent } from './errorConfig';
+

package/src/components/index.ts

@@ -2,9 +2,17 @@
  * Components exports
  */
 
-export { JsonLd } from './JsonLd';
-export { LucideIcon } from './LucideIcon';
-export type { LucideIconProps } from './LucideIcon';
-export { PageProgress } from './PageProgress';
+// Core components
+export * from './core';
 
-export { Suspense } from './Suspense';
+// Error components
+export * from './errors';
+
+// Redirect component
+export * from './RedirectPage';
+
+// ErrorsTracker
+export * from './errors/ErrorsTracker';
+
+// UpdateNotifier
+export * from './UpdateNotifier';

package/src/index.ts

@@ -37,3 +37,8 @@ export * from './snippets';
 // Components (includes ErrorTrackingProvider)
 export * from './components';
 
+// Utils
+export * from './utils';
+
+// Pages
+export * from './pages';

package/src/layouts/AppLayout/AppLayout.tsx

@@ -40,13 +40,13 @@ import React, { ReactNode, useMemo } from 'react';
 import { usePathname } from 'next/navigation';
 import { ThemeProvider, Toaster } from '@djangocfg/ui';
 import { CentrifugoProvider } from '@djangocfg/centrifugo';
-import { ErrorBoundary } from '../../components/ErrorBoundary';
+import { ErrorBoundary } from '../../components/errors/ErrorBoundary';
 import { AuthProvider, type AuthConfig } from '../../auth/context';
-import { ErrorTrackingProvider, type ValidationErrorConfig, type CORSErrorConfig, type NetworkErrorConfig } from '../../components/ErrorsTracker';
+import { ErrorTrackingProvider, type ValidationErrorConfig, type CORSErrorConfig, type NetworkErrorConfig } from '../../components/errors/ErrorsTracker';
 import { AnalyticsProvider } from '../../snippets/Analytics';
-import { PageProgress } from '../../components/PageProgress';
+import { PageProgress } from '../../components/core/PageProgress';
 import { UpdateNotifier } from '../../components/UpdateNotifier';
-import { Suspense } from '../../components';
+import { Suspense } from '../../components/core';
 
 export type LayoutMode = 'public' | 'private' | 'admin';
 

package/src/pages/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Pages exports
+ */
+
+export * from './legal';
+

package/src/pages/legal/LegalPage.tsx

@@ -0,0 +1,85 @@
+/**
+ * LegalPage Component
+ *
+ * Reusable component for legal pages (Privacy, Terms, Cookies, Security)
+ * Accepts configuration for flexible content rendering
+ *
+ * Usage:
+ * ```tsx
+ * import { LegalPage } from '@djangocfg/layouts/components/legal';
+ * import { privacyConfig } from './config';
+ *
+ * export default function PrivacyPage() {
+ *   return <LegalPage config={privacyConfig} />;
+ * }
+ * ```
+ */
+
+'use client';
+
+import React from 'react';
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardContent,
+} from '@djangocfg/ui/components';
+import type { LegalPageConfig } from './types';
+
+export interface LegalPageProps {
+  config: LegalPageConfig;
+  className?: string;
+}
+
+/**
+ * Format date for display
+ */
+function formatDate(date: string | Date | undefined): string {
+  if (!date) return '';
+  if (typeof date === 'string') return date;
+  return date.toISOString().split('T')[0];
+}
+
+/**
+ * LegalPage Component
+ */
+export function LegalPage({ config, className }: LegalPageProps) {
+  const { title, lastUpdated, sections } = config;
+
+  return (
+    <div className={`container mx-auto max-w-4xl py-16 px-4 ${className || ''}`}>
+      <div className="flex flex-col gap-8">
+        {/* Header */}
+        <div className="flex flex-col gap-4">
+          <h1 className="text-4xl font-bold">{title}</h1>
+          {lastUpdated && (
+            <p className="text-lg text-muted-foreground">
+              Last updated: {formatDate(lastUpdated)}
+            </p>
+          )}
+        </div>
+
+        {/* Sections */}
+        {sections.map((section, index) => (
+          <Card key={index}>
+            <CardHeader>
+              <CardTitle>{section.title}</CardTitle>
+            </CardHeader>
+            <CardContent className="text-muted-foreground">
+              {Array.isArray(section.content) ? (
+                <div className="flex flex-col gap-2">
+                  {section.content.map((paragraph, pIndex) => (
+                    <p key={pIndex}>{paragraph}</p>
+                  ))}
+                </div>
+              ) : (
+                <p>{section.content}</p>
+              )}
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+}
+

package/src/pages/legal/configs.ts

@@ -0,0 +1,131 @@
+/**
+ * Default legal page configurations
+ *
+ * Pre-configured content for common legal pages
+ * Can be customized or extended as needed
+ */
+
+import type { LegalPageConfig } from './types';
+
+export const privacyConfig: LegalPageConfig = {
+  title: 'Privacy Policy',
+  sections: [
+    {
+      title: 'Information We Collect',
+      content: 'We collect information that you provide directly to us, including when you create an account, use our services, or communicate with us.',
+    },
+    {
+      title: 'How We Use Your Information',
+      content: [
+        'We use the information we collect to:',
+        'Provide, maintain, and improve our services',
+        'Process transactions and send related information',
+        'Send technical notices and support messages',
+        'Respond to your comments and questions',
+      ],
+    },
+    {
+      title: 'Information Sharing',
+      content: 'We do not share your personal information with third parties except as described in this privacy policy or with your consent.',
+    },
+    {
+      title: 'Data Security',
+      content: 'We take reasonable measures to help protect your personal information from loss, theft, misuse, unauthorized access, disclosure, alteration, and destruction.',
+    },
+    {
+      title: 'Your Rights',
+      content: 'You have the right to access, update, or delete your personal information at any time. Contact us if you wish to exercise these rights.',
+    },
+    {
+      title: 'Changes to This Policy',
+      content: 'We may update this privacy policy from time to time. We will notify you of any changes by posting the new policy on this page.',
+    },
+  ],
+};
+
+export const termsConfig: LegalPageConfig = {
+  title: 'Terms of Service',
+  sections: [
+    {
+      title: '1. Acceptance of Terms',
+      content: 'By accessing and using this service, you accept and agree to be bound by the terms and provision of this agreement.',
+    },
+    {
+      title: '2. Use License',
+      content: 'Permission is granted to temporarily download one copy of the materials on our service for personal, non-commercial transitory viewing only.',
+    },
+    {
+      title: '3. Disclaimer',
+      content: 'The materials on our service are provided on an \'as is\' basis. We make no warranties, expressed or implied, and hereby disclaim and negate all other warranties including, without limitation, implied warranties or conditions of merchantability, fitness for a particular purpose, or non-infringement of intellectual property or other violation of rights.',
+    },
+    {
+      title: '4. Limitations',
+      content: 'In no event shall we or our suppliers be liable for any damages (including, without limitation, damages for loss of data or profit, or due to business interruption) arising out of the use or inability to use the materials on our service.',
+    },
+    {
+      title: '5. Revisions',
+      content: 'We may revise these terms of service at any time without notice. By using this service you are agreeing to be bound by the then current version of these terms of service.',
+    },
+  ],
+};
+
+export const cookiesConfig: LegalPageConfig = {
+  title: 'Cookie Policy',
+  sections: [
+    {
+      title: 'What Are Cookies?',
+      content: 'Cookies are small text files that are placed on your device when you visit our website. They help us provide you with a better experience by remembering your preferences and understanding how you use our site.',
+    },
+    {
+      title: 'Types of Cookies We Use',
+      content: [
+        'Essential Cookies: These cookies are necessary for the website to function properly.',
+        'Performance Cookies: These cookies help us understand how visitors interact with our website.',
+        'Functionality Cookies: These cookies allow us to remember choices you make and provide enhanced features.',
+      ],
+    },
+    {
+      title: 'Managing Cookies',
+      content: 'Most web browsers allow you to control cookies through their settings. You can set your browser to refuse cookies or delete certain cookies. However, please note that if you disable cookies, some features of our website may not function properly.',
+    },
+    {
+      title: 'Third-Party Cookies',
+      content: 'We may use third-party services that also use cookies. These third parties have their own privacy policies, and we do not accept any responsibility or liability for their policies.',
+    },
+    {
+      title: 'Updates to This Policy',
+      content: 'We may update our Cookie Policy from time to time. Any changes will be posted on this page with an updated revision date.',
+    },
+  ],
+};
+
+export const securityConfig: LegalPageConfig = {
+  title: 'Security Policy',
+  sections: [
+    {
+      title: 'Our Commitment to Security',
+      content: 'We take the security of your data seriously. We implement industry-standard security measures to protect your personal information from unauthorized access, disclosure, alteration, and destruction.',
+    },
+    {
+      title: 'Data Encryption',
+      content: 'All data transmitted between your device and our servers is encrypted using industry-standard SSL/TLS protocols. Sensitive data stored in our databases is encrypted at rest using advanced encryption standards.',
+    },
+    {
+      title: 'Access Controls',
+      content: 'Access to user data is strictly limited to authorized personnel who require it to perform their job functions. We employ multi-factor authentication and regular access reviews to ensure that only authorized individuals can access sensitive information.',
+    },
+    {
+      title: 'Security Monitoring',
+      content: 'We continuously monitor our systems for potential security threats and vulnerabilities. Our security team actively tracks and responds to any suspicious activity or potential security incidents.',
+    },
+    {
+      title: 'Reporting Security Issues',
+      content: 'If you discover a security vulnerability or have concerns about our security practices, please report it to us immediately. We appreciate responsible disclosure and will work with you to address any legitimate security concerns.',
+    },
+    {
+      title: 'Regular Security Updates',
+      content: 'We regularly update our systems and software to ensure that known security vulnerabilities are patched promptly. Our infrastructure undergoes periodic security audits and penetration testing to identify and address potential weaknesses.',
+    },
+  ],
+};
+

package/src/pages/legal/index.ts

@@ -0,0 +1,24 @@
+/**
+ * Legal pages exports
+ */
+
+export { LegalPage } from './LegalPage';
+export type { LegalPageProps } from './LegalPage';
+
+export {
+  PrivacyPage,
+  TermsPage,
+  CookiesPage,
+  SecurityPage,
+} from './pages';
+export type { LegalPageComponentProps } from './pages';
+
+export {
+  privacyConfig,
+  termsConfig,
+  cookiesConfig,
+  securityConfig,
+} from './configs';
+
+export type { LegalPageConfig, LegalPageSection } from './types';
+

package/src/pages/legal/pages.tsx

@@ -0,0 +1,58 @@
+/**
+ * Pre-built legal page components
+ *
+ * Ready-to-use page components with default configurations
+ * Can be customized by passing custom config
+ *
+ * Usage:
+ * ```tsx
+ * // app/legal/privacy/page.tsx
+ * import { PrivacyPage } from '@djangocfg/layouts/components/legal';
+ *
+ * export default PrivacyPage;
+ * ```
+ */
+
+'use client';
+
+import { LegalPage } from './LegalPage';
+import {
+  privacyConfig,
+  termsConfig,
+  cookiesConfig,
+  securityConfig,
+} from './configs';
+import type { LegalPageConfig } from './types';
+
+export interface LegalPageComponentProps {
+  config?: LegalPageConfig;
+}
+
+/**
+ * Privacy Policy Page
+ */
+export function PrivacyPage({ config }: LegalPageComponentProps = {}) {
+  return <LegalPage config={config || privacyConfig} />;
+}
+
+/**
+ * Terms of Service Page
+ */
+export function TermsPage({ config }: LegalPageComponentProps = {}) {
+  return <LegalPage config={config || termsConfig} />;
+}
+
+/**
+ * Cookie Policy Page
+ */
+export function CookiesPage({ config }: LegalPageComponentProps = {}) {
+  return <LegalPage config={config || cookiesConfig} />;
+}
+
+/**
+ * Security Policy Page
+ */
+export function SecurityPage({ config }: LegalPageComponentProps = {}) {
+  return <LegalPage config={config || securityConfig} />;
+}
+

package/src/pages/legal/types.ts

@@ -0,0 +1,15 @@
+/**
+ * Legal page types
+ */
+
+export interface LegalPageSection {
+  title: string;
+  content: string | string[];
+}
+
+export interface LegalPageConfig {
+  title: string;
+  lastUpdated?: string | Date;
+  sections: LegalPageSection[];
+}
+

package/src/utils/index.ts

@@ -3,4 +3,5 @@
  */
 
 export * from './logger';
+export * from './og-image';
 

package/src/utils/og-image.ts

@@ -0,0 +1,169 @@
+/**
+ * OG Image URL Generation Utilities
+ * 
+ * Client-side utilities for generating OG image URLs.
+ * Moved from @djangocfg/nextjs to keep nextjs package server-only.
+ */
+
+/**
+ * Encode string to base64 with Unicode support
+ * Works in both browser and Node.js environments
+ */
+function encodeBase64(str: string): string {
+  // Node.js environment
+  if (typeof Buffer !== 'undefined') {
+    return Buffer.from(str, 'utf-8').toString('base64');
+  }
+  // Browser environment - handle Unicode via UTF-8 encoding
+  return btoa(unescape(encodeURIComponent(str)));
+}
+
+/**
+ * OG Image URL parameters
+ * All parameters can be encoded in URL via base64
+ */
+export interface OgImageUrlParams {
+  /** Page title */
+  title: string;
+  /** Page description (optional) */
+  description?: string;
+  /** Site name (optional) */
+  siteName?: string;
+  /** Logo URL (optional) */
+  logo?: string;
+  /** Background type: 'gradient' or 'solid' */
+  backgroundType?: 'gradient' | 'solid';
+  /** Gradient start color (hex) */
+  gradientStart?: string;
+  /** Gradient end color (hex) */
+  gradientEnd?: string;
+  /** Background color (for solid type) */
+  backgroundColor?: string;
+  /** Title font size (px) */
+  titleSize?: number;
+  /** Title font weight */
+  titleWeight?: number;
+  /** Title text color */
+  titleColor?: string;
+  /** Description font size (px) */
+  descriptionSize?: number;
+  /** Description text color */
+  descriptionColor?: string;
+  /** Site name font size (px) */
+  siteNameSize?: number;
+  /** Site name text color */
+  siteNameColor?: string;
+  /** Padding (px) */
+  padding?: number;
+  /** Logo size (px) */
+  logoSize?: number;
+  /** Show logo flag */
+  showLogo?: boolean;
+  /** Show site name flag */
+  showSiteName?: boolean;
+  /** Additional custom parameters */
+  [key: string]: string | number | boolean | undefined;
+}
+
+/**
+ * Generate OG image URL with query parameters or base64 encoding
+ *
+ * @param baseUrl - Base URL of the OG image API route (e.g., '/api/og' or 'https://example.com/api/og')
+ * @param params - URL parameters for the OG image
+ * @param useBase64 - If true, encode params as base64 for safer URLs (default: true)
+ * @returns Complete OG image URL with encoded parameters
+ *
+ * @example
+ * ```typescript
+ * // Base64 encoding (safe, default) - all parameters can be encoded
+ * const url = generateOgImageUrl('/api/og', {
+ *   title: 'My Page Title',
+ *   description: 'Page description here',
+ *   siteName: 'My Site',
+ * });
+ * // Result: /api/og/[base64-encoded-json]
+ * ```
+ */
+export function generateOgImageUrl(
+  baseUrl: string,
+  params: OgImageUrlParams,
+  useBase64: boolean = true
+): string {
+  if (useBase64) {
+    // Clean params - remove undefined/null/empty values
+    const cleanParams: Record<string, string | number | boolean> = {};
+    Object.entries(params).forEach(([key, value]) => {
+      if (value !== undefined && value !== null && value !== '') {
+        cleanParams[key] = value;
+      }
+    });
+
+    // Encode as base64 (Unicode-safe)
+    const jsonString = JSON.stringify(cleanParams);
+    const base64Data = encodeBase64(jsonString);
+
+    // CRITICAL: Use path parameter instead of query parameter
+    // Next.js strips query params in internal requests for metadata generation
+    // Using /api/og/[data] instead of /api/og?data=... preserves the data
+    return `${baseUrl}/${base64Data}`;
+  } else {
+    // Legacy query params mode
+    const searchParams = new URLSearchParams();
+
+    // Add all defined parameters
+    Object.entries(params).forEach(([key, value]) => {
+      if (value !== undefined && value !== null && value !== '') {
+        searchParams.append(key, String(value));
+      }
+    });
+
+    const query = searchParams.toString();
+    return query ? `${baseUrl}?${query}` : baseUrl;
+  }
+}
+
+/**
+ * Get absolute OG image URL from relative path
+ *
+ * Useful for generating absolute URLs required by Open Graph meta tags
+ *
+ * @param relativePath - Relative OG image path (e.g., '/api/og?title=Hello')
+ * @param siteUrl - Base site URL (e.g., 'https://example.com')
+ * @returns Absolute URL
+ */
+export function getAbsoluteOgImageUrl(
+  relativePath: string,
+  siteUrl: string
+): string {
+  // Remove trailing slash from site URL
+  const cleanSiteUrl = siteUrl.replace(/\/$/, '');
+
+  // Ensure relative path starts with /
+  const cleanPath = relativePath.startsWith('/')
+    ? relativePath
+    : `/${relativePath}`;
+
+  return `${cleanSiteUrl}${cleanPath}`;
+}
+
+/**
+ * Create OG image URL builder with preset configuration
+ *
+ * Useful when you want to reuse the same base URL and default parameters
+ *
+ * @param baseUrl - Base URL of the OG image API route
+ * @param defaults - Default parameters to merge with each URL generation
+ * @returns URL builder function
+ */
+export function createOgImageUrlBuilder(
+  baseUrl: string,
+  defaults: Partial<OgImageUrlParams> = {}
+) {
+  return (params: OgImageUrlParams): string => {
+    return generateOgImageUrl(baseUrl, {
+      ...defaults,
+      ...params,
+    });
+  };
+}
+