cinqcinqdev-seo 0.1.15 → 0.1.17

package/README.md

@@ -1,33 +1,31 @@
-# nuxt-admin-cms
+# cinqcinqdev-seo
 
-A reusable Nuxt 3 admin module with a visual 3-panel page editor, powered by Supabase.
-
-Drop it into any Nuxt project to get:
-- `/admin` — Dashboard with page type cards
-- `/admin/pages/:type` — List + create + delete pages by type
-- `/admin/editor/:id` — Full visual editor (structure sidebar / live preview / properties panel)
-- `/admin/account` — User profile + optional plan management
-- Auto auth middleware protecting all `/admin` routes
+A Nuxt 3 admin CMS module with a visual page editor, AI content generation, and SEO tooling — powered by Supabase.
 
 ---
 
-## Styling
-
-The module ships its own pre-compiled CSS — **no Tailwind setup required in your project**.
+## Features
 
-- The admin UI always looks identical regardless of your project's CSS framework or design system.
-- It uses the **Inter** font for all admin chrome (navbar, sidebars, panels).
-- The **section preview** in the editor inherits your project's own body font automatically, so components look exactly as they do on the live site.
+- Visual 3-panel page editor (structure / live preview / properties)
+- AI content generation per section via OpenRouter (fr / ar / en simultaneously)
+- AI SEO audit with multilingual meta title + description suggestions
+- Project setup page: AI context brief + per-component style defaults
+- Multilingual content out of the box (`{ fr, ar, en }` i18n objects)
+- Supabase-backed pages, brand settings, and image uploads
+- Configurable `basePath` — no conflict with existing `/admin` routes
+- Pre-compiled Tailwind CSS scoped to `[data-admin-cms]` — no Tailwind config needed in host app
 
 ---
 
-## Prerequisites
+## Requirements
 
-Your project must have these modules installed and configured:
+- Nuxt 3
+- `@nuxtjs/supabase`
+- `@pinia/nuxt`
+- `@nuxt/icon`
+- An [OpenRouter](https://openrouter.ai) API key (for AI features)
 
-```bash
-pnpm add @nuxtjs/supabase @pinia/nuxt
-```
+---
 
 ## Installation
 
@@ -35,168 +33,611 @@ pnpm add @nuxtjs/supabase @pinia/nuxt
 pnpm add cinqcinqdev-seo
 ```
 
-In `nuxt.config.ts`:
+Add to `nuxt.config.js`:
 
-```ts
+```js
 export default defineNuxtConfig({
   modules: [
     '@nuxtjs/supabase',
     '@pinia/nuxt',
+    '@nuxt/icon',
     'cinqcinqdev-seo',
   ],
 
   adminCms: {
-    branding: {
-      name: 'My App',
-      logoUrl: '/logo.png', // optional
-    },
+    branding: { name: 'My App' },
     loginRoute: '/login',
-    tables: {
-      pages: 'pages',  // your Supabase table for pages
-      users: 'users',  // your Supabase table for users
-    },
-    storageBucket: 'site', // Supabase storage bucket for image uploads
-    pageTypes: [
-      { id: 'landing_page', label: 'Landing Page', icon: '🚀' },
-      { id: 'service_page', label: 'Service Page', icon: '🛠️' },
-      { id: 'about_page',   label: 'About Page',   icon: '👋' },
-      { id: 'blog_article', label: 'Blog Article', icon: '📝' },
-    ],
-    // Optional: plans for the account page
-    plans: [
-      { value: 'free',  title: 'Free',  price: '$0/mo',   features: ['1 site', '5 pages'] },
-      { value: 'pro',   title: 'Pro',   price: '$19/mo',  features: ['Unlimited sites', 'Priority support'], popular: true },
-    ],
   },
 })
 ```
 
+Add the OpenRouter key to `.env`:
+
+```env
+OPENROUTER_API_KEY=sk-or-...
+```
+
 ---
 
-## Supabase Setup
+## Database Setup
 
-### Required table: `pages`
+Run this SQL in your Supabase project (SQL Editor):
 
 ```sql
-create table pages (
-  id uuid primary key default gen_random_uuid(),
-  title text not null,
-  slug text not null unique,
-  type text not null,
-  status text not null default 'draft',
-  content jsonb not null default '[]',
-  seo_config jsonb default '{}',
-  content_locked boolean default false,
-  label text,
-  prefix text,
-  created_at timestamptz default now(),
-  updated_at timestamptz default now()
+-- Pages table
+CREATE TYPE page_type AS ENUM (
+  'landing_page', 'service_page', 'about_page',
+  'product_page', 'blog_article', 'portfolio_item'
 );
 
--- Auto-update updated_at
-create or replace function update_updated_at()
-returns trigger as $$
-begin
-  new.updated_at = now();
-  return new;
-end;
-$$ language plpgsql;
+CREATE TABLE IF NOT EXISTS public.pages (
+  id uuid DEFAULT gen_random_uuid() PRIMARY KEY,
+  created_at timestamptz DEFAULT now(),
+  updated_at timestamptz DEFAULT now(),
+  title text NOT NULL,
+  slug text NOT NULL UNIQUE,
+  type page_type NOT NULL DEFAULT 'landing_page',
+  seo_config jsonb DEFAULT '{
+    "meta_title":       {"fr": "", "ar": "", "en": ""},
+    "meta_description": {"fr": "", "ar": "", "en": ""},
+    "og_image": "",
+    "no_index": false
+  }'::jsonb,
+  content jsonb DEFAULT '[]'::jsonb,
+  status text CHECK (status IN (''draft'', ''published'', ''archived'')) DEFAULT 'draft',
+  content_locked boolean DEFAULT false
+);
 
-create trigger pages_updated_at
-  before update on pages
-  for each row execute function update_updated_at();
-```
+ALTER TABLE public.pages ENABLE ROW LEVEL SECURITY;
 
-### Required table: `users`
+-- Public can read published pages
+CREATE POLICY "public_read_published" ON public.pages
+  FOR SELECT USING (status = 'published');
 
-```sql
-create table users (
-  id uuid primary key references auth.users(id),
-  plan text default 'free',
-  is_subscription_active boolean default false,
+-- Authenticated users have full access
+CREATE POLICY "auth_full_access" ON public.pages
+  FOR ALL TO authenticated USING (true) WITH CHECK (true);
+
+-- Auto-update updated_at
+CREATE OR REPLACE FUNCTION update_updated_at_column()
+RETURNS TRIGGER AS $$ BEGIN NEW.updated_at = now(); RETURN NEW; END; $$ language 'plpgsql';
+
+CREATE TRIGGER update_pages_modtime
+  BEFORE UPDATE ON public.pages
+  FOR EACH ROW EXECUTE PROCEDURE update_updated_at_column();
+
+-- Users table (for plan management)
+CREATE TABLE IF NOT EXISTS public.users (
+  id uuid PRIMARY KEY REFERENCES auth.users(id),
+  plan text DEFAULT 'free',
+  is_subscription_active boolean DEFAULT false,
   trial_expires_at timestamptz,
-  created_at timestamptz default now()
+  created_at timestamptz DEFAULT now()
+);
+
+-- Brand settings (AI context, component presets, colors, fonts)
+CREATE TABLE IF NOT EXISTS public.brand_settings (
+  id INT PRIMARY KEY DEFAULT 1,
+  brand_name TEXT DEFAULT '',
+  tagline TEXT,
+  primary_color TEXT DEFAULT '#000000',
+  secondary_color TEXT DEFAULT '#ffffff',
+  accent_color TEXT DEFAULT '#F0F0F3',
+  font_headline TEXT DEFAULT 'Inter',
+  font_body TEXT DEFAULT 'Inter',
+  ai_context TEXT DEFAULT '',
+  section_presets JSONB DEFAULT '{}'::jsonb,
+  updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
+  CONSTRAINT one_row_only CHECK (id = 1)
 );
+
+INSERT INTO public.brand_settings (id) VALUES (1) ON CONFLICT (id) DO NOTHING;
 ```
 
 ### Storage bucket
 
-Create a bucket named `site` (or whatever you set as `storageBucket`) in Supabase Storage with public read access.
+Create a bucket named `site` (or your `storageBucket` value) in Supabase Storage. Add these policies:
+
+```sql
+CREATE POLICY "Public read" ON storage.objects
+  FOR SELECT USING (bucket_id = 'site');
+
+CREATE POLICY "Authenticated upload" ON storage.objects
+  FOR INSERT TO authenticated WITH CHECK (bucket_id = 'site');
+
+CREATE POLICY "Authenticated delete" ON storage.objects
+  FOR DELETE TO authenticated USING (bucket_id = 'site');
+```
+
+---
+
+## Admin Routes
+
+With default `basePath: '/admin'`:
+
+| Route | Description |
+|---|---|
+| `/admin` | Dashboard — page type cards with counts |
+| `/admin/setup` | Project setup — AI context + component style defaults |
+| `/admin/pages/:type` | Page list for a given type (create / delete) |
+| `/admin/editor/:id` | Visual editor for a page |
+| `/admin/account` | User profile + subscription plan |
+
+---
+
+## Configuration Reference
+
+All options go under the `adminCms` key in `nuxt.config.js`.
+
+| Option | Type | Default | Description |
+|---|---|---|---|
+| `basePath` | `string` | `'/admin'` | Base path for all admin routes |
+| `loginRoute` | `string` | `'/login'` | Redirect unauthenticated users here |
+| `branding.name` | `string` | `'Admin CMS'` | Name shown in the sidebar |
+| `branding.logoUrl` | `string` | `''` | Logo URL shown in the sidebar |
+| `pageTypes` | `PageTypeConfig[]` | 6 defaults | Page type cards on the dashboard |
+| `plans` | `PlanConfig[]` | `[]` | Subscription plans on the account page |
+| `tables.pages` | `string` | `'pages'` | Supabase table name for pages |
+| `tables.users` | `string` | `'users'` | Supabase table name for users |
+| `storageBucket` | `string` | `'site'` | Supabase storage bucket for image uploads |
+| `navSections` | `NavSectionItem[]` | `[]` | Extra sidebar links |
+| `extraSections` | `Record<string, SectionConfig>` | `{}` | Extra section types for the visual editor |
+
+### Default page types
+
+If `pageTypes` is empty, these are used:
+
+```js
+[
+  { id: 'landing_page',   label: 'Landing Pages' },
+  { id: 'service_page',   label: 'Pages de Service' },
+  { id: 'about_page',     label: 'À Propos' },
+  { id: 'product_page',   label: 'Produits' },
+  { id: 'blog_article',   label: 'Articles' },
+  { id: 'portfolio_item', label: 'Portfolio' },
+]
+```
+
+Override entirely:
+
+```js
+adminCms: {
+  pageTypes: [
+    { id: 'landing_page', label: 'Landing Pages', desc: 'Conversion pages' },
+    { id: 'blog_article', label: 'Blog', desc: 'Articles & news' },
+  ],
+}
+```
+
+Each entry accepts: `id`, `label`, `icon` (emoji), `svgPath` (SVG path string for sidebar icon), `desc` (shown on dashboard card).
+
+---
+
+## Avoiding Route Conflicts
+
+If your app already uses `/admin`, change the base path:
+
+```js
+adminCms: {
+  basePath: '/cms',
+}
+```
+
+All routes, sidebar links, redirects, and the auth middleware automatically use `/cms` instead. Nothing in your app is touched.
+
+---
+
+## Project Setup (`/admin/setup`)
+
+The setup page is the first thing to fill in when starting a new project.
+
+### AI Context
+
+A free-text field where you describe the website: industry, target audience, tone of voice, key services. Saved to `brand_settings.ai_context`.
+
+This context is **automatically prepended to every AI call** (content generation and SEO audit), so the AI always writes copy relevant to the actual project — not generic placeholder text.
+
+### Component Style Defaults
+
+For each built-in section type you can set:
+
+- **Layout variant** (e.g. `centered`, `split`, `bento`, `grid`)
+- **Animation** (fade up, blur, reveal, typewriter, etc.)
+- **Border radius** (sharp / rounded / pill)
+- **Spacing** (compact / normal / spacious)
+- **Background and text colors**
+
+Saved to `brand_settings.section_presets`. When you add a section in the visual editor, these defaults are applied automatically so every new section matches the project's style from the start.
+
+---
+
+## Visual Editor (`/admin/editor/:id`)
+
+Three-panel layout:
+
+**Left — Structure**
+- List of all content blocks
+- Reorder / delete blocks
+- "Add section" button — opens a modal with all available types
+- Toggle between Structure view and SEO view
+
+**Center — Live Preview**
+- Renders the actual section components
+- Click any block to select it
+- Language switcher (fr / ar / en) to preview each locale
+
+**Right — Properties**
+- Edit the selected block's fields (layout, colors, text, images, lists)
+- Fields are grouped by tabs (Design, Animation, etc.)
+- AI button: type a prompt → generates all text fields in all three languages at once
+- In SEO mode: AI SEO audit that scores the page and suggests optimised meta titles + descriptions
+
+### Content locking
+
+If a page has `content_locked = true` in the database, the editor shows only the SEO panel. The page layout is treated as fixed (defined directly in your Vue page file) and cannot be edited via the CMS. Useful for hand-crafted pages like the homepage.
 
 ---
 
 ## Section Components
 
-The editor renders sections by resolving components from your app's `components/sections/` directory.
+The module ships these built-in section types:
+
+| Type | Description |
+|---|---|
+| `HeroSection` | Hero with title, subtitle, badge, CTA, image |
+| `TextVisual` | Text + image (split / stacked / wide) |
+| `ServiceGrid` | Services in grid, list, cards, or minimal layout |
+| `Features` | Feature highlights with icons |
+| `Process` | Step-by-step process (steps / horizontal / timeline / cards) |
+| `Testimonials` | Customer testimonials (grid / featured / wall) |
+| `Pricing` | Pricing plans (cards / minimal / table) |
+| `FAQ` | Accordion FAQ |
+| `ContactForm` | Contact form (split / centered / minimal) |
 
-The default section types are: `HeroSection`, `TextVisual`, `ServiceGrid`, `Features`, `FAQ`, `Process`, `Testimonials`, `Pricing`, `ContactForm`.
+Each section supports: layout variants, spacing, border radius, animation, background color, text color, and multilingual text fields.
 
-Create matching Vue components:
+### Creating section components
+
+The editor resolves section components from your app's `components/sections/` directory.
 
 ```
 components/
   sections/
-    HeroSection.vue      ← receives props defined in the editor
+    HeroSection.vue
+    TextVisual.vue
     ServiceGrid.vue
-    FAQ.vue
     ...
 ```
 
-Each section component receives its props directly via `v-bind`. Example:
+Each component receives its stored props directly via `v-bind`. Handle i18n fields (stored as `{ fr, ar, en }` objects):
 
 ```vue
 <!-- components/sections/HeroSection.vue -->
-<script setup lang="ts">
-defineProps<{
-  title: string | { fr: string; en: string; ar: string }
-  subtitle?: string | { fr: string; en: string; ar: string }
-  bgColor?: string
-  textColor?: string
-  ctaText?: string | { fr: string; en: string; ar: string }
-  ctaLink?: string
-}>()
+<script setup>
+const props = defineProps(['title', 'subtitle', 'bgColor', 'textColor', 'ctaText', 'ctaLink', 'layout', 'animation'])
+
+const { locale } = useI18n()
+
+// Helper: resolve i18n field to a string
+const t = (field) => {
+  if (!field || typeof field === 'string') return field || ''
+  return field[locale.value] || field.fr || Object.values(field).find(Boolean) || ''
+}
 </script>
-```
 
-> **i18n props**: Some fields are stored as `{ fr: '...', en: '...', ar: '...' }` objects. Handle them accordingly in your section components.
+<template>
+  <section :style="{ background: bgColor, color: textColor }">
+    <h1>{{ t(title) }}</h1>
+    <p>{{ t(subtitle) }}</p>
+    <NuxtLink v-if="ctaLink" :to="ctaLink">{{ t(ctaText) }}</NuxtLink>
+  </section>
+</template>
+```
 
-### Adding custom sections
+### Adding custom section types
 
-Add your own sections via the `extraSections` option:
+Define the section config in `nuxt.config.js`:
 
-```ts
+```js
 adminCms: {
   extraSections: {
-    MyCustomSection: {
-      label: 'Custom Block',
-      icon: '✨',
-      defaultProps: { title: 'Hello', bgColor: '#fff' },
+    StatsBar: {
+      label: 'Stats Bar',
+      icon: '📊',
+      defaultProps: {
+        items: [],
+        bgColor: '#0d0d0d',
+        textColor: '#ffffff',
+      },
       fields: {
-        title:   { type: 'text',  label: 'Title' },
-        bgColor: { type: 'color', label: 'Background' },
+        items: {
+          type: 'list',
+          label: 'Stats',
+          itemFields: {
+            value: { type: 'text',  label: 'Number' },
+            label: { type: 'text',  label: 'Label', i18n: true },
+          },
+        },
+        bgColor:   { type: 'color', label: 'Background' },
+        textColor: { type: 'color', label: 'Text Color' },
       },
     },
   },
 }
 ```
 
-Then create `components/sections/MyCustomSection.vue` in your app.
+Create `components/sections/StatsBar.vue` in your app. The section will appear in the editor's "Add section" modal automatically.
+
+### Field types
+
+| Type | Description |
+|---|---|
+| `text` | Single-line input. Add `i18n: true` for fr/ar/en tabs |
+| `textarea` | Multi-line input. Add `i18n: true` for fr/ar/en tabs |
+| `color` | Color picker + hex input |
+| `image` | Image URL input + Supabase storage upload button |
+| `select` | Dropdown. Requires `options: [{ value, label }]` |
+| `cards` | Visual card picker. Requires `options: [{ value, label, icon? }]` |
+| `list` | Repeatable list. Requires `itemFields: { fieldName: FieldConfig }` |
+
+---
+
+## Multilingual Content
+
+Text fields with `i18n: true` are stored as:
+
+```json
+{ "fr": "Titre français", "ar": "العنوان", "en": "English title" }
+```
+
+Plain fields (colors, images, URLs, booleans) remain scalar values.
+
+**Fallback rule:** current locale → `fr` → first non-empty value.
+
+---
+
+## AI Features
+
+Requires `OPENROUTER_API_KEY` in your environment. Uses `google/gemini-2.0-flash-lite-001` via OpenRouter.
+
+### Content generation
+
+1. Select a block in the editor
+2. Click the AI button (wand icon)
+3. Type a prompt — e.g. "Emphasise 10 years of expertise and affordable prices"
+4. All text fields (title, subtitle, items, etc.) are filled in fr + ar + en simultaneously
+
+The AI always receives the **AI Context** from `/admin/setup` as a system prompt, ensuring output is always relevant to the specific project.
+
+### SEO audit
+
+In SEO mode (left panel toggle), click "Analyser avec l'IA" to:
+- Get a score (0–100)
+- Receive an optimised meta title and meta description in fr / ar / en
+- See a list of issues (errors, warnings, info)
+- Get actionable suggestions
+
+Apply the AI suggestions with one click, then adjust as needed.
+
+---
+
+## Sidebar Extra Links
+
+Add custom links to the sidebar's "Contenu" section:
+
+```js
+adminCms: {
+  navSections: [
+    {
+      label: 'Messages',
+      to: '/admin/contact',
+      svgPath: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>',
+    },
+  ],
+}
+```
+
+`to` can point to any route in your app — module pages or your own custom pages.
+
+---
+
+## Subscription Plans (Account Page)
+
+Show subscription plans on the `/admin/account` page:
+
+```js
+adminCms: {
+  plans: [
+    {
+      value: 'starter',
+      title: 'Starter',
+      subtitle: 'For small projects',
+      price: '0 DZD',
+      features: ['5 pages', '1 user', 'Basic SEO'],
+    },
+    {
+      value: 'pro',
+      title: 'Pro',
+      subtitle: 'For growing agencies',
+      price: '4 900 DZD/mo',
+      features: ['Unlimited pages', 'AI generation', 'Priority support'],
+      popular: true,
+    },
+  ],
+}
+```
+
+Plan state (`plan`, `is_subscription_active`, `trial_expires_at`) is read from the `users` table.
+
+---
+
+## Auto-imported Composables
+
+These are available everywhere in your app without importing:
+
+### `useAdminSettings()`
+
+Load and save the `brand_settings` row (AI context, section presets, colors, fonts).
+
+```ts
+const { settings, loading, saving, load, save, applyPresets } = useAdminSettings()
+
+await load()
+// settings.value → { ai_context, section_presets, primary_color, ... }
+
+await save({ ai_context: 'Web agency in Algiers...' })
+
+// Apply saved style presets when adding a new section
+const props = applyPresets('HeroSection', defaultProps)
+// → merges layout, spacing, radius, animation, bgColor, textColor from brand_settings
+```
+
+### `useAdminSections()`
+
+Returns the merged section config (built-ins + `extraSections`).
+
+```ts
+const sections = useAdminSections()
+// { HeroSection: { label, icon, defaultProps, fields }, ... }
+```
+
+### `useAdminBasePath()`
+
+Returns the configured admin base path string.
+
+```ts
+const basePath = useAdminBasePath()
+// '/admin' or whatever is configured
+```
+
+### `useAdminBranding()`
+
+Load and save branding data from a `branding` table (separate from `brand_settings`).
+
+```ts
+const { fetchBranding, saveBranding } = useAdminBranding()
+const data = await fetchBranding()
+await saveBranding({ brand_name: 'My Agency', color_primary: '#3d35ff' })
+```
+
+---
+
+## Styling
+
+The module ships a pre-compiled Tailwind CSS file scoped to `[data-admin-cms]`.
+
+- Admin styles never leak into your app
+- No Tailwind config required in the consuming project
+- If your app uses `@nuxtjs/tailwindcss`, the module automatically extends its content paths so admin classes are never purged
+- The section **preview** area in the editor inherits your app's own body font, so sections look exactly as they do on the live site
 
 ---
 
 ## Auth
 
-The module registers a global middleware that:
-- Redirects unauthenticated users trying to access `/admin/*` to `loginRoute` (`/login` by default)
-- Redirects authenticated users away from `loginRoute` to `/admin`
+A global Nuxt route middleware is registered automatically:
 
-Your login page + Supabase auth setup is your responsibility (the module only protects routes).
+- Redirects unauthenticated users from `basePath/*` to `loginRoute`
+- Redirects authenticated users away from `loginRoute` to `basePath`
+
+Auth state is read from `useSupabaseUser()` provided by `@nuxtjs/supabase`. Your login page and Supabase auth setup are your responsibility.
 
 ---
 
-## What's NOT included
+## What's NOT Included
+
+- Login / register pages — you provide these
+- Section component UI — you build the Vue components in `components/sections/`
+- Email / webhook integrations
+- Multi-tenancy / per-user page isolation — implement via Supabase RLS
+
+---
+
+## Full Example
+
+```js
+// nuxt.config.js
+export default defineNuxtConfig({
+  modules: [
+    '@nuxtjs/supabase',
+    '@pinia/nuxt',
+    '@nuxt/icon',
+    'cinqcinqdev-seo',
+  ],
+
+  supabase: {
+    redirect: false,
+  },
+
+  adminCms: {
+    basePath: '/admin',          // change if /admin is already taken
+    loginRoute: '/login',
 
-- Login / Register pages → you provide these
-- Section component UI → you provide the Vue components in `components/sections/`
-- Email notifications, webhooks → out of scope
-- Multi-tenancy / per-user page isolation → implement RLS in Supabase
+    branding: {
+      name: 'My Agency',
+      logoUrl: '/logo.svg',
+    },
+
+    storageBucket: 'site',
+
+    tables: {
+      pages: 'pages',
+      users: 'users',
+    },
+
+    pageTypes: [
+      { id: 'landing_page', label: 'Landing Pages', desc: 'Conversion pages' },
+      { id: 'service_page', label: 'Services',      desc: 'Service pages' },
+      { id: 'blog_article', label: 'Blog',           desc: 'Articles & news' },
+    ],
+
+    navSections: [
+      {
+        label: 'Contacts',
+        to: '/admin/contact',
+        svgPath: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>',
+      },
+    ],
+
+    plans: [
+      {
+        value: 'starter',
+        title: 'Starter',
+        price: '0 DZD',
+        features: ['5 pages', '1 user'],
+      },
+      {
+        value: 'pro',
+        title: 'Pro',
+        price: '4 900 DZD/mo',
+        features: ['Unlimited pages', 'AI generation', 'Priority support'],
+        popular: true,
+      },
+    ],
+
+    extraSections: {
+      StatsBar: {
+        label: 'Stats Bar',
+        icon: '📊',
+        defaultProps: {
+          items: [],
+          bgColor: '#0d0d0d',
+          textColor: '#ffffff',
+        },
+        fields: {
+          items: {
+            type: 'list',
+            label: 'Stats',
+            itemFields: {
+              value: { type: 'text', label: 'Number' },
+              label: { type: 'text', label: 'Label', i18n: true },
+            },
+          },
+          bgColor:   { type: 'color', label: 'Background' },
+          textColor: { type: 'color', label: 'Text Color' },
+        },
+      },
+    },
+  },
+})
+```