diff --git a/.github/workflows/claude.yml b/.github/workflows/claude.yml
new file mode 100644
index 0000000..e5c4a93
--- /dev/null
+++ b/.github/workflows/claude.yml
@@ -0,0 +1,18 @@
+name: Claude Code Action
+on:
+  issue_comment:
+    types: [created]
+  pull_request:
+    types: [opened, synchronize]
+
+jobs:
+  claude-response:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pull-requests: write
+      issues: write
+    steps:
+      - uses: anthropics/claude-code-action@v1
+        with:
+          anthropic_api_key: ${{ secrets.ANTHROPIC_API_KEY }}
diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 0000000..75c4982
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,106 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+Mexico Paradise Vacations — a travel certificate sales platform with payment plans, client portal, and admin dashboard. Built with Next.js 15 (App Router) + TypeScript + Tailwind CSS 4 + shadcn/ui.
+
+## Commands
+
+- **Dev server**: `npm run dev` (uses nodemon + tsx to run custom `server.ts`; HMR is disabled in favor of nodemon-based full reload)
+- **Build**: `npm run build`
+- **Production**: `npm run start`
+- **Lint**: `npm run lint`
+- **DB push schema**: `npm run db:push`
+- **DB generate client**: `npm run db:generate`
+- **DB migrate**: `npm run db:migrate`
+
+## Architecture
+
+### Custom Server (`server.ts`)
+The app uses a custom Node HTTP server (not the default `next dev`/`next start`). It creates a Next.js app and attaches a Socket.IO server on `/api/socketio`. Dev mode runs via `nodemon --exec "npx tsx server.ts"`.
+
+### Dual Database Setup
+- **Supabase** (`src/lib/supabase.ts`): Primary data store for the business domain — users, signups, payments, certificates. The Supabase client is initialized with hardcoded project URL/anon key. Database types are defined inline in this file.
+- **Prisma + SQLite** (`src/lib/db.ts`, `prisma/schema.prisma`): Secondary database with a basic User/Post schema. Uses the singleton pattern to avoid multiple PrismaClient instances in dev.
+
+### Authentication
+Simple demo auth in `src/lib/auth.ts` — password is hardcoded as `demo123`, user session stored in localStorage. Role-based: `admin` or `client`.
+
+### Payment Integration
+`src/lib/maverick.ts` — `MaverickPaymentAPI` class wrapping the Maverick Payments REST API. Configured via `MAVERICK_API_URL` and `MAVERICK_API_KEY` env vars.
+
+### API Routes
+All under `src/app/api/`:
+- `POST /api/signup` — new vacation package signup
+- `POST /api/payment/create` — create payment
+- `POST /api/payment/confirm` — confirm payment status
+- `POST /api/admin/refund` — process refund (admin only)
+- `GET /api/health` — health check
+
+### Pages
+- `/` — landing page
+- `/client-portal` — client dashboard (auth-guarded)
+- `/admin-portal` — admin dashboard (auth-guarded)
+- `/payment/success`, `/payment/cancel` — payment result pages
+
+### UI Components
+shadcn/ui (new-york style) in `src/components/ui/`. Custom components: `auth-guard.tsx`, `login-modal.tsx`.
+
+## Path Aliases
+
+`@/*` maps to `./src/*` (configured in tsconfig.json).
+
+## Environment Variables
+
+- `DATABASE_URL` — Prisma/SQLite connection string
+- `NEXT_PUBLIC_APP_URL` — application URL
+- `MAVERICK_API_URL` — Maverick Payments API base URL
+- `MAVERICK_API_KEY` — Maverick Payments API key
+
+## Build Notes
+
+- TypeScript build errors are ignored (`typescript.ignoreBuildErrors: true` in next.config.ts)
+- ESLint errors are ignored during builds (`eslint.ignoreDuringBuilds: true`)
+- ESLint config is very permissive — most strict rules are turned off
+
+## Best Practices
+
+### Next.js App Router
+- Use Server Components by default; only add `"use client"` when you need browser APIs, event handlers, or React hooks (useState, useEffect, etc.)
+- Place data fetching in Server Components or API routes — never fetch in `useEffect` when a server-side approach works
+- Use `route.ts` files for API routes; export named functions matching HTTP methods (`GET`, `POST`, `PUT`, `DELETE`)
+- Return `NextResponse.json()` from API routes with appropriate status codes
+- Use `loading.tsx`, `error.tsx`, and `not-found.tsx` for route-level UI states
+- Use `layout.tsx` for shared UI that persists across navigations; avoid re-fetching data that a parent layout already provides
+- Prefer Next.js `<Image>` over `<img>` and `<Link>` over `<a>` for optimized loading and client-side navigation
+- Use `metadata` exports or `generateMetadata()` for SEO — not manual `<head>` tags
+
+### Node.js / Server-Side
+- Never block the event loop — use async/await for I/O, avoid synchronous file or network calls in request handlers
+- Keep secrets in environment variables, never hardcode them (note: this project currently has hardcoded Supabase keys that should be moved to env vars)
+- Use the Prisma singleton pattern from `src/lib/db.ts` to prevent connection exhaustion in dev
+- Validate and sanitize all user input at API boundaries using Zod (already a dependency)
+- Handle errors explicitly in API routes — return structured error responses, don't let unhandled exceptions leak stack traces
+- Use `try/catch` around external API calls (Maverick, Supabase) and return meaningful error messages
+
+### React / Frontend
+- Co-locate component state as close to where it's used as possible; lift state only when siblings need to share it
+- Use Zustand (already installed) for global client state; avoid prop drilling more than 2 levels deep
+- Use React Query (`@tanstack/react-query`, already installed) for server state — caching, refetching, and optimistic updates
+- Prefer controlled form inputs with `react-hook-form` + Zod validation (both already installed)
+- Use shadcn/ui components from `src/components/ui/` — don't rebuild existing primitives
+- Add new shadcn components via `npx shadcn@latest add <component-name>`
+
+### TypeScript
+- Use explicit return types on exported functions and API route handlers
+- Define shared types/interfaces in dedicated files or alongside their domain (e.g., Supabase types in `src/lib/supabase.ts`)
+- Prefer `interface` for object shapes that may be extended; use `type` for unions, intersections, and computed types
+- Use Zod schemas as the single source of truth for validation and infer TypeScript types from them with `z.infer<>`
+
+### Styling
+- Use Tailwind CSS utility classes; avoid custom CSS unless Tailwind cannot express the style
+- Follow the shadcn/ui `new-york` style variant (configured in `components.json`)
+- Use CSS variables defined in `src/app/globals.css` for theme colors
+- Use `cn()` from `src/lib/utils.ts` to merge conditional Tailwind classes (combines `clsx` + `tailwind-merge`)
diff --git a/ecosystem.config.cjs b/ecosystem.config.cjs
new file mode 100644
index 0000000..983b08d
--- /dev/null
+++ b/ecosystem.config.cjs
@@ -0,0 +1,12 @@
+module.exports = {
+  apps: [{
+    name: 'hi2b',
+    script: 'npx',
+    args: 'tsx server.ts',
+    cwd: '/opt/hi2b',
+    env: {
+      PORT: 3015,
+      NODE_ENV: 'production'
+    }
+  }]
+}
diff --git a/next.config.ts b/next.config.ts
index ea90f9f..8d52773 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -1,7 +1,11 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  /* config options here */
+  images: {
+    remotePatterns: [
+      { protocol: 'https', hostname: 'images.unsplash.com' },
+    ],
+  },
   typescript: {
     ignoreBuildErrors: true,
   },
diff --git a/package-lock.json b/package-lock.json
index 9b632e3..ab9d4a0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -46,19 +46,29 @@
         "@tanstack/react-query": "^5.82.0",
         "@tanstack/react-table": "^8.21.3",
         "axios": "^1.10.0",
+        "bcryptjs": "^3.0.3",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "cmdk": "^1.1.1",
         "date-fns": "^4.1.0",
         "embla-carousel-react": "^8.6.0",
         "framer-motion": "^12.23.2",
+        "gsap": "^3.14.2",
         "input-otp": "^1.4.2",
+        "jsonwebtoken": "^9.0.3",
+        "lenis": "^1.3.18",
         "lucide-react": "^0.525.0",
+        "mysql2": "^3.20.0",
         "next": "15.3.5",
         "next-auth": "^4.24.11",
         "next-intl": "^4.3.4",
         "next-themes": "^0.4.6",
+        "nodemailer": "^6.10.1",
+        "pdfkit": "^0.18.0",
         "prisma": "^6.11.1",
+        "puppeteer-core": "^24.39.1",
+        "puppeteer-extra": "^3.3.6",
+        "puppeteer-extra-plugin-stealth": "^2.11.2",
         "react": "^19.0.0",
         "react-day-picker": "^9.8.0",
         "react-dom": "^19.0.0",
@@ -67,6 +77,7 @@
         "react-resizable-panels": "^3.0.3",
         "react-syntax-highlighter": "^15.6.1",
         "recharts": "^2.15.4",
+        "resend": "^6.9.4",
         "sharp": "^0.34.3",
         "socket.io": "^4.8.1",
         "socket.io-client": "^4.8.1",
@@ -83,7 +94,10 @@
       "devDependencies": {
         "@eslint/eslintrc": "^3",
         "@tailwindcss/postcss": "^4",
+        "@types/bcryptjs": "^2.4.6",
+        "@types/jsonwebtoken": "^9.0.10",
         "@types/node": "^20",
+        "@types/nodemailer": "^7.0.11",
         "@types/react": "^19",
         "@types/react-dom": "^19",
         "eslint": "^9",
@@ -2595,6 +2609,30 @@
         "node": ">= 10"
       }
     },
+    "node_modules/@noble/ciphers": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@noble/ciphers/-/ciphers-1.3.0.tgz",
+      "integrity": "sha512-2I0gnIVPtfnMw9ee9h1dJG7tp81+8Ob3OJb3Mv37rx5L40/b0i7djjCVvGOVqc9AEIQyvyu1i6ypKdFw8R8gQw==",
+      "license": "MIT",
+      "engines": {
+        "node": "^14.21.3 || >=16"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/@noble/hashes": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.8.0.tgz",
+      "integrity": "sha512-jCs9ldd7NwzpgXDIf6P3+NrHh9/sD6CQdxHyjQI+h/6rDNo88ypBxxz45UDuZHz9r3tNz7N/VInSVoVdtXEI4A==",
+      "license": "MIT",
+      "engines": {
+        "node": "^14.21.3 || >=16"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -2737,6 +2775,27 @@
         "@prisma/debug": "6.17.1"
       }
     },
+    "node_modules/@puppeteer/browsers": {
+      "version": "2.13.0",
+      "resolved": "https://registry.npmjs.org/@puppeteer/browsers/-/browsers-2.13.0.tgz",
+      "integrity": "sha512-46BZJYJjc/WwmKjsvDFykHtXrtomsCIrwYQPOP7VfMJoZY2bsDF9oROBABR3paDjDcmkUye1Pb1BqdcdiipaWA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "debug": "^4.4.3",
+        "extract-zip": "^2.0.1",
+        "progress": "^2.0.3",
+        "proxy-agent": "^6.5.0",
+        "semver": "^7.7.4",
+        "tar-fs": "^3.1.1",
+        "yargs": "^17.7.2"
+      },
+      "bin": {
+        "browsers": "lib/cjs/main-cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@radix-ui/colors": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/colors/-/colors-3.0.0.tgz",
@@ -4206,6 +4265,12 @@
       "integrity": "sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==",
       "license": "MIT"
     },
+    "node_modules/@stablelib/base64": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@stablelib/base64/-/base64-1.0.1.tgz",
+      "integrity": "sha512-1bnPQqSxSuc3Ii6MhBysoWCg58j97aUjuCSZrGSmDxNqtytIi0k8utUenAwTZN4V5mXXYGsVUI9zeBqy+jBOSQ==",
+      "license": "MIT"
+    },
     "node_modules/@standard-schema/spec": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.0.0.tgz",
@@ -4693,6 +4758,12 @@
         "node": ">=18"
       }
     },
+    "node_modules/@tootallnate/quickjs-emscripten": {
+      "version": "0.23.0",
+      "resolved": "https://registry.npmjs.org/@tootallnate/quickjs-emscripten/-/quickjs-emscripten-0.23.0.tgz",
+      "integrity": "sha512-C5Mc6rdnsaJDjO3UpGW/CQTHtCKaYlScZTly4JIu97Jxo/odCiH0ITnDXSJPTOrEKk/ycSZ0AOgTmkDtkOsvIA==",
+      "license": "MIT"
+    },
     "node_modules/@tybys/wasm-util": {
       "version": "0.10.1",
       "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz",
@@ -4710,6 +4781,13 @@
       "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
       "license": "MIT"
     },
+    "node_modules/@types/bcryptjs": {
+      "version": "2.4.6",
+      "resolved": "https://registry.npmjs.org/@types/bcryptjs/-/bcryptjs-2.4.6.tgz",
+      "integrity": "sha512-9xlo6R2qDs5uixm0bcIqCeMCE6HiQsIyel9KQySStiyqNl2tnj2mP3DX1Nf56MD6KMenNNlBBsy3LJ7gUEQPXQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/cors": {
       "version": "2.8.19",
       "resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.19.tgz",
@@ -4829,6 +4907,17 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/jsonwebtoken": {
+      "version": "9.0.10",
+      "resolved": "https://registry.npmjs.org/@types/jsonwebtoken/-/jsonwebtoken-9.0.10.tgz",
+      "integrity": "sha512-asx5hIG9Qmf/1oStypjanR7iKTv0gXQ1Ov/jfrX6kS/EO0OFni8orbmGCn0672NHR3kXHwpAwR+B368ZGN/2rA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/ms": "*",
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/mdast": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
@@ -4853,6 +4942,16 @@
         "undici-types": "~6.21.0"
       }
     },
+    "node_modules/@types/nodemailer": {
+      "version": "7.0.11",
+      "resolved": "https://registry.npmjs.org/@types/nodemailer/-/nodemailer-7.0.11.tgz",
+      "integrity": "sha512-E+U4RzR2dKrx+u3N4DlsmLaDC6mMZOM/TPROxA0UAPiTgI0y4CEFBmZE+coGWTjakDriRsXG368lNk1u9Q0a2g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/phoenix": {
       "version": "1.6.6",
       "resolved": "https://registry.npmjs.org/@types/phoenix/-/phoenix-1.6.6.tgz",
@@ -4893,6 +4992,16 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/yauzl": {
+      "version": "2.10.3",
+      "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.3.tgz",
+      "integrity": "sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.46.1",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.46.1.tgz",
@@ -5499,6 +5608,15 @@
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
+    "node_modules/agent-base": {
+      "version": "7.1.4",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.4.tgz",
+      "integrity": "sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -5535,7 +5653,6 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "color-convert": "^2.0.1"
@@ -5588,6 +5705,15 @@
         "dequal": "^2.0.3"
       }
     },
+    "node_modules/arr-union": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/arr-union/-/arr-union-3.1.0.tgz",
+      "integrity": "sha512-sKpyeERZ02v1FeCZT8lrfJq5u6goHCtpTAzPwJYe7c8SPFOboNjNg1vz2L4VTn9T4PQxEx13TbXLmYUcS6Ug7Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/array-buffer-byte-length": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.2.tgz",
@@ -5748,6 +5874,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/ast-types": {
+      "version": "0.13.4",
+      "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.13.4.tgz",
+      "integrity": "sha512-x1FCFnFifvYDDzTaLII71vG5uvDwgtmDTEVWAxrgeiR8VjMONcCXJx7E+USjDtHlwFmt9MysbqgF9b9Vjr6w+w==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/ast-types-flow": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.8.tgz",
@@ -5787,6 +5925,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/aws-ssl-profiles": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/aws-ssl-profiles/-/aws-ssl-profiles-1.1.2.tgz",
+      "integrity": "sha512-NZKeq9AfyQvEeNlN0zSYAaWrmBffJh3IELMZfRpJVWgrpEbtEpnjvzqBPf+mxoI287JohRDoa+/nsfqqiZmF6g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6.0.0"
+      }
+    },
     "node_modules/axe-core": {
       "version": "4.11.0",
       "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.11.0.tgz",
@@ -5818,6 +5965,20 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/b4a": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/b4a/-/b4a-1.8.0.tgz",
+      "integrity": "sha512-qRuSmNSkGQaHwNbM7J78Wwy+ghLEYF1zNrSeMxj4Kgw6y33O3mXcQ6Ie9fRvfU/YnxWkOchPXbaLb73TkIsfdg==",
+      "license": "Apache-2.0",
+      "peerDependencies": {
+        "react-native-b4a": "*"
+      },
+      "peerDependenciesMeta": {
+        "react-native-b4a": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/bail": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz",
@@ -5832,9 +5993,95 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "dev": true,
       "license": "MIT"
     },
+    "node_modules/bare-events": {
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/bare-events/-/bare-events-2.8.2.tgz",
+      "integrity": "sha512-riJjyv1/mHLIPX4RwiK+oW9/4c3TEUeORHKefKAKnZ5kyslbN+HXowtbaVEqt4IMUB7OXlfixcs6gsFeo/jhiQ==",
+      "license": "Apache-2.0",
+      "peerDependencies": {
+        "bare-abort-controller": "*"
+      },
+      "peerDependenciesMeta": {
+        "bare-abort-controller": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/bare-fs": {
+      "version": "4.5.5",
+      "resolved": "https://registry.npmjs.org/bare-fs/-/bare-fs-4.5.5.tgz",
+      "integrity": "sha512-XvwYM6VZqKoqDll8BmSww5luA5eflDzY0uEFfBJtFKe4PAAtxBjU3YIxzIBzhyaEQBy1VXEQBto4cpN5RZJw+w==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "bare-events": "^2.5.4",
+        "bare-path": "^3.0.0",
+        "bare-stream": "^2.6.4",
+        "bare-url": "^2.2.2",
+        "fast-fifo": "^1.3.2"
+      },
+      "engines": {
+        "bare": ">=1.16.0"
+      },
+      "peerDependencies": {
+        "bare-buffer": "*"
+      },
+      "peerDependenciesMeta": {
+        "bare-buffer": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/bare-os": {
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/bare-os/-/bare-os-3.8.0.tgz",
+      "integrity": "sha512-Dc9/SlwfxkXIGYhvMQNUtKaXCaGkZYGcd1vuNUUADVqzu4/vQfvnMkYYOUnt2VwQ2AqKr/8qAVFRtwETljgeFg==",
+      "license": "Apache-2.0",
+      "engines": {
+        "bare": ">=1.14.0"
+      }
+    },
+    "node_modules/bare-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/bare-path/-/bare-path-3.0.0.tgz",
+      "integrity": "sha512-tyfW2cQcB5NN8Saijrhqn0Zh7AnFNsnczRcuWODH0eYAXBsJ5gVxAUuNr7tsHSC6IZ77cA0SitzT+s47kot8Mw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "bare-os": "^3.0.1"
+      }
+    },
+    "node_modules/bare-stream": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/bare-stream/-/bare-stream-2.8.1.tgz",
+      "integrity": "sha512-bSeR8RfvbRwDpD7HWZvn8M3uYNDrk7m9DQjYOFkENZlXW8Ju/MPaqUPQq5LqJ3kyjEm07siTaAQ7wBKCU59oHg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "streamx": "^2.21.0",
+        "teex": "^1.0.1"
+      },
+      "peerDependencies": {
+        "bare-buffer": "*",
+        "bare-events": "*"
+      },
+      "peerDependenciesMeta": {
+        "bare-buffer": {
+          "optional": true
+        },
+        "bare-events": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/bare-url": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/bare-url/-/bare-url-2.3.2.tgz",
+      "integrity": "sha512-ZMq4gd9ngV5aTMa5p9+UfY0b3skwhHELaDkhEHetMdX0LRkW9kzaym4oo/Eh+Ghm0CCDuMTsRIGM/ytUc1ZYmw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "bare-path": "^3.0.0"
+      }
+    },
     "node_modules/base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -5864,6 +6111,24 @@
         "node": "^4.5.0 || >= 5.9"
       }
     },
+    "node_modules/basic-ftp": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/basic-ftp/-/basic-ftp-5.2.0.tgz",
+      "integrity": "sha512-VoMINM2rqJwJgfdHq6RiUudKt2BV+FY5ZFezP/ypmwayk68+NzzAQy4XXLlqsGD4MCzq3DrmNFD/uUmBJuGoXw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/bcryptjs": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/bcryptjs/-/bcryptjs-3.0.3.tgz",
+      "integrity": "sha512-GlF5wPWnSa/X5LKM1o0wz0suXIINz1iHRLvTS+sLyi7XPbe5ycmYI3DlZqVGZZtDgl4DmasFg7gOB3JYbphV5g==",
+      "license": "BSD-3-Clause",
+      "bin": {
+        "bcrypt": "bin/bcrypt"
+      }
+    },
     "node_modules/binary-extensions": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
@@ -5881,7 +6146,6 @@
       "version": "1.1.12",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
       "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "balanced-match": "^1.0.0",
@@ -5901,6 +6165,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/brotli": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/brotli/-/brotli-1.3.3.tgz",
+      "integrity": "sha512-oTKjJdShmDuGW94SyyaoQvAjf30dZaHnjJ8uAF+u2/vGJkJbJPJAT1gDiOJP5v1Zb6f9KEyW/1HpuaWIXtGHPg==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.1.2"
+      }
+    },
     "node_modules/buffer": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
@@ -5925,6 +6198,21 @@
         "ieee754": "^1.2.1"
       }
     },
+    "node_modules/buffer-crc32": {
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
+      "integrity": "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==",
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/buffer-equal-constant-time": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
+      "integrity": "sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/busboy": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
@@ -6186,6 +6474,28 @@
         "node": ">=18"
       }
     },
+    "node_modules/chromium-bidi": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/chromium-bidi/-/chromium-bidi-14.0.0.tgz",
+      "integrity": "sha512-9gYlLtS6tStdRWzrtXaTMnqcM4dudNegMXJxkR0I/CXObHalYeYcAMPrL19eroNZHtJ8DQmu1E+ZNOYu/IXMXw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "mitt": "^3.0.1",
+        "zod": "^3.24.1"
+      },
+      "peerDependencies": {
+        "devtools-protocol": "*"
+      }
+    },
+    "node_modules/chromium-bidi/node_modules/zod": {
+      "version": "3.25.76",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
+      "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
     "node_modules/citty": {
       "version": "0.1.6",
       "resolved": "https://registry.npmjs.org/citty/-/citty-0.1.6.tgz",
@@ -6225,6 +6535,45 @@
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
       "license": "MIT"
     },
+    "node_modules/cliui": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+      "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.1",
+        "wrap-ansi": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/clone": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+      "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/clone-deep": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-0.2.4.tgz",
+      "integrity": "sha512-we+NuQo2DHhSl+DP6jlUiAhyAjBQrYnpOk15rN6c6JSPScjiCLh8IbSU+VTcph6YS3o7mASE8a0+gbZ7ChLpgg==",
+      "license": "MIT",
+      "dependencies": {
+        "for-own": "^0.1.3",
+        "is-plain-object": "^2.0.1",
+        "kind-of": "^3.0.2",
+        "lazy-cache": "^1.0.3",
+        "shallow-clone": "^0.1.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/clsx": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
@@ -6281,7 +6630,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "color-name": "~1.1.4"
@@ -6294,7 +6642,6 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/combined-stream": {
@@ -6329,7 +6676,6 @@
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/confbox": {
@@ -6537,6 +6883,15 @@
       "dev": true,
       "license": "BSD-2-Clause"
     },
+    "node_modules/data-uri-to-buffer": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-6.0.2.tgz",
+      "integrity": "sha512-7hvf7/GW8e86rW0ptuwS3OcBGDjIi6SZva7hCyWC0yYry2cOPmLIjXAUHI6DK2HsnwJd9ifmt57i8eV2n4YNpw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/data-view-buffer": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.2.tgz",
@@ -6656,6 +7011,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/deepmerge": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
+      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/deepmerge-ts": {
       "version": "7.1.5",
       "resolved": "https://registry.npmjs.org/deepmerge-ts/-/deepmerge-ts-7.1.5.tgz",
@@ -6707,6 +7071,20 @@
       "integrity": "sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==",
       "license": "MIT"
     },
+    "node_modules/degenerator": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/degenerator/-/degenerator-5.0.1.tgz",
+      "integrity": "sha512-TllpMR/t0M5sqCXfj85i4XaAzxmS5tVA16dqvdkMwGmzI+dXLXnw3J+3Vdv7VKw+ThlTMboK6i9rnZ6Nntj5CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ast-types": "^0.13.4",
+        "escodegen": "^2.1.0",
+        "esprima": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -6716,6 +7094,15 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/denque": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/denque/-/denque-2.1.0.tgz",
+      "integrity": "sha512-HVQE3AAb/pxF8fQAoiqpvg9i3evqug3hoiwakOyZAwJm+6vZehbkYXZ0l4JxS+I3QxM97v5aaRNhj8v5oBhekw==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/dequal": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
@@ -6759,6 +7146,18 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/devtools-protocol": {
+      "version": "0.0.1581282",
+      "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1581282.tgz",
+      "integrity": "sha512-nv7iKtNZQshSW2hKzYNr46nM/Cfh5SEvE2oV0/SEGgc9XupIY5ggf84Cz8eJIkBce7S3bmTAauFD6aysMpnqsQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/dfa": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/dfa/-/dfa-1.2.0.tgz",
+      "integrity": "sha512-ED3jP8saaweFTjeGX8HQPjeC1YYyZs98jGNZx6IiBvxW7JG5v492kamAQB3m2wop07CvU/RQmzcKr6bgcC5D/Q==",
+      "license": "MIT"
+    },
     "node_modules/diff": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/diff/-/diff-5.2.0.tgz",
@@ -6839,6 +7238,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/ecdsa-sig-formatter": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
+      "integrity": "sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "safe-buffer": "^5.0.1"
+      }
+    },
     "node_modules/effect": {
       "version": "3.16.12",
       "resolved": "https://registry.npmjs.org/effect/-/effect-3.16.12.tgz",
@@ -6893,6 +7301,15 @@
         "node": ">=14"
       }
     },
+    "node_modules/end-of-stream": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.5.tgz",
+      "integrity": "sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg==",
+      "license": "MIT",
+      "dependencies": {
+        "once": "^1.4.0"
+      }
+    },
     "node_modules/engine.io": {
       "version": "6.6.4",
       "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-6.6.4.tgz",
@@ -7237,6 +7654,15 @@
         "@esbuild/win32-x64": "0.25.10"
       }
     },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/escape-carriage": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/escape-carriage/-/escape-carriage-1.3.1.tgz",
@@ -7256,6 +7682,27 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/escodegen": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-2.1.0.tgz",
+      "integrity": "sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "esprima": "^4.0.1",
+        "estraverse": "^5.2.0",
+        "esutils": "^2.0.2"
+      },
+      "bin": {
+        "escodegen": "bin/escodegen.js",
+        "esgenerate": "bin/esgenerate.js"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "optionalDependencies": {
+        "source-map": "~0.6.1"
+      }
+    },
     "node_modules/eslint": {
       "version": "9.37.0",
       "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.37.0.tgz",
@@ -7661,6 +8108,19 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/esprima": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+      "license": "BSD-2-Clause",
+      "bin": {
+        "esparse": "bin/esparse.js",
+        "esvalidate": "bin/esvalidate.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/esquery": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz",
@@ -7691,7 +8151,6 @@
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
       "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
-      "dev": true,
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=4.0"
@@ -7725,7 +8184,6 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
       "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
-      "dev": true,
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -7747,6 +8205,15 @@
       "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
       "license": "MIT"
     },
+    "node_modules/events-universal": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/events-universal/-/events-universal-1.0.1.tgz",
+      "integrity": "sha512-LUd5euvbMLpwOF8m6ivPCbhQeSiYVNb8Vs0fQ8QjXo0JTkEHpz8pxdQf0gStltaPpw0Cca8b39KxvK9cfKRiAw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "bare-events": "^2.7.0"
+      }
+    },
     "node_modules/exsolve": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/exsolve/-/exsolve-1.0.7.tgz",
@@ -7768,6 +8235,26 @@
       "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
       "license": "MIT"
     },
+    "node_modules/extract-zip": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.1.tgz",
+      "integrity": "sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "debug": "^4.1.1",
+        "get-stream": "^5.1.0",
+        "yauzl": "^2.10.0"
+      },
+      "bin": {
+        "extract-zip": "cli.js"
+      },
+      "engines": {
+        "node": ">= 10.17.0"
+      },
+      "optionalDependencies": {
+        "@types/yauzl": "^2.9.1"
+      }
+    },
     "node_modules/fast-check": {
       "version": "3.23.2",
       "resolved": "https://registry.npmjs.org/fast-check/-/fast-check-3.23.2.tgz",
@@ -7794,7 +8281,6 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/fast-equals": {
@@ -7806,6 +8292,12 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/fast-fifo": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/fast-fifo/-/fast-fifo-1.3.2.tgz",
+      "integrity": "sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ==",
+      "license": "MIT"
+    },
     "node_modules/fast-glob": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz",
@@ -7850,6 +8342,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/fast-sha256": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/fast-sha256/-/fast-sha256-1.3.0.tgz",
+      "integrity": "sha512-n11RGP/lrWEFI/bWdygLxhI+pVeo1ZYIVwvvPkW7azl/rOy+F3HYRZ2K5zeE9mmkhQppyv9sQFx0JM9UabnpPQ==",
+      "license": "Unlicense"
+    },
     "node_modules/fastq": {
       "version": "1.19.1",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.1.tgz",
@@ -7873,6 +8371,15 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/fd-slicer": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
+      "integrity": "sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==",
+      "license": "MIT",
+      "dependencies": {
+        "pend": "~1.2.0"
+      }
+    },
     "node_modules/file-entry-cache": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
@@ -7957,6 +8464,23 @@
         }
       }
     },
+    "node_modules/fontkit": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/fontkit/-/fontkit-2.0.4.tgz",
+      "integrity": "sha512-syetQadaUEDNdxdugga9CpEYVaQIxOwk7GlwZWWZ19//qW4zE5bknOKeMBDYAASwnpaSHKJITRLMF9m1fp3s6g==",
+      "license": "MIT",
+      "dependencies": {
+        "@swc/helpers": "^0.5.12",
+        "brotli": "^1.3.2",
+        "clone": "^2.1.2",
+        "dfa": "^1.2.0",
+        "fast-deep-equal": "^3.1.3",
+        "restructure": "^3.0.0",
+        "tiny-inflate": "^1.0.3",
+        "unicode-properties": "^1.4.0",
+        "unicode-trie": "^2.0.0"
+      }
+    },
     "node_modules/for-each": {
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
@@ -7973,6 +8497,27 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/for-in": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
+      "integrity": "sha512-7EwmXrOjyL+ChxMhmG5lnW9MPt1aIeZEwKhQzoBUdTV0N3zuwWDZYVJatDvZ2OyzPUvdIAZDsCetk3coyMfcnQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/for-own": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/for-own/-/for-own-0.1.5.tgz",
+      "integrity": "sha512-SKmowqGTJoPzLO1T0BBJpkfp3EMacCMOuH40hOUbrbzElVktk4DioXVM99QkLCyKoiuOmyjgcWMpVz2xjE7LZw==",
+      "license": "MIT",
+      "dependencies": {
+        "for-in": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/form-data": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.4.tgz",
@@ -8024,6 +8569,26 @@
         }
       }
     },
+    "node_modules/fs-extra": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
+      "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
+      "license": "ISC"
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -8078,6 +8643,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/generate-function": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/generate-function/-/generate-function-2.3.1.tgz",
+      "integrity": "sha512-eeB5GfMNeevm/GRYq20ShmsaGcmI81kIX2K9XQx5miC8KdHaC6Jm0qQ8ZNeGOi7wYB8OsdxKs+Y2oVuTFuVwKQ==",
+      "license": "MIT",
+      "dependencies": {
+        "is-property": "^1.0.2"
+      }
+    },
     "node_modules/generator-function": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/generator-function/-/generator-function-2.0.1.tgz",
@@ -8088,6 +8662,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "license": "ISC",
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
     "node_modules/get-intrinsic": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
@@ -8134,6 +8717,21 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/get-stream": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
+      "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
+      "license": "MIT",
+      "dependencies": {
+        "pump": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/get-symbol-description": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.1.0.tgz",
@@ -8164,6 +8762,20 @@
         "url": "https://github.com/privatenumber/get-tsconfig?sponsor=1"
       }
     },
+    "node_modules/get-uri": {
+      "version": "6.0.5",
+      "resolved": "https://registry.npmjs.org/get-uri/-/get-uri-6.0.5.tgz",
+      "integrity": "sha512-b1O07XYq8eRuVzBNgJLstU6FYc1tS6wnMtF1I1D9lE8LxZSOGZ7LhxN54yPP6mGw5f2CkXY2BQUL9Fx41qvcIg==",
+      "license": "MIT",
+      "dependencies": {
+        "basic-ftp": "^5.0.2",
+        "data-uri-to-buffer": "^6.0.2",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/giget": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/giget/-/giget-2.0.0.tgz",
@@ -8181,6 +8793,27 @@
         "giget": "dist/cli.mjs"
       }
     },
+    "node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "deprecated": "Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me",
+      "license": "ISC",
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/glob-parent": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
@@ -8240,7 +8873,6 @@
       "version": "4.2.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/graphemer": {
@@ -8250,6 +8882,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/gsap": {
+      "version": "3.14.2",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.14.2.tgz",
+      "integrity": "sha512-P8/mMxVLU7o4+55+1TCnQrPmgjPKnwkzkXOK1asnR9Jg2lna4tEY5qBJjMmAaOBDDZWtlRjBXjLa0w53G/uBLA==",
+      "license": "Standard 'no charge' license: https://gsap.com/standard-license."
+    },
     "node_modules/has-bigints": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz",
@@ -8481,6 +9119,48 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/http-proxy-agent": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
+      "integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==",
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/https-proxy-agent": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.6.tgz",
+      "integrity": "sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==",
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.2",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/iconv-lite": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.7.2.tgz",
+      "integrity": "sha512-im9DjEDQ55s9fL4EYzOAv0yMqmMBSZp6G0VvFyTMPKWxiSBHUj9NW/qqLmXUwXrrM7AvqSlTCfvqRb0cM8yYqw==",
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
     "node_modules/ieee754": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
@@ -8545,6 +9225,23 @@
         "node": ">=0.8.19"
       }
     },
+    "node_modules/inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+      "deprecated": "This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.",
+      "license": "ISC",
+      "dependencies": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "license": "ISC"
+    },
     "node_modules/inline-style-parser": {
       "version": "0.2.4",
       "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.4.tgz",
@@ -8603,6 +9300,15 @@
         "tslib": "^2.8.0"
       }
     },
+    "node_modules/ip-address": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-10.1.0.tgz",
+      "integrity": "sha512-XXADHxXmvT9+CRxhXg56LJovE+bmWnEWB78LB83VZTprKTmaC5QfruXocxzTZ2Kl0DNwKuBdlIhjL8LeY8Sf8Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/is-alphabetical": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz",
@@ -8711,6 +9417,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-buffer": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
+      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
+      "license": "MIT"
+    },
     "node_modules/is-bun-module": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/is-bun-module/-/is-bun-module-2.0.0.tgz",
@@ -8795,6 +9507,15 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/is-extendable": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
+      "integrity": "sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -8821,6 +9542,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-generator-function": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.2.tgz",
@@ -8929,6 +9659,24 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/is-plain-object": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
+      "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
+      "license": "MIT",
+      "dependencies": {
+        "isobject": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-property": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-property/-/is-property-1.0.2.tgz",
+      "integrity": "sha512-Ks/IoX00TtClbGQr4TWXemAnktAQvYB7HzcCxDGqEZU6oCmb2INHuOoKxbtR+HFkmYWBKv/dOZtGRiAjDhj92g==",
+      "license": "MIT"
+    },
     "node_modules/is-regex": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
@@ -9088,6 +9836,15 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/isobject": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+      "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/isomorphic.js": {
       "version": "0.2.5",
       "resolved": "https://registry.npmjs.org/isomorphic.js/-/isomorphic.js-0.2.5.tgz",
@@ -9144,6 +9901,12 @@
         "node": ">=14"
       }
     },
+    "node_modules/js-md5": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/js-md5/-/js-md5-0.8.3.tgz",
+      "integrity": "sha512-qR0HB5uP6wCuRMrWPTrkMaev7MJZwJuuw4fnwAzRgP4J4/F8RwtodOKpGp4XpqsLBFzzgqIO42efFAyz2Et6KQ==",
+      "license": "MIT"
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -9196,6 +9959,40 @@
         "json5": "lib/cli.js"
       }
     },
+    "node_modules/jsonfile": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.2.0.tgz",
+      "integrity": "sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==",
+      "license": "MIT",
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/jsonwebtoken": {
+      "version": "9.0.3",
+      "resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-9.0.3.tgz",
+      "integrity": "sha512-MT/xP0CrubFRNLNKvxJ2BYfy53Zkm++5bX9dtuPbqAeQpTVe0MQTFhao8+Cp//EmJp244xt6Drw/GVEGCUj40g==",
+      "license": "MIT",
+      "dependencies": {
+        "jws": "^4.0.1",
+        "lodash.includes": "^4.3.0",
+        "lodash.isboolean": "^3.0.3",
+        "lodash.isinteger": "^4.0.4",
+        "lodash.isnumber": "^3.0.3",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.isstring": "^4.0.1",
+        "lodash.once": "^4.0.0",
+        "ms": "^2.1.1",
+        "semver": "^7.5.4"
+      },
+      "engines": {
+        "node": ">=12",
+        "npm": ">=6"
+      }
+    },
     "node_modules/jsx-ast-utils": {
       "version": "3.3.5",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
@@ -9212,6 +10009,27 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/jwa": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/jwa/-/jwa-2.0.1.tgz",
+      "integrity": "sha512-hRF04fqJIP8Abbkq5NKGN0Bbr3JxlQ+qhZufXVr0DvujKy93ZCbXZMHDL4EOtodSbCWxOqR8MS1tXA5hwqCXDg==",
+      "license": "MIT",
+      "dependencies": {
+        "buffer-equal-constant-time": "^1.0.1",
+        "ecdsa-sig-formatter": "1.0.11",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "node_modules/jws": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/jws/-/jws-4.0.1.tgz",
+      "integrity": "sha512-EKI/M/yqPncGUUh44xz0PxSidXFr/+r0pA70+gIYhjv+et7yxM+s29Y+VGDkovRofQem0fs7Uvf4+YmAdyRduA==",
+      "license": "MIT",
+      "dependencies": {
+        "jwa": "^2.0.1",
+        "safe-buffer": "^5.0.1"
+      }
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -9222,6 +10040,18 @@
         "json-buffer": "3.0.1"
       }
     },
+    "node_modules/kind-of": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+      "integrity": "sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==",
+      "license": "MIT",
+      "dependencies": {
+        "is-buffer": "^1.1.5"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/kleur": {
       "version": "4.1.5",
       "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
@@ -9251,6 +10081,41 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/lazy-cache": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-1.0.4.tgz",
+      "integrity": "sha512-RE2g0b5VGZsOCFOCgP7omTRYFqydmZkBwl5oNnQ1lDYC57uyO9KqNnNVxT7COSHTxrRCWVcAVOcbjk+tvh/rgQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/lenis": {
+      "version": "1.3.18",
+      "resolved": "https://registry.npmjs.org/lenis/-/lenis-1.3.18.tgz",
+      "integrity": "sha512-7KBl3V7vx5y1h05pu9fNFZS66I0+1eZ+zUGNNNBKtEn3BONZy+nkHWvdEe2b+zKT+6WX1x7zyOb1zbYYOs6tcg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/darkroomengineering"
+      },
+      "peerDependencies": {
+        "@nuxt/kit": ">=3.0.0",
+        "react": ">=17.0.0",
+        "vue": ">=3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@nuxt/kit": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "vue": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -9532,6 +10397,25 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/linebreak": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/linebreak/-/linebreak-1.1.0.tgz",
+      "integrity": "sha512-MHp03UImeVhB7XZtjd0E4n6+3xr5Dq/9xI/5FptGk5FrbDR3zagPa2DS6U8ks/3HjbKWG9Q1M2ufOzxV2qLYSQ==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "0.0.8",
+        "unicode-trie": "^2.0.0"
+      }
+    },
+    "node_modules/linebreak/node_modules/base64-js": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-0.0.8.tgz",
+      "integrity": "sha512-3XSA2cR/h/73EzlXXdU6YNycmYI7+kicTxks4eJg2g39biHR84slg2+des+p7iHYhbRg/udIS4TD53WabcOUkw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -9560,6 +10444,42 @@
       "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
       "license": "MIT"
     },
+    "node_modules/lodash.includes": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
+      "integrity": "sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isboolean": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz",
+      "integrity": "sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isinteger": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz",
+      "integrity": "sha512-DBwtEWN2caHQ9/imiNeEA5ys1JoRtRfY3d7V9wkqtbycnAmTvRRmbHKDV4a0EYc678/dia0jrte4tjYwVBaZUA==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isnumber": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz",
+      "integrity": "sha512-QYqzpfwO3/CWf3XP+Z+tkQsfaLL/EnUlXWVkIk5FUPc4sBdTehEqZONuyRt2P67PXAk+NXmTBcc97zw9t1FQrw==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isstring": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
+      "integrity": "sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw==",
+      "license": "MIT"
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -9567,6 +10487,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/lodash.once": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
+      "integrity": "sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==",
+      "license": "MIT"
+    },
+    "node_modules/long": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/long/-/long-5.3.2.tgz",
+      "integrity": "sha512-mNAgZ1GmyNhD7AuqnTG3/VQ26o760+ZYBPKjPvugO8+nLbYfX6TVpJPseBvopbdY+qpZ/lKUnmEc1LeZYS3QAA==",
+      "license": "Apache-2.0"
+    },
     "node_modules/longest-streak": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-3.1.0.tgz",
@@ -9628,6 +10560,21 @@
         "node": ">=10"
       }
     },
+    "node_modules/lru.min": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/lru.min/-/lru.min-1.1.4.tgz",
+      "integrity": "sha512-DqC6n3QQ77zdFpCMASA1a3Jlb64Hv2N2DciFGkO/4L9+q/IpIAuRlKOvCXabtRW6cQf8usbmM6BE/TOPysCdIA==",
+      "license": "MIT",
+      "engines": {
+        "bun": ">=1.0.0",
+        "deno": ">=1.30.0",
+        "node": ">=8.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wellwelwel"
+      }
+    },
     "node_modules/lucide-react": {
       "version": "0.525.0",
       "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.525.0.tgz",
@@ -9953,6 +10900,20 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/merge-deep": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/merge-deep/-/merge-deep-3.0.3.tgz",
+      "integrity": "sha512-qtmzAS6t6grwEkNrunqTBdn0qKwFgNWvlxUbAV8es9M7Ot1EbyApytCnvE0jALPa46ZpKDUo527kKiaWplmlFA==",
+      "license": "MIT",
+      "dependencies": {
+        "arr-union": "^3.1.0",
+        "clone-deep": "^0.2.4",
+        "kind-of": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -10708,7 +11669,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
       "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "brace-expansion": "^1.1.7"
@@ -10750,6 +11710,34 @@
         "node": ">= 18"
       }
     },
+    "node_modules/mitt": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
+      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
+      "license": "MIT"
+    },
+    "node_modules/mixin-object": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mixin-object/-/mixin-object-2.0.1.tgz",
+      "integrity": "sha512-ALGF1Jt9ouehcaXaHhn6t1yGWRqGaHkPFndtFVHfZXOvkIZ/yoGaSi0AHVTafb3ZBGg4dr/bDwnaEKqCXzchMA==",
+      "license": "MIT",
+      "dependencies": {
+        "for-in": "^0.1.3",
+        "is-extendable": "^0.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/mixin-object/node_modules/for-in": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/for-in/-/for-in-0.1.8.tgz",
+      "integrity": "sha512-F0to7vbBSHP8E3l6dCjxNOLuSFAACIxFy3UehTUlG7svlXi37HHsDkyVcHo0Pq8QwrE+pXvWSVX3ZT1T9wAZ9g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/motion-dom": {
       "version": "12.23.23",
       "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.23.tgz",
@@ -10780,6 +11768,40 @@
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
       "license": "MIT"
     },
+    "node_modules/mysql2": {
+      "version": "3.20.0",
+      "resolved": "https://registry.npmjs.org/mysql2/-/mysql2-3.20.0.tgz",
+      "integrity": "sha512-eCLUs7BNbgA6nf/MZXsaBO1SfGs0LtLVrJD3WeWq+jPLDWkSufTD+aGMwykfUVPdZnblaUK1a8G/P63cl9FkKg==",
+      "license": "MIT",
+      "dependencies": {
+        "aws-ssl-profiles": "^1.1.2",
+        "denque": "^2.1.0",
+        "generate-function": "^2.3.1",
+        "iconv-lite": "^0.7.2",
+        "long": "^5.3.2",
+        "lru.min": "^1.1.4",
+        "named-placeholders": "^1.1.6",
+        "sql-escaper": "^1.3.3"
+      },
+      "engines": {
+        "node": ">= 8.0"
+      },
+      "peerDependencies": {
+        "@types/node": ">= 8"
+      }
+    },
+    "node_modules/named-placeholders": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/named-placeholders/-/named-placeholders-1.1.6.tgz",
+      "integrity": "sha512-Tz09sEL2EEuv5fFowm419c1+a/jSMiBjI9gHxVLrVdbUkkNUUfjsVYs9pVZu5oCon/kmRh9TfLEObFtkVxmY0w==",
+      "license": "MIT",
+      "dependencies": {
+        "lru.min": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.11",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
@@ -10830,6 +11852,15 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/netmask": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/netmask/-/netmask-2.0.2.tgz",
+      "integrity": "sha512-dBpDMdxv9Irdq66304OLfEmQ9tbNRFnFTuZiLo+bD+r332bBmMJ8GBLXklIXXgxd3+v9+KUnZaUR5PJMa75Gsg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
     "node_modules/next": {
       "version": "15.3.5",
       "resolved": "https://registry.npmjs.org/next/-/next-15.3.5.tgz",
@@ -11002,6 +12033,15 @@
       "integrity": "sha512-g9yhqoedzIUm0nTnTqAQvueMPVOuIY16bqgAJJC8XOOubYFNwz6IER9qs0Gq2Xd0+CecCKFjtdDTMA4u4xG06Q==",
       "license": "MIT"
     },
+    "node_modules/nodemailer": {
+      "version": "6.10.1",
+      "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-6.10.1.tgz",
+      "integrity": "sha512-Z+iLaBGVaSjbIzQ4pX6XV41HrooLsQ10ZWPUehGmuantvzWoDVBnmsdUcOIDM1t+yPor5pDhVlDESgOMEGxhHA==",
+      "license": "MIT-0",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/nodemon": {
       "version": "3.1.10",
       "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-3.1.10.tgz",
@@ -11235,6 +12275,15 @@
         "node": "^10.13.0 || >=12.0.0"
       }
     },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "license": "ISC",
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
     "node_modules/openid-client": {
       "version": "5.7.1",
       "resolved": "https://registry.npmjs.org/openid-client/-/openid-client-5.7.1.tgz",
@@ -11324,6 +12373,44 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/pac-proxy-agent": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/pac-proxy-agent/-/pac-proxy-agent-7.2.0.tgz",
+      "integrity": "sha512-TEB8ESquiLMc0lV8vcd5Ql/JAKAoyzHFXaStwjkzpOpC5Yv+pIzLfHvjTSdf3vpa2bMiUQrg9i6276yn8666aA==",
+      "license": "MIT",
+      "dependencies": {
+        "@tootallnate/quickjs-emscripten": "^0.23.0",
+        "agent-base": "^7.1.2",
+        "debug": "^4.3.4",
+        "get-uri": "^6.0.1",
+        "http-proxy-agent": "^7.0.0",
+        "https-proxy-agent": "^7.0.6",
+        "pac-resolver": "^7.0.1",
+        "socks-proxy-agent": "^8.0.5"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/pac-resolver": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/pac-resolver/-/pac-resolver-7.0.1.tgz",
+      "integrity": "sha512-5NPgf87AT2STgwa2ntRMr45jTKrYBGkVU36yT0ig/n/GMAa3oPqhZfIQ2kMEimReg0+t9kZViDVZ83qfVUlckg==",
+      "license": "MIT",
+      "dependencies": {
+        "degenerator": "^5.0.0",
+        "netmask": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/pako": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-0.2.9.tgz",
+      "integrity": "sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==",
+      "license": "MIT"
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -11372,6 +12459,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/path-key": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
@@ -11395,6 +12491,26 @@
       "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
       "license": "MIT"
     },
+    "node_modules/pdfkit": {
+      "version": "0.18.0",
+      "resolved": "https://registry.npmjs.org/pdfkit/-/pdfkit-0.18.0.tgz",
+      "integrity": "sha512-NvUwSDZ0eYEzqAiWwVQkRkjYUkZ48kcsHuCO31ykqPPIVkwoSDjDGiwIgHHNtsiwls3z3P/zy4q00hl2chg2Ug==",
+      "license": "MIT",
+      "dependencies": {
+        "@noble/ciphers": "^1.0.0",
+        "@noble/hashes": "^1.6.0",
+        "fontkit": "^2.0.4",
+        "js-md5": "^0.8.3",
+        "linebreak": "^1.1.0",
+        "png-js": "^1.0.0"
+      }
+    },
+    "node_modules/pend": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
+      "integrity": "sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==",
+      "license": "MIT"
+    },
     "node_modules/perfect-debounce": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-1.0.0.tgz",
@@ -11431,6 +12547,11 @@
         "pathe": "^2.0.3"
       }
     },
+    "node_modules/png-js": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/png-js/-/png-js-1.0.0.tgz",
+      "integrity": "sha512-k+YsbhpA9e+EFfKjTCH3VW6aoKlyNYI6NYdTfDL4CIvFnvsuO84ttonmZE7rc+v23SLTH8XX+5w/Ak9v0xGY4g=="
+    },
     "node_modules/possible-typed-array-names": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
@@ -11441,6 +12562,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/postal-mime": {
+      "version": "2.7.3",
+      "resolved": "https://registry.npmjs.org/postal-mime/-/postal-mime-2.7.3.tgz",
+      "integrity": "sha512-MjhXadAJaWgYzevi46+3kLak8y6gbg0ku14O1gO/LNOuay8dO+1PtcSGvAdgDR0DoIsSaiIA8y/Ddw6MnrO0Tw==",
+      "license": "MIT-0"
+    },
     "node_modules/postcss": {
       "version": "8.5.6",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
@@ -11568,6 +12695,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/progress": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
+      "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -11595,27 +12731,240 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/proxy-from-env": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
-      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
-      "license": "MIT"
-    },
-    "node_modules/pstree.remy": {
-      "version": "1.1.8",
-      "resolved": "https://registry.npmjs.org/pstree.remy/-/pstree.remy-1.1.8.tgz",
-      "integrity": "sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/punycode": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
-      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
-      "dev": true,
+    "node_modules/proxy-agent": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/proxy-agent/-/proxy-agent-6.5.0.tgz",
+      "integrity": "sha512-TmatMXdr2KlRiA2CyDu8GqR8EjahTG3aY3nXjdzFyoZbmB8hrBsTyMezhULIXKnC0jpfjlmiZ3+EaCzoInSu/A==",
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.2",
+        "debug": "^4.3.4",
+        "http-proxy-agent": "^7.0.1",
+        "https-proxy-agent": "^7.0.6",
+        "lru-cache": "^7.14.1",
+        "pac-proxy-agent": "^7.1.0",
+        "proxy-from-env": "^1.1.0",
+        "socks-proxy-agent": "^8.0.5"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/proxy-agent/node_modules/lru-cache": {
+      "version": "7.18.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.18.3.tgz",
+      "integrity": "sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "license": "MIT"
+    },
+    "node_modules/pstree.remy": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/pstree.remy/-/pstree.remy-1.1.8.tgz",
+      "integrity": "sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/pump": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.4.tgz",
+      "integrity": "sha512-VS7sjc6KR7e1ukRFhQSY5LM2uBWAUPiOPa/A3mkKmiMwSmRFUITt0xuj+/lesgnCv+dPIEYlkzrcyXgquIHMcA==",
+      "license": "MIT",
+      "dependencies": {
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.1"
+      }
+    },
+    "node_modules/punycode": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/puppeteer-core": {
+      "version": "24.39.1",
+      "resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-24.39.1.tgz",
+      "integrity": "sha512-AMqQIKoEhPS6CilDzw0Gd1brLri3emkC+1N2J6ZCCuY1Cglo56M63S0jOeBZDQlemOiRd686MYVMl9ELJBzN3A==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@puppeteer/browsers": "2.13.0",
+        "chromium-bidi": "14.0.0",
+        "debug": "^4.4.3",
+        "devtools-protocol": "0.0.1581282",
+        "typed-query-selector": "^2.12.1",
+        "webdriver-bidi-protocol": "0.4.1",
+        "ws": "^8.19.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/puppeteer-core/node_modules/ws": {
+      "version": "8.19.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.19.0.tgz",
+      "integrity": "sha512-blAT2mjOEIi0ZzruJfIhb3nps74PRWTCz1IjglWEEpQl5XS/UNama6u2/rjFkDDouqr4L67ry+1aGIALViWjDg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/puppeteer-extra": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/puppeteer-extra/-/puppeteer-extra-3.3.6.tgz",
+      "integrity": "sha512-rsLBE/6mMxAjlLd06LuGacrukP2bqbzKCLzV1vrhHFavqQE/taQ2UXv3H5P0Ls7nsrASa+6x3bDbXHpqMwq+7A==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/debug": "^4.1.0",
+        "debug": "^4.1.1",
+        "deepmerge": "^4.2.2"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "peerDependencies": {
+        "@types/puppeteer": "*",
+        "puppeteer": "*",
+        "puppeteer-core": "*"
+      },
+      "peerDependenciesMeta": {
+        "@types/puppeteer": {
+          "optional": true
+        },
+        "puppeteer": {
+          "optional": true
+        },
+        "puppeteer-core": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/puppeteer-extra-plugin": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/puppeteer-extra-plugin/-/puppeteer-extra-plugin-3.2.3.tgz",
+      "integrity": "sha512-6RNy0e6pH8vaS3akPIKGg28xcryKscczt4wIl0ePciZENGE2yoaQJNd17UiEbdmh5/6WW6dPcfRWT9lxBwCi2Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/debug": "^4.1.0",
+        "debug": "^4.1.1",
+        "merge-deep": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=9.11.2"
+      },
+      "peerDependencies": {
+        "playwright-extra": "*",
+        "puppeteer-extra": "*"
+      },
+      "peerDependenciesMeta": {
+        "playwright-extra": {
+          "optional": true
+        },
+        "puppeteer-extra": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/puppeteer-extra-plugin-stealth": {
+      "version": "2.11.2",
+      "resolved": "https://registry.npmjs.org/puppeteer-extra-plugin-stealth/-/puppeteer-extra-plugin-stealth-2.11.2.tgz",
+      "integrity": "sha512-bUemM5XmTj9i2ZerBzsk2AN5is0wHMNE6K0hXBzBXOzP5m5G3Wl0RHhiqKeHToe/uIH8AoZiGhc1tCkLZQPKTQ==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.1.1",
+        "puppeteer-extra-plugin": "^3.2.3",
+        "puppeteer-extra-plugin-user-preferences": "^2.4.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "peerDependencies": {
+        "playwright-extra": "*",
+        "puppeteer-extra": "*"
+      },
+      "peerDependenciesMeta": {
+        "playwright-extra": {
+          "optional": true
+        },
+        "puppeteer-extra": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/puppeteer-extra-plugin-user-data-dir": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/puppeteer-extra-plugin-user-data-dir/-/puppeteer-extra-plugin-user-data-dir-2.4.1.tgz",
+      "integrity": "sha512-kH1GnCcqEDoBXO7epAse4TBPJh9tEpVEK/vkedKfjOVOhZAvLkHGc9swMs5ChrJbRnf8Hdpug6TJlEuimXNQ+g==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.1.1",
+        "fs-extra": "^10.0.0",
+        "puppeteer-extra-plugin": "^3.2.3",
+        "rimraf": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "peerDependencies": {
+        "playwright-extra": "*",
+        "puppeteer-extra": "*"
+      },
+      "peerDependenciesMeta": {
+        "playwright-extra": {
+          "optional": true
+        },
+        "puppeteer-extra": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/puppeteer-extra-plugin-user-preferences": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/puppeteer-extra-plugin-user-preferences/-/puppeteer-extra-plugin-user-preferences-2.4.1.tgz",
+      "integrity": "sha512-i1oAZxRbc1bk8MZufKCruCEC3CCafO9RKMkkodZltI4OqibLFXF3tj6HZ4LZ9C5vCXZjYcDWazgtY69mnmrQ9A==",
       "license": "MIT",
+      "dependencies": {
+        "debug": "^4.1.1",
+        "deepmerge": "^4.2.2",
+        "puppeteer-extra-plugin": "^3.2.3",
+        "puppeteer-extra-plugin-user-data-dir": "^2.4.1"
+      },
       "engines": {
-        "node": ">=6"
+        "node": ">=8"
+      },
+      "peerDependencies": {
+        "playwright-extra": "*",
+        "puppeteer-extra": "*"
+      },
+      "peerDependenciesMeta": {
+        "playwright-extra": {
+          "optional": true
+        },
+        "puppeteer-extra": {
+          "optional": true
+        }
       }
     },
     "node_modules/pure-rand": {
@@ -12152,6 +13501,36 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/resend": {
+      "version": "6.9.4",
+      "resolved": "https://registry.npmjs.org/resend/-/resend-6.9.4.tgz",
+      "integrity": "sha512-/M3dsJzu5OgozqVsA4Psd/1L7EdePgOIIxClas453GOQYFG3VHc2ZyCHZFlvqsc9aZCCd2BJRRqZgWC8D9c7/g==",
+      "license": "MIT",
+      "dependencies": {
+        "postal-mime": "2.7.3",
+        "svix": "1.86.0"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "peerDependencies": {
+        "@react-email/render": "*"
+      },
+      "peerDependenciesMeta": {
+        "@react-email/render": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/resolve": {
       "version": "1.22.10",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
@@ -12192,6 +13571,12 @@
         "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
       }
     },
+    "node_modules/restructure": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/restructure/-/restructure-3.0.2.tgz",
+      "integrity": "sha512-gSfoiOEA0VPE6Tukkrr7I0RBdE0s7H1eFCDBk05l1KIQT1UIKNc5JZy6jdyW6eYH3aR3g5b3PuL77rq0hvwtAw==",
+      "license": "MIT"
+    },
     "node_modules/reusify": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
@@ -12203,6 +13588,22 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/rimraf": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+      "deprecated": "Rimraf versions prior to v4 are no longer supported",
+      "license": "ISC",
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -12259,6 +13660,26 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/safe-push-apply": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/safe-push-apply/-/safe-push-apply-1.0.0.tgz",
@@ -12294,6 +13715,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "license": "MIT"
+    },
     "node_modules/scheduler": {
       "version": "0.27.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
@@ -12313,9 +13740,9 @@
       }
     },
     "node_modules/semver": {
-      "version": "7.7.3",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
-      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
+      "version": "7.7.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
       "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
@@ -12373,6 +13800,42 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/shallow-clone": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-0.1.2.tgz",
+      "integrity": "sha512-J1zdXCky5GmNnuauESROVu31MQSnLoYvlyEn6j2Ztk6Q5EHFIhxkMhYcv6vuDzl2XEzoRr856QwzMgWM/TmZgw==",
+      "license": "MIT",
+      "dependencies": {
+        "is-extendable": "^0.1.1",
+        "kind-of": "^2.0.1",
+        "lazy-cache": "^0.2.3",
+        "mixin-object": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/shallow-clone/node_modules/kind-of": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-2.0.1.tgz",
+      "integrity": "sha512-0u8i1NZ/mg0b+W3MGGw5I7+6Eib2nx72S/QvXa0hYjEkjTknYmEYQJwGu3mLC0BrhtJjtQafTkyRUQ75Kx0LVg==",
+      "license": "MIT",
+      "dependencies": {
+        "is-buffer": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/shallow-clone/node_modules/lazy-cache": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-0.2.7.tgz",
+      "integrity": "sha512-gkX52wvU/R8DVMMt78ATVPFMJqfW8FPz1GZ1sVHBVQHmu/WvhIWE4cE1GBzhJNFicDeYhnwp6Rl35BcAIM3YOQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/sharp": {
       "version": "0.34.4",
       "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.4.tgz",
@@ -12527,6 +13990,16 @@
         "node": ">=10"
       }
     },
+    "node_modules/smart-buffer": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.2.0.tgz",
+      "integrity": "sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6.0.0",
+        "npm": ">= 3.0.0"
+      }
+    },
     "node_modules/socket.io": {
       "version": "4.8.1",
       "resolved": "https://registry.npmjs.org/socket.io/-/socket.io-4.8.1.tgz",
@@ -12651,6 +14124,34 @@
         }
       }
     },
+    "node_modules/socks": {
+      "version": "2.8.7",
+      "resolved": "https://registry.npmjs.org/socks/-/socks-2.8.7.tgz",
+      "integrity": "sha512-HLpt+uLy/pxB+bum/9DzAgiKS8CX1EvbWxI4zlmgGCExImLdiad2iCwXT5Z4c9c3Eq8rP2318mPW2c+QbtjK8A==",
+      "license": "MIT",
+      "dependencies": {
+        "ip-address": "^10.0.1",
+        "smart-buffer": "^4.2.0"
+      },
+      "engines": {
+        "node": ">= 10.0.0",
+        "npm": ">= 3.0.0"
+      }
+    },
+    "node_modules/socks-proxy-agent": {
+      "version": "8.0.5",
+      "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-8.0.5.tgz",
+      "integrity": "sha512-HehCEsotFqbPW9sJ8WVYB6UbmIMv7kUUORIF2Nncq4VQvBfNBLibW9YZR5dlYCSUhwcD628pRllm7n+E+YTzJw==",
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.2",
+        "debug": "^4.3.4",
+        "socks": "^2.8.3"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/sonner": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/sonner/-/sonner-2.0.7.tgz",
@@ -12661,6 +14162,16 @@
         "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc"
       }
     },
+    "node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "license": "BSD-3-Clause",
+      "optional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -12680,6 +14191,21 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/sql-escaper": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/sql-escaper/-/sql-escaper-1.3.3.tgz",
+      "integrity": "sha512-BsTCV265VpTp8tm1wyIm1xqQCS+Q9NHx2Sr+WcnUrgLrQ6yiDIvHYJV5gHxsj1lMBy2zm5twLaZao8Jd+S8JJw==",
+      "license": "MIT",
+      "engines": {
+        "bun": ">=1.0.0",
+        "deno": ">=2.0.0",
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/mysqljs/sql-escaper?sponsor=1"
+      }
+    },
     "node_modules/stable-hash": {
       "version": "0.0.5",
       "resolved": "https://registry.npmjs.org/stable-hash/-/stable-hash-0.0.5.tgz",
@@ -12687,6 +14213,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/standardwebhooks": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/standardwebhooks/-/standardwebhooks-1.0.0.tgz",
+      "integrity": "sha512-BbHGOQK9olHPMvQNHWul6MYlrRTAOKn03rOe4A8O3CLWhNf4YHBqq2HJKKC+sfqpxiBY52pNeesD6jIiLDz8jg==",
+      "license": "MIT",
+      "dependencies": {
+        "@stablelib/base64": "^1.0.0",
+        "fast-sha256": "^1.3.0"
+      }
+    },
     "node_modules/static-browser-server": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/static-browser-server/-/static-browser-server-1.0.3.tgz",
@@ -12721,12 +14257,43 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/streamx": {
+      "version": "2.23.0",
+      "resolved": "https://registry.npmjs.org/streamx/-/streamx-2.23.0.tgz",
+      "integrity": "sha512-kn+e44esVfn2Fa/O0CPFcex27fjIL6MkVae0Mm6q+E6f0hWv578YCERbv+4m02cjxvDsPKLnmxral/rR6lBMAg==",
+      "license": "MIT",
+      "dependencies": {
+        "events-universal": "^1.0.0",
+        "fast-fifo": "^1.3.2",
+        "text-decoder": "^1.1.0"
+      }
+    },
     "node_modules/strict-event-emitter": {
       "version": "0.4.6",
       "resolved": "https://registry.npmjs.org/strict-event-emitter/-/strict-event-emitter-0.4.6.tgz",
       "integrity": "sha512-12KWeb+wixJohmnwNFerbyiBrAlq5qJLwIt38etRtKtmmHyDSoGlIqFE9wx+4IwG0aDjI7GV8tc8ZccjWZZtTg==",
       "license": "MIT"
     },
+    "node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT"
+    },
     "node_modules/string.prototype.includes": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/string.prototype.includes/-/string.prototype.includes-2.0.1.tgz",
@@ -12854,6 +14421,18 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/strip-bom": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
@@ -12950,6 +14529,29 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/svix": {
+      "version": "1.86.0",
+      "resolved": "https://registry.npmjs.org/svix/-/svix-1.86.0.tgz",
+      "integrity": "sha512-/HTvXwjLJe1l/MsLXAO1ddCYxElJk4eNR4DzOjDOEmGrPN/3BtBE8perGwMAaJ2sT5T172VkBYzmHcjUfM1JRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "standardwebhooks": "1.0.0",
+        "uuid": "^10.0.0"
+      }
+    },
+    "node_modules/svix/node_modules/uuid": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-10.0.0.tgz",
+      "integrity": "sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "license": "MIT",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/tabbable": {
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
@@ -13012,6 +14614,32 @@
         "node": ">=18"
       }
     },
+    "node_modules/tar-fs": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-3.1.2.tgz",
+      "integrity": "sha512-QGxxTxxyleAdyM3kpFs14ymbYmNFrfY+pHj7Z8FgtbZ7w2//VAgLMac7sT6nRpIHjppXO2AwwEOg0bPFVRcmXw==",
+      "license": "MIT",
+      "dependencies": {
+        "pump": "^3.0.0",
+        "tar-stream": "^3.1.5"
+      },
+      "optionalDependencies": {
+        "bare-fs": "^4.0.1",
+        "bare-path": "^3.0.0"
+      }
+    },
+    "node_modules/tar-stream": {
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-3.1.8.tgz",
+      "integrity": "sha512-U6QpVRyCGHva435KoNWy9PRoi2IFYCgtEhq9nmrPPpbRacPs9IH4aJ3gbrFC8dPcXvdSZ4XXfXT5Fshbp2MtlQ==",
+      "license": "MIT",
+      "dependencies": {
+        "b4a": "^1.6.4",
+        "bare-fs": "^4.5.5",
+        "fast-fifo": "^1.2.0",
+        "streamx": "^2.15.0"
+      }
+    },
     "node_modules/tar/node_modules/yallist": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-5.0.0.tgz",
@@ -13022,6 +14650,30 @@
         "node": ">=18"
       }
     },
+    "node_modules/teex": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/teex/-/teex-1.0.1.tgz",
+      "integrity": "sha512-eYE6iEI62Ni1H8oIa7KlDU6uQBtqr4Eajni3wX7rpfXD8ysFx8z0+dri+KWEPWpBsxXfxu58x/0jvTVT1ekOSg==",
+      "license": "MIT",
+      "dependencies": {
+        "streamx": "^2.12.5"
+      }
+    },
+    "node_modules/text-decoder": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/text-decoder/-/text-decoder-1.2.7.tgz",
+      "integrity": "sha512-vlLytXkeP4xvEq2otHeJfSQIRyWxo/oZGEbXrtEEF9Hnmrdly59sUbzZ/QgyWuLYHctCHxFF4tRQZNQ9k60ExQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "b4a": "^1.6.4"
+      }
+    },
+    "node_modules/tiny-inflate": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-inflate/-/tiny-inflate-1.0.3.tgz",
+      "integrity": "sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==",
+      "license": "MIT"
+    },
     "node_modules/tiny-invariant": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
@@ -13289,6 +14941,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/typed-query-selector": {
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/typed-query-selector/-/typed-query-selector-2.12.1.tgz",
+      "integrity": "sha512-uzR+FzI8qrUEIu96oaeBJmd9E7CFEiQ3goA5qCVgc4s5llSubcfGHq9yUstZx/k4s9dXHVKsE35YWoFyvEqEHA==",
+      "license": "MIT"
+    },
     "node_modules/typescript": {
       "version": "5.9.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
@@ -13335,6 +14993,26 @@
       "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
       "license": "MIT"
     },
+    "node_modules/unicode-properties": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/unicode-properties/-/unicode-properties-1.4.1.tgz",
+      "integrity": "sha512-CLjCCLQ6UuMxWnbIylkisbRj31qxHPAurvena/0iwSVbQ2G1VY5/HjV0IRabOEbDHlzZlRdCrD4NhB0JtU40Pg==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.3.0",
+        "unicode-trie": "^2.0.0"
+      }
+    },
+    "node_modules/unicode-trie": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unicode-trie/-/unicode-trie-2.0.0.tgz",
+      "integrity": "sha512-x7bc76x0bm4prf1VLg79uhAzKw8DVboClSN5VxJuQ+LKDOVEW9CdH+VY7SP+vX7xCYQqzzgQpFqz15zeLvAtZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "pako": "^0.2.5",
+        "tiny-inflate": "^1.0.0"
+      }
+    },
     "node_modules/unidiff": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/unidiff/-/unidiff-1.0.4.tgz",
@@ -13444,6 +15122,15 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
     "node_modules/unrs-resolver": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/unrs-resolver/-/unrs-resolver-1.11.1.tgz",
@@ -13664,6 +15351,12 @@
       "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==",
       "license": "MIT"
     },
+    "node_modules/webdriver-bidi-protocol": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/webdriver-bidi-protocol/-/webdriver-bidi-protocol-0.4.1.tgz",
+      "integrity": "sha512-ARrjNjtWRRs2w4Tk7nqrf2gBI0QXWuOmMCx2hU+1jUt6d00MjMxURrhxhGbrsoiZKJrhTSTzbIrc554iKI10qw==",
+      "license": "Apache-2.0"
+    },
     "node_modules/webidl-conversions": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
@@ -13795,6 +15488,29 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "license": "ISC"
+    },
     "node_modules/ws": {
       "version": "8.17.1",
       "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz",
@@ -13833,12 +15549,58 @@
         "node": ">=0.4"
       }
     },
+    "node_modules/y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
       "license": "ISC"
     },
+    "node_modules/yargs": {
+      "version": "17.7.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+      "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^8.0.1",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.3",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^21.1.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "21.1.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/yauzl": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz",
+      "integrity": "sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g==",
+      "license": "MIT",
+      "dependencies": {
+        "buffer-crc32": "~0.2.3",
+        "fd-slicer": "~1.1.0"
+      }
+    },
     "node_modules/yjs": {
       "version": "13.6.27",
       "resolved": "https://registry.npmjs.org/yjs/-/yjs-13.6.27.tgz",
diff --git a/package.json b/package.json
index 11d18da..208d3dd 100644
--- a/package.json
+++ b/package.json
@@ -51,19 +51,29 @@
     "@tanstack/react-query": "^5.82.0",
     "@tanstack/react-table": "^8.21.3",
     "axios": "^1.10.0",
+    "bcryptjs": "^3.0.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "date-fns": "^4.1.0",
     "embla-carousel-react": "^8.6.0",
     "framer-motion": "^12.23.2",
+    "gsap": "^3.14.2",
     "input-otp": "^1.4.2",
+    "jsonwebtoken": "^9.0.3",
+    "lenis": "^1.3.18",
     "lucide-react": "^0.525.0",
+    "mysql2": "^3.20.0",
     "next": "15.3.5",
     "next-auth": "^4.24.11",
     "next-intl": "^4.3.4",
     "next-themes": "^0.4.6",
+    "nodemailer": "^6.10.1",
+    "pdfkit": "^0.18.0",
     "prisma": "^6.11.1",
+    "puppeteer-core": "^24.39.1",
+    "puppeteer-extra": "^3.3.6",
+    "puppeteer-extra-plugin-stealth": "^2.11.2",
     "react": "^19.0.0",
     "react-day-picker": "^9.8.0",
     "react-dom": "^19.0.0",
@@ -72,6 +82,7 @@
     "react-resizable-panels": "^3.0.3",
     "react-syntax-highlighter": "^15.6.1",
     "recharts": "^2.15.4",
+    "resend": "^6.9.4",
     "sharp": "^0.34.3",
     "socket.io": "^4.8.1",
     "socket.io-client": "^4.8.1",
@@ -88,7 +99,10 @@
   "devDependencies": {
     "@eslint/eslintrc": "^3",
     "@tailwindcss/postcss": "^4",
+    "@types/bcryptjs": "^2.4.6",
+    "@types/jsonwebtoken": "^9.0.10",
     "@types/node": "^20",
+    "@types/nodemailer": "^7.0.11",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "eslint": "^9",
diff --git a/public/ebooks/budget-luxury-travel.pdf b/public/ebooks/budget-luxury-travel.pdf
new file mode 100644
index 0000000..7142574
Binary files /dev/null and b/public/ebooks/budget-luxury-travel.pdf differ
diff --git a/public/favicon.svg b/public/favicon.svg
new file mode 100644
index 0000000..8c73bab
--- /dev/null
+++ b/public/favicon.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none">
+  <rect width="64" height="64" rx="14" fill="url(#g)"/>
+  <defs>
+    <linearGradient id="g" x1="0" y1="0" x2="64" y2="64">
+      <stop offset="0%" stop-color="#F97316"/>
+      <stop offset="100%" stop-color="#EF4444"/>
+    </linearGradient>
+  </defs>
+  <!-- Palm tree -->
+  <path d="M32 52V30" stroke="white" stroke-width="3" stroke-linecap="round"/>
+  <path d="M32 30C28 22 18 20 14 22C18 24 22 28 24 30C20 24 12 24 8 26C12 28 18 30 22 30C16 28 10 30 8 34C14 32 20 30 24 32C18 32 14 36 14 40C18 36 22 34 26 32L32 30Z" fill="white" opacity="0.95"/>
+  <path d="M32 30C36 22 46 20 50 22C46 24 42 28 40 30C44 24 52 24 56 26C52 28 46 30 42 30C48 28 54 30 56 34C50 32 44 30 40 32C46 32 50 36 50 40C46 36 42 34 38 32L32 30Z" fill="white" opacity="0.95"/>
+  <!-- Sun -->
+  <circle cx="48" cy="16" r="5" fill="#FCD34D"/>
+  <!-- Wave -->
+  <path d="M8 50Q16 46 24 50Q32 54 40 50Q48 46 56 50" stroke="white" stroke-width="2.5" stroke-linecap="round" fill="none" opacity="0.6"/>
+</svg>
diff --git a/public/images/cdn/photo-1414235077428-338989a2e8c0.jpg b/public/images/cdn/photo-1414235077428-338989a2e8c0.jpg
new file mode 100644
index 0000000..0bb96d8
Binary files /dev/null and b/public/images/cdn/photo-1414235077428-338989a2e8c0.jpg differ
diff --git a/public/images/cdn/photo-1436491865332-7a61a109db05.jpg b/public/images/cdn/photo-1436491865332-7a61a109db05.jpg
new file mode 100644
index 0000000..a9a1cfe
Binary files /dev/null and b/public/images/cdn/photo-1436491865332-7a61a109db05.jpg differ
diff --git a/public/images/cdn/photo-1438761681033-6461ffad8d80.jpg b/public/images/cdn/photo-1438761681033-6461ffad8d80.jpg
new file mode 100644
index 0000000..4973133
Binary files /dev/null and b/public/images/cdn/photo-1438761681033-6461ffad8d80.jpg differ
diff --git a/public/images/cdn/photo-1468413253725-0d5181091f76.jpg b/public/images/cdn/photo-1468413253725-0d5181091f76.jpg
new file mode 100644
index 0000000..da6acd5
Binary files /dev/null and b/public/images/cdn/photo-1468413253725-0d5181091f76.jpg differ
diff --git a/public/images/cdn/photo-1472099645785-5658abf4ff4e.jpg b/public/images/cdn/photo-1472099645785-5658abf4ff4e.jpg
new file mode 100644
index 0000000..4e30621
Binary files /dev/null and b/public/images/cdn/photo-1472099645785-5658abf4ff4e.jpg differ
diff --git a/public/images/cdn/photo-1473116763249-2faaef81ccda.jpg b/public/images/cdn/photo-1473116763249-2faaef81ccda.jpg
new file mode 100644
index 0000000..921fb6b
Binary files /dev/null and b/public/images/cdn/photo-1473116763249-2faaef81ccda.jpg differ
diff --git a/public/images/cdn/photo-1494790108377-be9c29b29330.jpg b/public/images/cdn/photo-1494790108377-be9c29b29330.jpg
new file mode 100644
index 0000000..35b867c
Binary files /dev/null and b/public/images/cdn/photo-1494790108377-be9c29b29330.jpg differ
diff --git a/public/images/cdn/photo-1497215728101-856f4ea42174.jpg b/public/images/cdn/photo-1497215728101-856f4ea42174.jpg
new file mode 100644
index 0000000..6af2cf5
Binary files /dev/null and b/public/images/cdn/photo-1497215728101-856f4ea42174.jpg differ
diff --git a/public/images/cdn/photo-1500648767791-00dcc994a43e.jpg b/public/images/cdn/photo-1500648767791-00dcc994a43e.jpg
new file mode 100644
index 0000000..8e4ed67
Binary files /dev/null and b/public/images/cdn/photo-1500648767791-00dcc994a43e.jpg differ
diff --git a/public/images/cdn/photo-1504674900247-0877df9cc836.jpg b/public/images/cdn/photo-1504674900247-0877df9cc836.jpg
new file mode 100644
index 0000000..5e65cb2
Binary files /dev/null and b/public/images/cdn/photo-1504674900247-0877df9cc836.jpg differ
diff --git a/public/images/cdn/photo-1506794778202-cad84cf45f1d.jpg b/public/images/cdn/photo-1506794778202-cad84cf45f1d.jpg
new file mode 100644
index 0000000..c0aad52
Binary files /dev/null and b/public/images/cdn/photo-1506794778202-cad84cf45f1d.jpg differ
diff --git a/public/images/cdn/photo-1506929562872-bb421503ef21.jpg b/public/images/cdn/photo-1506929562872-bb421503ef21.jpg
new file mode 100644
index 0000000..f78a7f0
Binary files /dev/null and b/public/images/cdn/photo-1506929562872-bb421503ef21.jpg differ
diff --git a/public/images/cdn/photo-1507525428034-b723cf961d3e.jpg b/public/images/cdn/photo-1507525428034-b723cf961d3e.jpg
new file mode 100644
index 0000000..da6acd5
Binary files /dev/null and b/public/images/cdn/photo-1507525428034-b723cf961d3e.jpg differ
diff --git a/public/images/cdn/photo-1510097467424-192c0d76b5b6.jpg b/public/images/cdn/photo-1510097467424-192c0d76b5b6.jpg
new file mode 100644
index 0000000..60a3e11
Binary files /dev/null and b/public/images/cdn/photo-1510097467424-192c0d76b5b6.jpg differ
diff --git a/public/images/cdn/photo-1510097467424-192d713fd8b2.jpg b/public/images/cdn/photo-1510097467424-192d713fd8b2.jpg
new file mode 100644
index 0000000..60a3e11
Binary files /dev/null and b/public/images/cdn/photo-1510097467424-192d713fd8b2.jpg differ
diff --git a/public/images/cdn/photo-1512100356356-de1b84283e18.jpg b/public/images/cdn/photo-1512100356356-de1b84283e18.jpg
new file mode 100644
index 0000000..f072663
Binary files /dev/null and b/public/images/cdn/photo-1512100356356-de1b84283e18.jpg differ
diff --git a/public/images/cdn/photo-1514362545857-3bc16c4c7d1b.jpg b/public/images/cdn/photo-1514362545857-3bc16c4c7d1b.jpg
new file mode 100644
index 0000000..406d37b
Binary files /dev/null and b/public/images/cdn/photo-1514362545857-3bc16c4c7d1b.jpg differ
diff --git a/public/images/cdn/photo-1517248135467-4c7edcad34c4.jpg b/public/images/cdn/photo-1517248135467-4c7edcad34c4.jpg
new file mode 100644
index 0000000..0c2558f
Binary files /dev/null and b/public/images/cdn/photo-1517248135467-4c7edcad34c4.jpg differ
diff --git a/public/images/cdn/photo-1518105779142-d975f22f1b0a.jpg b/public/images/cdn/photo-1518105779142-d975f22f1b0a.jpg
new file mode 100644
index 0000000..1efb6bb
Binary files /dev/null and b/public/images/cdn/photo-1518105779142-d975f22f1b0a.jpg differ
diff --git a/public/images/cdn/photo-1518638150340-f706e86654de.jpg b/public/images/cdn/photo-1518638150340-f706e86654de.jpg
new file mode 100644
index 0000000..3b99318
Binary files /dev/null and b/public/images/cdn/photo-1518638150340-f706e86654de.jpg differ
diff --git a/public/images/cdn/photo-1519046904884-53103b34b206.jpg b/public/images/cdn/photo-1519046904884-53103b34b206.jpg
new file mode 100644
index 0000000..a9a1cfe
Binary files /dev/null and b/public/images/cdn/photo-1519046904884-53103b34b206.jpg differ
diff --git a/public/images/cdn/photo-1520250497591-112f2f40a3f4.jpg b/public/images/cdn/photo-1520250497591-112f2f40a3f4.jpg
new file mode 100644
index 0000000..b65704d
Binary files /dev/null and b/public/images/cdn/photo-1520250497591-112f2f40a3f4.jpg differ
diff --git a/public/images/cdn/photo-1520454974749-611b7248ffdb.jpg b/public/images/cdn/photo-1520454974749-611b7248ffdb.jpg
new file mode 100644
index 0000000..46538d5
Binary files /dev/null and b/public/images/cdn/photo-1520454974749-611b7248ffdb.jpg differ
diff --git a/public/images/cdn/photo-1522529599102-193c0d76b5b6.jpg b/public/images/cdn/photo-1522529599102-193c0d76b5b6.jpg
new file mode 100644
index 0000000..2e9c327
Binary files /dev/null and b/public/images/cdn/photo-1522529599102-193c0d76b5b6.jpg differ
diff --git a/public/images/cdn/photo-1527734055665-8def83921139.jpg b/public/images/cdn/photo-1527734055665-8def83921139.jpg
new file mode 100644
index 0000000..fd060fc
Binary files /dev/null and b/public/images/cdn/photo-1527734055665-8def83921139.jpg differ
diff --git a/public/images/cdn/photo-1530866495561-507c83010e82.jpg b/public/images/cdn/photo-1530866495561-507c83010e82.jpg
new file mode 100644
index 0000000..3f09004
Binary files /dev/null and b/public/images/cdn/photo-1530866495561-507c83010e82.jpg differ
diff --git a/public/images/cdn/photo-1540497077202-7c8a3999166f.jpg b/public/images/cdn/photo-1540497077202-7c8a3999166f.jpg
new file mode 100644
index 0000000..b8a6637
Binary files /dev/null and b/public/images/cdn/photo-1540497077202-7c8a3999166f.jpg differ
diff --git a/public/images/cdn/photo-1540541338287-41700207dee6.jpg b/public/images/cdn/photo-1540541338287-41700207dee6.jpg
new file mode 100644
index 0000000..552163a
Binary files /dev/null and b/public/images/cdn/photo-1540541338287-41700207dee6.jpg differ
diff --git a/public/images/cdn/photo-1544005313-94ddf0286df2.jpg b/public/images/cdn/photo-1544005313-94ddf0286df2.jpg
new file mode 100644
index 0000000..393c3a0
Binary files /dev/null and b/public/images/cdn/photo-1544005313-94ddf0286df2.jpg differ
diff --git a/public/images/cdn/photo-1544161515-4ab6ce6db874.jpg b/public/images/cdn/photo-1544161515-4ab6ce6db874.jpg
new file mode 100644
index 0000000..9bda222
Binary files /dev/null and b/public/images/cdn/photo-1544161515-4ab6ce6db874.jpg differ
diff --git a/public/images/cdn/photo-1544551763-46a013bb70d5.jpg b/public/images/cdn/photo-1544551763-46a013bb70d5.jpg
new file mode 100644
index 0000000..8b5645c
Binary files /dev/null and b/public/images/cdn/photo-1544551763-46a013bb70d5.jpg differ
diff --git a/public/images/cdn/photo-1550966871-3ed3cdb51f3a.jpg b/public/images/cdn/photo-1550966871-3ed3cdb51f3a.jpg
new file mode 100644
index 0000000..170ad64
Binary files /dev/null and b/public/images/cdn/photo-1550966871-3ed3cdb51f3a.jpg differ
diff --git a/public/images/cdn/photo-1551882547-ff40c63fe5fa.jpg b/public/images/cdn/photo-1551882547-ff40c63fe5fa.jpg
new file mode 100644
index 0000000..a68acb2
Binary files /dev/null and b/public/images/cdn/photo-1551882547-ff40c63fe5fa.jpg differ
diff --git a/public/images/cdn/photo-1552074284-5e88ef1aef18.jpg b/public/images/cdn/photo-1552074284-5e88ef1aef18.jpg
new file mode 100644
index 0000000..fe98f56
Binary files /dev/null and b/public/images/cdn/photo-1552074284-5e88ef1aef18.jpg differ
diff --git a/public/images/cdn/photo-1555396273-367ea4eb4db5.jpg b/public/images/cdn/photo-1555396273-367ea4eb4db5.jpg
new file mode 100644
index 0000000..b4e3e49
Binary files /dev/null and b/public/images/cdn/photo-1555396273-367ea4eb4db5.jpg differ
diff --git a/public/images/cdn/photo-1558618666-fcd25c85f82e.jpg b/public/images/cdn/photo-1558618666-fcd25c85f82e.jpg
new file mode 100644
index 0000000..fd060fc
Binary files /dev/null and b/public/images/cdn/photo-1558618666-fcd25c85f82e.jpg differ
diff --git a/public/images/cdn/photo-1566073771259-6a8506099945.jpg b/public/images/cdn/photo-1566073771259-6a8506099945.jpg
new file mode 100644
index 0000000..cd95948
Binary files /dev/null and b/public/images/cdn/photo-1566073771259-6a8506099945.jpg differ
diff --git a/public/images/cdn/photo-1571896349842-33c89424de2d.jpg b/public/images/cdn/photo-1571896349842-33c89424de2d.jpg
new file mode 100644
index 0000000..c3bc39e
Binary files /dev/null and b/public/images/cdn/photo-1571896349842-33c89424de2d.jpg differ
diff --git a/public/images/cdn/photo-1575762568427-4b23bf947729.jpg b/public/images/cdn/photo-1575762568427-4b23bf947729.jpg
new file mode 100644
index 0000000..90a46fa
Binary files /dev/null and b/public/images/cdn/photo-1575762568427-4b23bf947729.jpg differ
diff --git a/public/images/cdn/photo-1576610616656-d3aa5d1f4534.jpg b/public/images/cdn/photo-1576610616656-d3aa5d1f4534.jpg
new file mode 100644
index 0000000..145bb13
Binary files /dev/null and b/public/images/cdn/photo-1576610616656-d3aa5d1f4534.jpg differ
diff --git a/public/images/cdn/photo-1580415200778-625cb1890ab5.jpg b/public/images/cdn/photo-1580415200778-625cb1890ab5.jpg
new file mode 100644
index 0000000..f31172b
Binary files /dev/null and b/public/images/cdn/photo-1580415200778-625cb1890ab5.jpg differ
diff --git a/public/images/cdn/photo-1580846629083-02669741360a.jpg b/public/images/cdn/photo-1580846629083-02669741360a.jpg
new file mode 100644
index 0000000..ec12d0a
Binary files /dev/null and b/public/images/cdn/photo-1580846629083-02669741360a.jpg differ
diff --git a/public/images/cdn/photo-1581710862235-eb6e05d8783f.jpg b/public/images/cdn/photo-1581710862235-eb6e05d8783f.jpg
new file mode 100644
index 0000000..3f09004
Binary files /dev/null and b/public/images/cdn/photo-1581710862235-eb6e05d8783f.jpg differ
diff --git a/public/images/cdn/photo-1582719508461-905c673771fd.jpg b/public/images/cdn/photo-1582719508461-905c673771fd.jpg
new file mode 100644
index 0000000..6d25b08
Binary files /dev/null and b/public/images/cdn/photo-1582719508461-905c673771fd.jpg differ
diff --git a/public/images/cdn/photo-1584132967334-10e028bd69f7.jpg b/public/images/cdn/photo-1584132967334-10e028bd69f7.jpg
new file mode 100644
index 0000000..19dafca
Binary files /dev/null and b/public/images/cdn/photo-1584132967334-10e028bd69f7.jpg differ
diff --git a/public/images/cdn/photo-1585793753011-397e6e4668d6.jpg b/public/images/cdn/photo-1585793753011-397e6e4668d6.jpg
new file mode 100644
index 0000000..7cff1d7
Binary files /dev/null and b/public/images/cdn/photo-1585793753011-397e6e4668d6.jpg differ
diff --git a/public/images/cdn/photo-1593655600619-a88c11180241.jpg b/public/images/cdn/photo-1593655600619-a88c11180241.jpg
new file mode 100644
index 0000000..f31172b
Binary files /dev/null and b/public/images/cdn/photo-1593655600619-a88c11180241.jpg differ
diff --git a/public/images/cdn/photo-1596436889106-be35e843f974.jpg b/public/images/cdn/photo-1596436889106-be35e843f974.jpg
new file mode 100644
index 0000000..6430c7a
Binary files /dev/null and b/public/images/cdn/photo-1596436889106-be35e843f974.jpg differ
diff --git a/public/images/cdn/photo-1602002418816-5c0aeef426aa.jpg b/public/images/cdn/photo-1602002418816-5c0aeef426aa.jpg
new file mode 100644
index 0000000..a4a9724
Binary files /dev/null and b/public/images/cdn/photo-1602002418816-5c0aeef426aa.jpg differ
diff --git a/public/images/cdn/photo-1615460549969-36fa19521a4f.jpg b/public/images/cdn/photo-1615460549969-36fa19521a4f.jpg
new file mode 100644
index 0000000..c3bd54c
Binary files /dev/null and b/public/images/cdn/photo-1615460549969-36fa19521a4f.jpg differ
diff --git a/public/images/destinations/cabo-2.jpg b/public/images/destinations/cabo-2.jpg
new file mode 100644
index 0000000..ec12d0a
Binary files /dev/null and b/public/images/destinations/cabo-2.jpg differ
diff --git a/public/images/destinations/cabo-3.jpg b/public/images/destinations/cabo-3.jpg
new file mode 100644
index 0000000..fd060fc
Binary files /dev/null and b/public/images/destinations/cabo-3.jpg differ
diff --git a/public/images/destinations/cabo.jpg b/public/images/destinations/cabo.jpg
new file mode 100644
index 0000000..f31172b
Binary files /dev/null and b/public/images/destinations/cabo.jpg differ
diff --git a/public/images/destinations/cancun-2.jpg b/public/images/destinations/cancun-2.jpg
new file mode 100644
index 0000000..fe98f56
Binary files /dev/null and b/public/images/destinations/cancun-2.jpg differ
diff --git a/public/images/destinations/cancun.jpg b/public/images/destinations/cancun.jpg
new file mode 100644
index 0000000..60a3e11
Binary files /dev/null and b/public/images/destinations/cancun.jpg differ
diff --git a/public/images/destinations/puerto-vallarta-2.jpg b/public/images/destinations/puerto-vallarta-2.jpg
new file mode 100644
index 0000000..90a46fa
Binary files /dev/null and b/public/images/destinations/puerto-vallarta-2.jpg differ
diff --git a/public/images/destinations/puerto-vallarta.jpg b/public/images/destinations/puerto-vallarta.jpg
new file mode 100644
index 0000000..7cff1d7
Binary files /dev/null and b/public/images/destinations/puerto-vallarta.jpg differ
diff --git a/public/images/destinations/riviera-maya.jpg b/public/images/destinations/riviera-maya.jpg
new file mode 100644
index 0000000..3f09004
Binary files /dev/null and b/public/images/destinations/riviera-maya.jpg differ
diff --git a/public/images/hero/beach-palm.jpg b/public/images/hero/beach-palm.jpg
new file mode 100644
index 0000000..2c6662b
Binary files /dev/null and b/public/images/hero/beach-palm.jpg differ
diff --git a/public/images/hero/beach-sunset.jpg b/public/images/hero/beach-sunset.jpg
new file mode 100644
index 0000000..977cbc3
Binary files /dev/null and b/public/images/hero/beach-sunset.jpg differ
diff --git a/public/images/showcase/certificate-design.jpg b/public/images/showcase/certificate-design.jpg
new file mode 100644
index 0000000..503dbed
Binary files /dev/null and b/public/images/showcase/certificate-design.jpg differ
diff --git a/public/images/showcase/dashboard-screen.jpg b/public/images/showcase/dashboard-screen.jpg
new file mode 100644
index 0000000..c8d22ca
Binary files /dev/null and b/public/images/showcase/dashboard-screen.jpg differ
diff --git a/public/images/showcase/family-vacation-joy.jpg b/public/images/showcase/family-vacation-joy.jpg
new file mode 100644
index 0000000..14bbeeb
Binary files /dev/null and b/public/images/showcase/family-vacation-joy.jpg differ
diff --git a/public/images/showcase/infinity-pool-sunset.jpg b/public/images/showcase/infinity-pool-sunset.jpg
new file mode 100644
index 0000000..7af312e
Binary files /dev/null and b/public/images/showcase/infinity-pool-sunset.jpg differ
diff --git a/public/images/showcase/resort-beachfront.jpg b/public/images/showcase/resort-beachfront.jpg
new file mode 100644
index 0000000..df44740
Binary files /dev/null and b/public/images/showcase/resort-beachfront.jpg differ
diff --git a/public/llms.txt b/public/llms.txt
new file mode 100644
index 0000000..234d998
--- /dev/null
+++ b/public/llms.txt
@@ -0,0 +1,64 @@
+# hi2b.com — Mexico Paradise Vacations
+
+> All-inclusive Mexico vacation certificates. 5 days and 4 nights at a luxury beachfront resort in Cancun, Cabo, Riviera Maya, or Puerto Vallarta. 2 adults plus kids under 12 free. Payment plans from $39/month.
+
+Mexico Paradise Vacations (hi2b.com) is a travel-certificate company. Each certificate covers a 5-day / 4-night all-inclusive stay for 2 adults at a real beachfront resort in one of four Mexican destinations, with kids under 12 staying free. The certificates are sold on a monthly payment plan or as a discounted one-time payment. Customers redeem the certificate by booking dates through the client portal after the first payment.
+
+## Key pages
+
+- [Home](https://hi2b.com/): Main landing page
+- [Pay](https://hi2b.com/pay): Direct payment page (used for phone sales)
+- [Affiliate Portal](https://hi2b.com/affiliate): Affiliate sign-in and dashboard
+- [Client Portal](https://hi2b.com/dashboard): Customer login (certificate, billing, bookings)
+- [Privacy Policy](https://hi2b.com/privacy)
+- [Terms of Service](https://hi2b.com/terms)
+
+## Landing pages
+
+- [Golden Hour](https://hi2b.com/lp/golden-hour): Escape to paradise. 5 days, 4 nights all-inclusive Mexico vacation for just $39/month.
+- [Midnight Tropical](https://hi2b.com/lp/midnight-tropical): Limited spots remaining. Claim your all-inclusive Mexico getaway.
+- [Passport Stamp](https://hi2b.com/lp/passport-stamp): Adventure awaits. All-inclusive Mexico vacation certificates from $39/month.
+- [Crystal Clear](https://hi2b.com/lp/crystal-clear): All-inclusive Mexico vacation. Simple pricing. Incredible value.
+- [Fiesta](https://hi2b.com/lp/fiesta): Celebrate life with an all-inclusive Mexico vacation from $39/month.
+- [The Closer](https://hi2b.com/lp/the-closer): The math doesn\
+- [Resort Preview](https://hi2b.com/lp/resort-preview): Preview luxury resorts in Cancun, Cabo, Riviera Maya & Puerto Vallarta.
+- [Split Decision](https://hi2b.com/lp/split-decision): Cancun or Cabo? Pick your dream destination. All-inclusive from $39/month.
+- [Calculator](https://hi2b.com/lp/calculator): See exactly how much you save vs. booking direct. The math speaks for itself.
+- [Countdown](https://hi2b.com/lp/countdown): Limited time offer. Claim your all-inclusive Mexico vacation before it\
+- [The Guide](https://hi2b.com/lp/the-guide): Free guide: 5 secrets to luxury Mexico vacations on a budget.
+- [Dreamboard](https://hi2b.com/lp/dreamboard): Visualize your perfect Mexico getaway. Get the free planning guide.
+- [Quiz Funnel](https://hi2b.com/lp/quiz-funnel): Take the quiz to find your ideal Mexico vacation destination.
+- [Social Wall](https://hi2b.com/lp/social-wall): See what real travelers are saying about Mexico Paradise Vacations.
+- [Savings Journal](https://hi2b.com/lp/savings-journal): $1.30/day is less than your latte. Start saving for paradise.
+- [Couples Retreat](https://hi2b.com/lp/couples-retreat): Plan the romantic Mexico getaway you\
+- [Postcards](https://hi2b.com/lp/postcards): Send yourself a postcard from the future. Mexico awaits.
+- [Stress Relief](https://hi2b.com/lp/stress-relief): Escape the stress. All-inclusive Mexico vacation for your wellbeing.
+- [Foodie Paradise](https://hi2b.com/lp/foodie-paradise): All-inclusive dining at world-class Mexico resorts. From $39/month.
+- [Family Escape](https://hi2b.com/lp/family-escape): Family-friendly all-inclusive Mexico vacations from $39/month.
+- [Last Chance](https://hi2b.com/lp/last-chance): This price disappears in minutes. All-inclusive Mexico vacation.
+- [The Proof](https://hi2b.com/lp/proof): Watch real TikTok videos from travelers at our resorts.
+- [VIP Access](https://hi2b.com/lp/vip-access): You\
+- [One Tap](https://hi2b.com/lp/one-tap): The simplest way to book your dream Mexico vacation. $39/mo.
+- [FOMO Feed](https://hi2b.com/lp/fomo-feed): See what you\
+- [Price Lock](https://hi2b.com/lp/price-lock): After this timer expires, the price goes up. Lock it in now.
+- [Before & After](https://hi2b.com/lp/before-after): See the transformation. Desk to beach in one payment.
+- [Risk Free](https://hi2b.com/lp/risk-free): Try it risk-free. If you\
+- [Speed Deal](https://hi2b.com/lp/speed-deal): This deal self-destructs. All-inclusive Mexico from $1.30/day.
+- [Influencer](https://hi2b.com/lp/influencer): The vacation deal going viral. Watch the videos, book the trip.
+- [Bucket List](https://hi2b.com/lp/bucket-list): Life\
+- [Deal Breaker](https://hi2b.com/lp/deal-breaker): Compare us to any travel site. We win every time.
+- [Escape Plan](https://hi2b.com/lp/escape-plan): Download your free Mexico vacation planning guide.
+- [TikTok Vibes](https://hi2b.com/lp/tiktok-vibes): See why this deal is going viral. Get the free insider guide.
+- [No Brainer](https://hi2b.com/lp/no-brainer): $1.30/day for luxury. We\
+- [Weekend Escape](https://hi2b.com/lp/weekend-escape): 5 days that will change how you think about vacations.
+- [Trust Fall](https://hi2b.com/lp/trust-fall): Real reviews, real videos, real people. See for yourself.
+- [Sunrise](https://hi2b.com/lp/sunrise): Imagine waking up to ocean views. Get the free travel guide.
+- [Adrenaline](https://hi2b.com/lp/adrenaline): Ziplines, cenotes, ruins — plus all-inclusive luxury. From $39/mo.
+- [Golden Ticket](https://hi2b.com/lp/golden-ticket): This exclusive offer won\
+- [Seat Reserved](https://hi2b.com/lp/seat-reserved): Your paradise seat is confirmed. Lock in $29/mo before the countdown ends.
+- [VIP Pass](https://hi2b.com/lp/vip-pass): Private concierge, lifetime rebooking, guest upgrades. VIP cohort closes at midnight.
+- [Real Traveler](https://hi2b.com/lp/real-traveler): Real traveler · Day 4 in Mexico · Same resort her friends paid $2,800 for. See her 20-second story.
+
+## Optional
+
+- [Sitemap](https://hi2b.com/sitemap.xml)
\ No newline at end of file
diff --git a/public/robots.txt b/public/robots.txt
index 6018e70..3f3b67a 100644
--- a/public/robots.txt
+++ b/public/robots.txt
@@ -1,14 +1,134 @@
+# hi2b.com — Mexico Paradise Vacations
+# All crawlers welcome, including AI / LLM training and assistant bots.
+
+User-agent: *
+Allow: /
+
+# --- Search engines ---
 User-agent: Googlebot
 Allow: /
 
 User-agent: Bingbot
 Allow: /
 
+User-agent: DuckDuckBot
+Allow: /
+
+User-agent: Baiduspider
+Allow: /
+
+User-agent: YandexBot
+Allow: /
+
+# --- Social / link previews ---
 User-agent: Twitterbot
 Allow: /
 
 User-agent: facebookexternalhit
 Allow: /
 
-User-agent: *
+User-agent: LinkedInBot
+Allow: /
+
+User-agent: Slackbot
+Allow: /
+
+User-agent: Discordbot
+Allow: /
+
+# --- OpenAI ---
+User-agent: GPTBot
+Allow: /
+
+User-agent: ChatGPT-User
+Allow: /
+
+User-agent: OAI-SearchBot
+Allow: /
+
+# --- Anthropic ---
+User-agent: anthropic-ai
+Allow: /
+
+User-agent: ClaudeBot
+Allow: /
+
+User-agent: Claude-Web
+Allow: /
+
+User-agent: Claude-User
+Allow: /
+
+User-agent: Claude-SearchBot
+Allow: /
+
+# --- Google AI ---
+User-agent: Google-Extended
+Allow: /
+
+User-agent: GoogleOther
+Allow: /
+
+# --- Apple ---
+User-agent: Applebot
+Allow: /
+
+User-agent: Applebot-Extended
+Allow: /
+
+# --- Perplexity ---
+User-agent: PerplexityBot
+Allow: /
+
+User-agent: Perplexity-User
+Allow: /
+
+# --- Meta / Facebook ---
+User-agent: Meta-ExternalAgent
+Allow: /
+
+User-agent: Meta-ExternalFetcher
+Allow: /
+
+User-agent: FacebookBot
+Allow: /
+
+# --- ByteDance / TikTok ---
+User-agent: Bytespider
+Allow: /
+
+# --- Amazon ---
+User-agent: Amazonbot
+Allow: /
+
+# --- Cohere ---
+User-agent: cohere-ai
+Allow: /
+
+User-agent: cohere-training-data-crawler
+Allow: /
+
+# --- Other AI assistants ---
+User-agent: DuckAssistBot
+Allow: /
+
+User-agent: YouBot
+Allow: /
+
+User-agent: MistralAI-User
 Allow: /
+
+User-agent: Diffbot
+Allow: /
+
+User-agent: ImagesiftBot
+Allow: /
+
+User-agent: omgilibot
+Allow: /
+
+# --- Common Crawl (used for many LLM training corpora) ---
+User-agent: CCBot
+Allow: /
+
+Sitemap: https://hi2b.com/sitemap.xml
diff --git a/public/tiktok/7598715055793868052.jpg b/public/tiktok/7598715055793868052.jpg
new file mode 100644
index 0000000..115e045
Binary files /dev/null and b/public/tiktok/7598715055793868052.jpg differ
diff --git a/public/tiktok/7598726765644696853.jpg b/public/tiktok/7598726765644696853.jpg
new file mode 100644
index 0000000..8982ca2
Binary files /dev/null and b/public/tiktok/7598726765644696853.jpg differ
diff --git a/public/tiktok/7598734004359007509.jpg b/public/tiktok/7598734004359007509.jpg
new file mode 100644
index 0000000..6e5bc25
Binary files /dev/null and b/public/tiktok/7598734004359007509.jpg differ
diff --git a/public/tiktok/7599817155001044231.jpg b/public/tiktok/7599817155001044231.jpg
new file mode 100644
index 0000000..ecd56a7
Binary files /dev/null and b/public/tiktok/7599817155001044231.jpg differ
diff --git a/public/tiktok/7599823703538453768.jpg b/public/tiktok/7599823703538453768.jpg
new file mode 100644
index 0000000..3a879cb
Binary files /dev/null and b/public/tiktok/7599823703538453768.jpg differ
diff --git a/public/tiktok/7599836054589394194.jpg b/public/tiktok/7599836054589394194.jpg
new file mode 100644
index 0000000..5b7a7e6
Binary files /dev/null and b/public/tiktok/7599836054589394194.jpg differ
diff --git a/public/tiktok/7600189653106380039.jpg b/public/tiktok/7600189653106380039.jpg
new file mode 100644
index 0000000..1e10840
Binary files /dev/null and b/public/tiktok/7600189653106380039.jpg differ
diff --git a/public/tiktok/7600194855343541522.jpg b/public/tiktok/7600194855343541522.jpg
new file mode 100644
index 0000000..ab28297
Binary files /dev/null and b/public/tiktok/7600194855343541522.jpg differ
diff --git a/public/tiktok/7600201175933177109.jpg b/public/tiktok/7600201175933177109.jpg
new file mode 100644
index 0000000..e9ac5e6
Binary files /dev/null and b/public/tiktok/7600201175933177109.jpg differ
diff --git a/public/tiktok/7600205520087043335.jpg b/public/tiktok/7600205520087043335.jpg
new file mode 100644
index 0000000..004268b
Binary files /dev/null and b/public/tiktok/7600205520087043335.jpg differ
diff --git a/public/tiktok/7600207352259808532.jpg b/public/tiktok/7600207352259808532.jpg
new file mode 100644
index 0000000..e2d4c45
Binary files /dev/null and b/public/tiktok/7600207352259808532.jpg differ
diff --git a/public/tiktok/7600210082596539669.jpg b/public/tiktok/7600210082596539669.jpg
new file mode 100644
index 0000000..1f8ca73
Binary files /dev/null and b/public/tiktok/7600210082596539669.jpg differ
diff --git a/public/tiktok/7600210549238009106.jpg b/public/tiktok/7600210549238009106.jpg
new file mode 100644
index 0000000..f2a0575
Binary files /dev/null and b/public/tiktok/7600210549238009106.jpg differ
diff --git a/public/tiktok/7600213209684970772.jpg b/public/tiktok/7600213209684970772.jpg
new file mode 100644
index 0000000..452c16a
Binary files /dev/null and b/public/tiktok/7600213209684970772.jpg differ
diff --git a/public/tiktok/7600559301060578581.jpg b/public/tiktok/7600559301060578581.jpg
new file mode 100644
index 0000000..beea6da
Binary files /dev/null and b/public/tiktok/7600559301060578581.jpg differ
diff --git a/public/tiktok/7600559846118690055.jpg b/public/tiktok/7600559846118690055.jpg
new file mode 100644
index 0000000..93eb67d
Binary files /dev/null and b/public/tiktok/7600559846118690055.jpg differ
diff --git a/public/tiktok/7600564652304518418.jpg b/public/tiktok/7600564652304518418.jpg
new file mode 100644
index 0000000..73decfe
Binary files /dev/null and b/public/tiktok/7600564652304518418.jpg differ
diff --git a/public/tiktok/7600564867724021013.jpg b/public/tiktok/7600564867724021013.jpg
new file mode 100644
index 0000000..e5624bc
Binary files /dev/null and b/public/tiktok/7600564867724021013.jpg differ
diff --git a/public/tiktok/7600568620103650578.jpg b/public/tiktok/7600568620103650578.jpg
new file mode 100644
index 0000000..af83e56
Binary files /dev/null and b/public/tiktok/7600568620103650578.jpg differ
diff --git a/public/tiktok/7600574564598385928.jpg b/public/tiktok/7600574564598385928.jpg
new file mode 100644
index 0000000..89563b7
Binary files /dev/null and b/public/tiktok/7600574564598385928.jpg differ
diff --git a/public/tiktok/7600579435082812679.jpg b/public/tiktok/7600579435082812679.jpg
new file mode 100644
index 0000000..64668b1
Binary files /dev/null and b/public/tiktok/7600579435082812679.jpg differ
diff --git a/public/tiktok/7600582098000383252.jpg b/public/tiktok/7600582098000383252.jpg
new file mode 100644
index 0000000..95cca5d
Binary files /dev/null and b/public/tiktok/7600582098000383252.jpg differ
diff --git a/public/tiktok/7600582664717913351.jpg b/public/tiktok/7600582664717913351.jpg
new file mode 100644
index 0000000..866e1ed
Binary files /dev/null and b/public/tiktok/7600582664717913351.jpg differ
diff --git a/public/tiktok/7600928850821860626.jpg b/public/tiktok/7600928850821860626.jpg
new file mode 100644
index 0000000..95f0d18
Binary files /dev/null and b/public/tiktok/7600928850821860626.jpg differ
diff --git a/public/tiktok/7600928959915756820.jpg b/public/tiktok/7600928959915756820.jpg
new file mode 100644
index 0000000..1b78163
Binary files /dev/null and b/public/tiktok/7600928959915756820.jpg differ
diff --git a/public/tiktok/7600931800495475975.jpg b/public/tiktok/7600931800495475975.jpg
new file mode 100644
index 0000000..64ca383
Binary files /dev/null and b/public/tiktok/7600931800495475975.jpg differ
diff --git a/public/tiktok/7600936171354557704.jpg b/public/tiktok/7600936171354557704.jpg
new file mode 100644
index 0000000..3ccbc57
Binary files /dev/null and b/public/tiktok/7600936171354557704.jpg differ
diff --git a/public/tiktok/7600940014209371400.jpg b/public/tiktok/7600940014209371400.jpg
new file mode 100644
index 0000000..1b48917
Binary files /dev/null and b/public/tiktok/7600940014209371400.jpg differ
diff --git a/public/tiktok/7600948478646242581.jpg b/public/tiktok/7600948478646242581.jpg
new file mode 100644
index 0000000..bab988d
Binary files /dev/null and b/public/tiktok/7600948478646242581.jpg differ
diff --git a/public/tiktok/7600949627860307208.jpg b/public/tiktok/7600949627860307208.jpg
new file mode 100644
index 0000000..a6bf7ff
Binary files /dev/null and b/public/tiktok/7600949627860307208.jpg differ
diff --git a/public/tiktok/7600953259527818517.jpg b/public/tiktok/7600953259527818517.jpg
new file mode 100644
index 0000000..aa03186
Binary files /dev/null and b/public/tiktok/7600953259527818517.jpg differ
diff --git a/public/tiktok/7600953943153331463.jpg b/public/tiktok/7600953943153331463.jpg
new file mode 100644
index 0000000..fd29b46
Binary files /dev/null and b/public/tiktok/7600953943153331463.jpg differ
diff --git a/public/tiktok/7601298265182637320.jpg b/public/tiktok/7601298265182637320.jpg
new file mode 100644
index 0000000..0326064
Binary files /dev/null and b/public/tiktok/7601298265182637320.jpg differ
diff --git a/public/tiktok/7601301018957106440.jpg b/public/tiktok/7601301018957106440.jpg
new file mode 100644
index 0000000..9875a87
Binary files /dev/null and b/public/tiktok/7601301018957106440.jpg differ
diff --git a/public/tiktok/7601302133505264916.jpg b/public/tiktok/7601302133505264916.jpg
new file mode 100644
index 0000000..4929f44
Binary files /dev/null and b/public/tiktok/7601302133505264916.jpg differ
diff --git a/public/tiktok/7601306996272270599.jpg b/public/tiktok/7601306996272270599.jpg
new file mode 100644
index 0000000..0b06745
Binary files /dev/null and b/public/tiktok/7601306996272270599.jpg differ
diff --git a/public/tiktok/7601307252854721813.jpg b/public/tiktok/7601307252854721813.jpg
new file mode 100644
index 0000000..8155147
Binary files /dev/null and b/public/tiktok/7601307252854721813.jpg differ
diff --git a/public/tiktok/7601314019064040724.jpg b/public/tiktok/7601314019064040724.jpg
new file mode 100644
index 0000000..d4d99d1
Binary files /dev/null and b/public/tiktok/7601314019064040724.jpg differ
diff --git a/public/tiktok/7601315168517180679.jpg b/public/tiktok/7601315168517180679.jpg
new file mode 100644
index 0000000..1672b08
Binary files /dev/null and b/public/tiktok/7601315168517180679.jpg differ
diff --git a/public/tiktok/7601319181895814421.jpg b/public/tiktok/7601319181895814421.jpg
new file mode 100644
index 0000000..4641aef
Binary files /dev/null and b/public/tiktok/7601319181895814421.jpg differ
diff --git a/public/tiktok/7601322386176134407.jpg b/public/tiktok/7601322386176134407.jpg
new file mode 100644
index 0000000..8b4f170
Binary files /dev/null and b/public/tiktok/7601322386176134407.jpg differ
diff --git a/public/tiktok/7601324989383527698.jpg b/public/tiktok/7601324989383527698.jpg
new file mode 100644
index 0000000..eae76e1
Binary files /dev/null and b/public/tiktok/7601324989383527698.jpg differ
diff --git a/public/tiktok/7601325166483737877.jpg b/public/tiktok/7601325166483737877.jpg
new file mode 100644
index 0000000..4ace3ef
Binary files /dev/null and b/public/tiktok/7601325166483737877.jpg differ
diff --git a/public/tiktok/7602412252343438599.jpg b/public/tiktok/7602412252343438599.jpg
new file mode 100644
index 0000000..57c9a21
Binary files /dev/null and b/public/tiktok/7602412252343438599.jpg differ
diff --git a/public/tiktok/7602416103356239111.jpg b/public/tiktok/7602416103356239111.jpg
new file mode 100644
index 0000000..d1597d8
Binary files /dev/null and b/public/tiktok/7602416103356239111.jpg differ
diff --git a/public/tiktok/7602416902236835093.jpg b/public/tiktok/7602416902236835093.jpg
new file mode 100644
index 0000000..841ea6b
Binary files /dev/null and b/public/tiktok/7602416902236835093.jpg differ
diff --git a/public/tiktok/7602421070645169429.jpg b/public/tiktok/7602421070645169429.jpg
new file mode 100644
index 0000000..ed76452
Binary files /dev/null and b/public/tiktok/7602421070645169429.jpg differ
diff --git a/public/tiktok/7602422161747283207.jpg b/public/tiktok/7602422161747283207.jpg
new file mode 100644
index 0000000..ff8d27f
Binary files /dev/null and b/public/tiktok/7602422161747283207.jpg differ
diff --git a/public/tiktok/7602427461330029844.jpg b/public/tiktok/7602427461330029844.jpg
new file mode 100644
index 0000000..4b901c1
Binary files /dev/null and b/public/tiktok/7602427461330029844.jpg differ
diff --git a/public/tiktok/7602427669245889800.jpg b/public/tiktok/7602427669245889800.jpg
new file mode 100644
index 0000000..177660b
Binary files /dev/null and b/public/tiktok/7602427669245889800.jpg differ
diff --git a/public/tiktok/7602432094261841172.jpg b/public/tiktok/7602432094261841172.jpg
new file mode 100644
index 0000000..1b1bcad
Binary files /dev/null and b/public/tiktok/7602432094261841172.jpg differ
diff --git a/public/tiktok/7602432924708834568.jpg b/public/tiktok/7602432924708834568.jpg
new file mode 100644
index 0000000..f1ca966
Binary files /dev/null and b/public/tiktok/7602432924708834568.jpg differ
diff --git a/public/tiktok/7602435246679739668.jpg b/public/tiktok/7602435246679739668.jpg
new file mode 100644
index 0000000..fae08de
Binary files /dev/null and b/public/tiktok/7602435246679739668.jpg differ
diff --git a/public/tiktok/7602436296635632904.jpg b/public/tiktok/7602436296635632904.jpg
new file mode 100644
index 0000000..a17161a
Binary files /dev/null and b/public/tiktok/7602436296635632904.jpg differ
diff --git a/public/tiktok/7602437874096639253.jpg b/public/tiktok/7602437874096639253.jpg
new file mode 100644
index 0000000..6c514e5
Binary files /dev/null and b/public/tiktok/7602437874096639253.jpg differ
diff --git a/public/tiktok/7602783687364578567.jpg b/public/tiktok/7602783687364578567.jpg
new file mode 100644
index 0000000..90922ad
Binary files /dev/null and b/public/tiktok/7602783687364578567.jpg differ
diff --git a/public/tiktok/7602788687109328135.jpg b/public/tiktok/7602788687109328135.jpg
new file mode 100644
index 0000000..a2bb938
Binary files /dev/null and b/public/tiktok/7602788687109328135.jpg differ
diff --git a/public/tiktok/7602793251241856263.jpg b/public/tiktok/7602793251241856263.jpg
new file mode 100644
index 0000000..afaf489
Binary files /dev/null and b/public/tiktok/7602793251241856263.jpg differ
diff --git a/public/tiktok/7602797860169567506.jpg b/public/tiktok/7602797860169567506.jpg
new file mode 100644
index 0000000..7e17933
Binary files /dev/null and b/public/tiktok/7602797860169567506.jpg differ
diff --git a/public/tiktok/7602801434245074194.jpg b/public/tiktok/7602801434245074194.jpg
new file mode 100644
index 0000000..5d30325
Binary files /dev/null and b/public/tiktok/7602801434245074194.jpg differ
diff --git a/public/tiktok/7602808291353201938.jpg b/public/tiktok/7602808291353201938.jpg
new file mode 100644
index 0000000..be020a6
Binary files /dev/null and b/public/tiktok/7602808291353201938.jpg differ
diff --git a/public/tiktok/7603155425307184402.jpg b/public/tiktok/7603155425307184402.jpg
new file mode 100644
index 0000000..f187417
Binary files /dev/null and b/public/tiktok/7603155425307184402.jpg differ
diff --git a/public/tiktok/7603159313737190664.jpg b/public/tiktok/7603159313737190664.jpg
new file mode 100644
index 0000000..2795997
Binary files /dev/null and b/public/tiktok/7603159313737190664.jpg differ
diff --git a/public/tiktok/7603162462015245576.jpg b/public/tiktok/7603162462015245576.jpg
new file mode 100644
index 0000000..0b92b62
Binary files /dev/null and b/public/tiktok/7603162462015245576.jpg differ
diff --git a/public/tiktok/7603170263777201416.jpg b/public/tiktok/7603170263777201416.jpg
new file mode 100644
index 0000000..3c46cbe
Binary files /dev/null and b/public/tiktok/7603170263777201416.jpg differ
diff --git a/public/tiktok/7603172717289950472.jpg b/public/tiktok/7603172717289950472.jpg
new file mode 100644
index 0000000..1562a11
Binary files /dev/null and b/public/tiktok/7603172717289950472.jpg differ
diff --git a/public/tiktok/7603176846171098375.jpg b/public/tiktok/7603176846171098375.jpg
new file mode 100644
index 0000000..c6335de
Binary files /dev/null and b/public/tiktok/7603176846171098375.jpg differ
diff --git a/public/tiktok/7603529785150672146.jpg b/public/tiktok/7603529785150672146.jpg
new file mode 100644
index 0000000..5fb2d5f
Binary files /dev/null and b/public/tiktok/7603529785150672146.jpg differ
diff --git a/public/tiktok/7603533611102424328.jpg b/public/tiktok/7603533611102424328.jpg
new file mode 100644
index 0000000..9cc6eec
Binary files /dev/null and b/public/tiktok/7603533611102424328.jpg differ
diff --git a/public/tiktok/7603541240449223943.jpg b/public/tiktok/7603541240449223943.jpg
new file mode 100644
index 0000000..14c3a97
Binary files /dev/null and b/public/tiktok/7603541240449223943.jpg differ
diff --git a/public/tiktok/7603542827678715156.jpg b/public/tiktok/7603542827678715156.jpg
new file mode 100644
index 0000000..d3489a4
Binary files /dev/null and b/public/tiktok/7603542827678715156.jpg differ
diff --git a/public/tiktok/7603547156028476693.jpg b/public/tiktok/7603547156028476693.jpg
new file mode 100644
index 0000000..b192875
Binary files /dev/null and b/public/tiktok/7603547156028476693.jpg differ
diff --git a/public/tiktok/7603547720111901970.jpg b/public/tiktok/7603547720111901970.jpg
new file mode 100644
index 0000000..df6a68d
Binary files /dev/null and b/public/tiktok/7603547720111901970.jpg differ
diff --git a/public/tiktok/7603904300644961556.jpg b/public/tiktok/7603904300644961556.jpg
new file mode 100644
index 0000000..3192b5c
Binary files /dev/null and b/public/tiktok/7603904300644961556.jpg differ
diff --git a/public/tiktok/7603905329964895495.jpg b/public/tiktok/7603905329964895495.jpg
new file mode 100644
index 0000000..3259fd6
Binary files /dev/null and b/public/tiktok/7603905329964895495.jpg differ
diff --git a/public/tiktok/7603907885462080775.jpg b/public/tiktok/7603907885462080775.jpg
new file mode 100644
index 0000000..8432fa9
Binary files /dev/null and b/public/tiktok/7603907885462080775.jpg differ
diff --git a/public/tiktok/7603915141607853332.jpg b/public/tiktok/7603915141607853332.jpg
new file mode 100644
index 0000000..43abf56
Binary files /dev/null and b/public/tiktok/7603915141607853332.jpg differ
diff --git a/public/tiktok/7603916425044036882.jpg b/public/tiktok/7603916425044036882.jpg
new file mode 100644
index 0000000..61c9d30
Binary files /dev/null and b/public/tiktok/7603916425044036882.jpg differ
diff --git a/public/tiktok/7603917143503113492.jpg b/public/tiktok/7603917143503113492.jpg
new file mode 100644
index 0000000..4317427
Binary files /dev/null and b/public/tiktok/7603917143503113492.jpg differ
diff --git a/public/tiktok/7603919277430721810.jpg b/public/tiktok/7603919277430721810.jpg
new file mode 100644
index 0000000..246b574
Binary files /dev/null and b/public/tiktok/7603919277430721810.jpg differ
diff --git a/public/tiktok/7603922127410056469.jpg b/public/tiktok/7603922127410056469.jpg
new file mode 100644
index 0000000..7837280
Binary files /dev/null and b/public/tiktok/7603922127410056469.jpg differ
diff --git a/public/tiktok/7605009292281859335.jpg b/public/tiktok/7605009292281859335.jpg
new file mode 100644
index 0000000..b54528e
Binary files /dev/null and b/public/tiktok/7605009292281859335.jpg differ
diff --git a/public/tiktok/7605011840698944786.jpg b/public/tiktok/7605011840698944786.jpg
new file mode 100644
index 0000000..73aa65f
Binary files /dev/null and b/public/tiktok/7605011840698944786.jpg differ
diff --git a/public/tiktok/7605011911742115093.jpg b/public/tiktok/7605011911742115093.jpg
new file mode 100644
index 0000000..eccf8e6
Binary files /dev/null and b/public/tiktok/7605011911742115093.jpg differ
diff --git a/public/tiktok/7605014829023251719.jpg b/public/tiktok/7605014829023251719.jpg
new file mode 100644
index 0000000..cfed514
Binary files /dev/null and b/public/tiktok/7605014829023251719.jpg differ
diff --git a/public/tiktok/7605017071356792084.jpg b/public/tiktok/7605017071356792084.jpg
new file mode 100644
index 0000000..093cf59
Binary files /dev/null and b/public/tiktok/7605017071356792084.jpg differ
diff --git a/public/tiktok/7605025108616350996.jpg b/public/tiktok/7605025108616350996.jpg
new file mode 100644
index 0000000..7af1862
Binary files /dev/null and b/public/tiktok/7605025108616350996.jpg differ
diff --git a/public/tiktok/7605027310227426567.jpg b/public/tiktok/7605027310227426567.jpg
new file mode 100644
index 0000000..69bb4dc
Binary files /dev/null and b/public/tiktok/7605027310227426567.jpg differ
diff --git a/public/tiktok/7605030386606951687.jpg b/public/tiktok/7605030386606951687.jpg
new file mode 100644
index 0000000..7594b36
Binary files /dev/null and b/public/tiktok/7605030386606951687.jpg differ
diff --git a/public/tiktok/7605031715878341908.jpg b/public/tiktok/7605031715878341908.jpg
new file mode 100644
index 0000000..a8e6bf0
Binary files /dev/null and b/public/tiktok/7605031715878341908.jpg differ
diff --git a/public/tiktok/7605034148218113301.jpg b/public/tiktok/7605034148218113301.jpg
new file mode 100644
index 0000000..c27efb5
Binary files /dev/null and b/public/tiktok/7605034148218113301.jpg differ
diff --git a/public/tiktok/7605385078083980565.jpg b/public/tiktok/7605385078083980565.jpg
new file mode 100644
index 0000000..ebdb77e
Binary files /dev/null and b/public/tiktok/7605385078083980565.jpg differ
diff --git a/public/tiktok/7605388929088441621.jpg b/public/tiktok/7605388929088441621.jpg
new file mode 100644
index 0000000..85e515d
Binary files /dev/null and b/public/tiktok/7605388929088441621.jpg differ
diff --git a/public/tiktok/7605393075606850836.jpg b/public/tiktok/7605393075606850836.jpg
new file mode 100644
index 0000000..d9867cb
Binary files /dev/null and b/public/tiktok/7605393075606850836.jpg differ
diff --git a/public/tiktok/7605403420501134613.jpg b/public/tiktok/7605403420501134613.jpg
new file mode 100644
index 0000000..610b873
Binary files /dev/null and b/public/tiktok/7605403420501134613.jpg differ
diff --git a/public/tiktok/7605763423334337813.jpg b/public/tiktok/7605763423334337813.jpg
new file mode 100644
index 0000000..e0d54df
Binary files /dev/null and b/public/tiktok/7605763423334337813.jpg differ
diff --git a/public/tiktok/7605765455831141653.jpg b/public/tiktok/7605765455831141653.jpg
new file mode 100644
index 0000000..21b9cec
Binary files /dev/null and b/public/tiktok/7605765455831141653.jpg differ
diff --git a/public/tiktok/7605771533738380564.jpg b/public/tiktok/7605771533738380564.jpg
new file mode 100644
index 0000000..e286378
Binary files /dev/null and b/public/tiktok/7605771533738380564.jpg differ
diff --git a/public/tiktok/7605774409177107732.jpg b/public/tiktok/7605774409177107732.jpg
new file mode 100644
index 0000000..e76d78f
Binary files /dev/null and b/public/tiktok/7605774409177107732.jpg differ
diff --git a/public/tiktok/7605777886037003541.jpg b/public/tiktok/7605777886037003541.jpg
new file mode 100644
index 0000000..e4fc2f1
Binary files /dev/null and b/public/tiktok/7605777886037003541.jpg differ
diff --git a/public/tiktok/7606128084961545493.jpg b/public/tiktok/7606128084961545493.jpg
new file mode 100644
index 0000000..660fdb3
Binary files /dev/null and b/public/tiktok/7606128084961545493.jpg differ
diff --git a/public/tiktok/7606131787672079636.jpg b/public/tiktok/7606131787672079636.jpg
new file mode 100644
index 0000000..a2adbf2
Binary files /dev/null and b/public/tiktok/7606131787672079636.jpg differ
diff --git a/public/tiktok/7606137412191882517.jpg b/public/tiktok/7606137412191882517.jpg
new file mode 100644
index 0000000..2dc8660
Binary files /dev/null and b/public/tiktok/7606137412191882517.jpg differ
diff --git a/public/tiktok/7606141425520053524.jpg b/public/tiktok/7606141425520053524.jpg
new file mode 100644
index 0000000..44b3aee
Binary files /dev/null and b/public/tiktok/7606141425520053524.jpg differ
diff --git a/public/tiktok/7606146061446417685.jpg b/public/tiktok/7606146061446417685.jpg
new file mode 100644
index 0000000..610b873
Binary files /dev/null and b/public/tiktok/7606146061446417685.jpg differ
diff --git a/public/tiktok/7608360935576603922.jpg b/public/tiktok/7608360935576603922.jpg
new file mode 100644
index 0000000..23c9047
Binary files /dev/null and b/public/tiktok/7608360935576603922.jpg differ
diff --git a/public/tiktok/7608725450415770888.jpg b/public/tiktok/7608725450415770888.jpg
new file mode 100644
index 0000000..065d68d
Binary files /dev/null and b/public/tiktok/7608725450415770888.jpg differ
diff --git a/public/tiktok/7608727936786648338.jpg b/public/tiktok/7608727936786648338.jpg
new file mode 100644
index 0000000..4b3f950
Binary files /dev/null and b/public/tiktok/7608727936786648338.jpg differ
diff --git a/public/tiktok/7608739596989451527.jpg b/public/tiktok/7608739596989451527.jpg
new file mode 100644
index 0000000..0f3b574
Binary files /dev/null and b/public/tiktok/7608739596989451527.jpg differ
diff --git a/public/tiktok/7608741747623070983.jpg b/public/tiktok/7608741747623070983.jpg
new file mode 100644
index 0000000..504a73f
Binary files /dev/null and b/public/tiktok/7608741747623070983.jpg differ
diff --git a/public/tiktok/7609095709073263880.jpg b/public/tiktok/7609095709073263880.jpg
new file mode 100644
index 0000000..8bd32da
Binary files /dev/null and b/public/tiktok/7609095709073263880.jpg differ
diff --git a/public/tiktok/7609098109934767367.jpg b/public/tiktok/7609098109934767367.jpg
new file mode 100644
index 0000000..3a39557
Binary files /dev/null and b/public/tiktok/7609098109934767367.jpg differ
diff --git a/public/tiktok/7609100427375725832.jpg b/public/tiktok/7609100427375725832.jpg
new file mode 100644
index 0000000..056da59
Binary files /dev/null and b/public/tiktok/7609100427375725832.jpg differ
diff --git a/public/tiktok/7609113519203667218.jpg b/public/tiktok/7609113519203667218.jpg
new file mode 100644
index 0000000..a47ef48
Binary files /dev/null and b/public/tiktok/7609113519203667218.jpg differ
diff --git a/public/tiktok/7609115330388053256.jpg b/public/tiktok/7609115330388053256.jpg
new file mode 100644
index 0000000..213e2eb
Binary files /dev/null and b/public/tiktok/7609115330388053256.jpg differ
diff --git a/public/tiktok/7609117013834845447.jpg b/public/tiktok/7609117013834845447.jpg
new file mode 100644
index 0000000..892e3ad
Binary files /dev/null and b/public/tiktok/7609117013834845447.jpg differ
diff --git a/public/tiktok/7610205552127266066.jpg b/public/tiktok/7610205552127266066.jpg
new file mode 100644
index 0000000..2504524
Binary files /dev/null and b/public/tiktok/7610205552127266066.jpg differ
diff --git a/public/tiktok/7610212093278555413.jpg b/public/tiktok/7610212093278555413.jpg
new file mode 100644
index 0000000..cc62995
Binary files /dev/null and b/public/tiktok/7610212093278555413.jpg differ
diff --git a/public/tiktok/7610214043680345352.jpg b/public/tiktok/7610214043680345352.jpg
new file mode 100644
index 0000000..29e9588
Binary files /dev/null and b/public/tiktok/7610214043680345352.jpg differ
diff --git a/public/tiktok/7610214868418956565.jpg b/public/tiktok/7610214868418956565.jpg
new file mode 100644
index 0000000..f312849
Binary files /dev/null and b/public/tiktok/7610214868418956565.jpg differ
diff --git a/public/tiktok/7610220494742211858.jpg b/public/tiktok/7610220494742211858.jpg
new file mode 100644
index 0000000..dada332
Binary files /dev/null and b/public/tiktok/7610220494742211858.jpg differ
diff --git a/public/tiktok/7610225854345399573.jpg b/public/tiktok/7610225854345399573.jpg
new file mode 100644
index 0000000..ff8a1da
Binary files /dev/null and b/public/tiktok/7610225854345399573.jpg differ
diff --git a/public/tiktok/7610226305556221191.jpg b/public/tiktok/7610226305556221191.jpg
new file mode 100644
index 0000000..033adf2
Binary files /dev/null and b/public/tiktok/7610226305556221191.jpg differ
diff --git a/public/tiktok/7610228483909782791.jpg b/public/tiktok/7610228483909782791.jpg
new file mode 100644
index 0000000..4c6f107
Binary files /dev/null and b/public/tiktok/7610228483909782791.jpg differ
diff --git a/public/tiktok/7610229016678796565.jpg b/public/tiktok/7610229016678796565.jpg
new file mode 100644
index 0000000..9884212
Binary files /dev/null and b/public/tiktok/7610229016678796565.jpg differ
diff --git a/public/tiktok/7610582097748577544.jpg b/public/tiktok/7610582097748577544.jpg
new file mode 100644
index 0000000..733b56c
Binary files /dev/null and b/public/tiktok/7610582097748577544.jpg differ
diff --git a/public/tiktok/7610586339880242453.jpg b/public/tiktok/7610586339880242453.jpg
new file mode 100644
index 0000000..410546a
Binary files /dev/null and b/public/tiktok/7610586339880242453.jpg differ
diff --git a/public/tiktok/7610591010338458901.jpg b/public/tiktok/7610591010338458901.jpg
new file mode 100644
index 0000000..c7b9da9
Binary files /dev/null and b/public/tiktok/7610591010338458901.jpg differ
diff --git a/public/tiktok/7610593736338197780.jpg b/public/tiktok/7610593736338197780.jpg
new file mode 100644
index 0000000..1282d7d
Binary files /dev/null and b/public/tiktok/7610593736338197780.jpg differ
diff --git a/public/tiktok/7610594867172920584.jpg b/public/tiktok/7610594867172920584.jpg
new file mode 100644
index 0000000..da9f9d4
Binary files /dev/null and b/public/tiktok/7610594867172920584.jpg differ
diff --git a/public/tiktok/7610596527475608853.jpg b/public/tiktok/7610596527475608853.jpg
new file mode 100644
index 0000000..20e6aac
Binary files /dev/null and b/public/tiktok/7610596527475608853.jpg differ
diff --git a/public/tiktok/7610599550029516053.jpg b/public/tiktok/7610599550029516053.jpg
new file mode 100644
index 0000000..ecfdff8
Binary files /dev/null and b/public/tiktok/7610599550029516053.jpg differ
diff --git a/public/tiktok/7610608531678530823.jpg b/public/tiktok/7610608531678530823.jpg
new file mode 100644
index 0000000..2e1e224
Binary files /dev/null and b/public/tiktok/7610608531678530823.jpg differ
diff --git a/public/tiktok/7611326035031788818.jpg b/public/tiktok/7611326035031788818.jpg
new file mode 100644
index 0000000..9c89593
Binary files /dev/null and b/public/tiktok/7611326035031788818.jpg differ
diff --git a/public/tiktok/7611328364732845320.jpg b/public/tiktok/7611328364732845320.jpg
new file mode 100644
index 0000000..d41f7a2
Binary files /dev/null and b/public/tiktok/7611328364732845320.jpg differ
diff --git a/public/tiktok/7611330525692841224.jpg b/public/tiktok/7611330525692841224.jpg
new file mode 100644
index 0000000..3d7322e
Binary files /dev/null and b/public/tiktok/7611330525692841224.jpg differ
diff --git a/public/tiktok/7611332584718568711.jpg b/public/tiktok/7611332584718568711.jpg
new file mode 100644
index 0000000..27417f9
Binary files /dev/null and b/public/tiktok/7611332584718568711.jpg differ
diff --git a/public/tiktok/7611333495373204756.jpg b/public/tiktok/7611333495373204756.jpg
new file mode 100644
index 0000000..33918f3
Binary files /dev/null and b/public/tiktok/7611333495373204756.jpg differ
diff --git a/public/tiktok/7611333628567571732.jpg b/public/tiktok/7611333628567571732.jpg
new file mode 100644
index 0000000..71a560e
Binary files /dev/null and b/public/tiktok/7611333628567571732.jpg differ
diff --git a/public/tiktok/7611333870310460693.jpg b/public/tiktok/7611333870310460693.jpg
new file mode 100644
index 0000000..d6c98de
Binary files /dev/null and b/public/tiktok/7611333870310460693.jpg differ
diff --git a/public/tiktok/7611334042528533780.jpg b/public/tiktok/7611334042528533780.jpg
new file mode 100644
index 0000000..00c1512
Binary files /dev/null and b/public/tiktok/7611334042528533780.jpg differ
diff --git a/public/tiktok/7611334215837256981.jpg b/public/tiktok/7611334215837256981.jpg
new file mode 100644
index 0000000..610b873
Binary files /dev/null and b/public/tiktok/7611334215837256981.jpg differ
diff --git a/public/tiktok/7611334414362004743.jpg b/public/tiktok/7611334414362004743.jpg
new file mode 100644
index 0000000..b543a7f
Binary files /dev/null and b/public/tiktok/7611334414362004743.jpg differ
diff --git a/public/tiktok/7611694991936736530.jpg b/public/tiktok/7611694991936736530.jpg
new file mode 100644
index 0000000..5dd1b6a
Binary files /dev/null and b/public/tiktok/7611694991936736530.jpg differ
diff --git a/public/tiktok/7611698597385522440.jpg b/public/tiktok/7611698597385522440.jpg
new file mode 100644
index 0000000..b15edb2
Binary files /dev/null and b/public/tiktok/7611698597385522440.jpg differ
diff --git a/public/tiktok/7611700828247706887.jpg b/public/tiktok/7611700828247706887.jpg
new file mode 100644
index 0000000..b0a1767
Binary files /dev/null and b/public/tiktok/7611700828247706887.jpg differ
diff --git a/public/tiktok/7611702983197314311.jpg b/public/tiktok/7611702983197314311.jpg
new file mode 100644
index 0000000..2225037
Binary files /dev/null and b/public/tiktok/7611702983197314311.jpg differ
diff --git a/public/tiktok/7611704941241060626.jpg b/public/tiktok/7611704941241060626.jpg
new file mode 100644
index 0000000..f09e0c2
Binary files /dev/null and b/public/tiktok/7611704941241060626.jpg differ
diff --git a/public/tiktok/7611712572877851925.jpg b/public/tiktok/7611712572877851925.jpg
new file mode 100644
index 0000000..c3b9983
Binary files /dev/null and b/public/tiktok/7611712572877851925.jpg differ
diff --git a/public/tiktok/7611712751257292053.jpg b/public/tiktok/7611712751257292053.jpg
new file mode 100644
index 0000000..abde576
Binary files /dev/null and b/public/tiktok/7611712751257292053.jpg differ
diff --git a/public/tiktok/7611712896271240469.jpg b/public/tiktok/7611712896271240469.jpg
new file mode 100644
index 0000000..792479a
Binary files /dev/null and b/public/tiktok/7611712896271240469.jpg differ
diff --git a/public/tiktok/7611713028819537172.jpg b/public/tiktok/7611713028819537172.jpg
new file mode 100644
index 0000000..dbc4006
Binary files /dev/null and b/public/tiktok/7611713028819537172.jpg differ
diff --git a/public/tiktok/7611713202807754005.jpg b/public/tiktok/7611713202807754005.jpg
new file mode 100644
index 0000000..0cc197f
Binary files /dev/null and b/public/tiktok/7611713202807754005.jpg differ
diff --git a/public/tiktok/7612811446468005138.jpg b/public/tiktok/7612811446468005138.jpg
new file mode 100644
index 0000000..b647696
Binary files /dev/null and b/public/tiktok/7612811446468005138.jpg differ
diff --git a/public/tiktok/7612813070410337554.jpg b/public/tiktok/7612813070410337554.jpg
new file mode 100644
index 0000000..5ce54b4
Binary files /dev/null and b/public/tiktok/7612813070410337554.jpg differ
diff --git a/public/tiktok/7612815416146103570.jpg b/public/tiktok/7612815416146103570.jpg
new file mode 100644
index 0000000..e2a139d
Binary files /dev/null and b/public/tiktok/7612815416146103570.jpg differ
diff --git a/public/tiktok/7612818180699852050.jpg b/public/tiktok/7612818180699852050.jpg
new file mode 100644
index 0000000..9a73fe9
Binary files /dev/null and b/public/tiktok/7612818180699852050.jpg differ
diff --git a/public/tiktok/7612824588543626516.jpg b/public/tiktok/7612824588543626516.jpg
new file mode 100644
index 0000000..e0a70dc
Binary files /dev/null and b/public/tiktok/7612824588543626516.jpg differ
diff --git a/public/tiktok/7612824727228271892.jpg b/public/tiktok/7612824727228271892.jpg
new file mode 100644
index 0000000..77f6263
Binary files /dev/null and b/public/tiktok/7612824727228271892.jpg differ
diff --git a/public/tiktok/7612824883743001877.jpg b/public/tiktok/7612824883743001877.jpg
new file mode 100644
index 0000000..f05ba77
Binary files /dev/null and b/public/tiktok/7612824883743001877.jpg differ
diff --git a/public/tiktok/7612825010587077908.jpg b/public/tiktok/7612825010587077908.jpg
new file mode 100644
index 0000000..cef901c
Binary files /dev/null and b/public/tiktok/7612825010587077908.jpg differ
diff --git a/public/tiktok/7612825138291166485.jpg b/public/tiktok/7612825138291166485.jpg
new file mode 100644
index 0000000..6d16600
Binary files /dev/null and b/public/tiktok/7612825138291166485.jpg differ
diff --git a/public/tiktok/7613178679929228552.jpg b/public/tiktok/7613178679929228552.jpg
new file mode 100644
index 0000000..234dc5c
Binary files /dev/null and b/public/tiktok/7613178679929228552.jpg differ
diff --git a/public/tiktok/7613180263983549703.jpg b/public/tiktok/7613180263983549703.jpg
new file mode 100644
index 0000000..813e0e8
Binary files /dev/null and b/public/tiktok/7613180263983549703.jpg differ
diff --git a/public/tiktok/7613182036366478610.jpg b/public/tiktok/7613182036366478610.jpg
new file mode 100644
index 0000000..3e8d7b3
Binary files /dev/null and b/public/tiktok/7613182036366478610.jpg differ
diff --git a/public/tiktok/7613183865204641031.jpg b/public/tiktok/7613183865204641031.jpg
new file mode 100644
index 0000000..669f20a
Binary files /dev/null and b/public/tiktok/7613183865204641031.jpg differ
diff --git a/public/tiktok/7613185644747164935.jpg b/public/tiktok/7613185644747164935.jpg
new file mode 100644
index 0000000..a2956d7
Binary files /dev/null and b/public/tiktok/7613185644747164935.jpg differ
diff --git a/public/tiktok/7613607211008363784.jpg b/public/tiktok/7613607211008363784.jpg
new file mode 100644
index 0000000..359cf01
Binary files /dev/null and b/public/tiktok/7613607211008363784.jpg differ
diff --git a/public/tiktok/7613608501083917576.jpg b/public/tiktok/7613608501083917576.jpg
new file mode 100644
index 0000000..e6f4926
Binary files /dev/null and b/public/tiktok/7613608501083917576.jpg differ
diff --git a/public/tiktok/7613609941160529160.jpg b/public/tiktok/7613609941160529160.jpg
new file mode 100644
index 0000000..337b68d
Binary files /dev/null and b/public/tiktok/7613609941160529160.jpg differ
diff --git a/public/tiktok/7613611646375693576.jpg b/public/tiktok/7613611646375693576.jpg
new file mode 100644
index 0000000..68170e7
Binary files /dev/null and b/public/tiktok/7613611646375693576.jpg differ
diff --git a/public/tiktok/7613613311300504850.jpg b/public/tiktok/7613613311300504850.jpg
new file mode 100644
index 0000000..ff4dcc4
Binary files /dev/null and b/public/tiktok/7613613311300504850.jpg differ
diff --git a/public/tiktok/7613938879388798228.jpg b/public/tiktok/7613938879388798228.jpg
new file mode 100644
index 0000000..bbda2e5
Binary files /dev/null and b/public/tiktok/7613938879388798228.jpg differ
diff --git a/public/tiktok/7613939116627086613.jpg b/public/tiktok/7613939116627086613.jpg
new file mode 100644
index 0000000..43d54f2
Binary files /dev/null and b/public/tiktok/7613939116627086613.jpg differ
diff --git a/public/tiktok/7613939329387220245.jpg b/public/tiktok/7613939329387220245.jpg
new file mode 100644
index 0000000..88948b7
Binary files /dev/null and b/public/tiktok/7613939329387220245.jpg differ
diff --git a/public/tiktok/7613939542713715989.jpg b/public/tiktok/7613939542713715989.jpg
new file mode 100644
index 0000000..88948b7
Binary files /dev/null and b/public/tiktok/7613939542713715989.jpg differ
diff --git a/public/tiktok/7613939774008593684.jpg b/public/tiktok/7613939774008593684.jpg
new file mode 100644
index 0000000..e5f86c0
Binary files /dev/null and b/public/tiktok/7613939774008593684.jpg differ
diff --git a/public/tiktok/7613974424663952658.jpg b/public/tiktok/7613974424663952658.jpg
new file mode 100644
index 0000000..5dc22c5
Binary files /dev/null and b/public/tiktok/7613974424663952658.jpg differ
diff --git a/public/tiktok/7613976159252008199.jpg b/public/tiktok/7613976159252008199.jpg
new file mode 100644
index 0000000..9d73e97
Binary files /dev/null and b/public/tiktok/7613976159252008199.jpg differ
diff --git a/public/tiktok/7613977546417310983.jpg b/public/tiktok/7613977546417310983.jpg
new file mode 100644
index 0000000..cbe435b
Binary files /dev/null and b/public/tiktok/7613977546417310983.jpg differ
diff --git a/public/tiktok/7613978916574874887.jpg b/public/tiktok/7613978916574874887.jpg
new file mode 100644
index 0000000..86dbb07
Binary files /dev/null and b/public/tiktok/7613978916574874887.jpg differ
diff --git a/public/tiktok/7613982935712107794.jpg b/public/tiktok/7613982935712107794.jpg
new file mode 100644
index 0000000..57dba06
Binary files /dev/null and b/public/tiktok/7613982935712107794.jpg differ
diff --git a/public/tiktok/7614306570301738260.jpg b/public/tiktok/7614306570301738260.jpg
new file mode 100644
index 0000000..df1a3c2
Binary files /dev/null and b/public/tiktok/7614306570301738260.jpg differ
diff --git a/public/tiktok/7614306744541383957.jpg b/public/tiktok/7614306744541383957.jpg
new file mode 100644
index 0000000..4aaf591
Binary files /dev/null and b/public/tiktok/7614306744541383957.jpg differ
diff --git a/public/tiktok/7614306835511790868.jpg b/public/tiktok/7614306835511790868.jpg
new file mode 100644
index 0000000..a5b2f01
Binary files /dev/null and b/public/tiktok/7614306835511790868.jpg differ
diff --git a/public/tiktok/7614306978164264213.jpg b/public/tiktok/7614306978164264213.jpg
new file mode 100644
index 0000000..d8972ce
Binary files /dev/null and b/public/tiktok/7614306978164264213.jpg differ
diff --git a/public/tiktok/7614307089007021332.jpg b/public/tiktok/7614307089007021332.jpg
new file mode 100644
index 0000000..4d3ca7d
Binary files /dev/null and b/public/tiktok/7614307089007021332.jpg differ
diff --git a/public/tiktok/7615058166895709458.jpg b/public/tiktok/7615058166895709458.jpg
new file mode 100644
index 0000000..1c2b9ff
Binary files /dev/null and b/public/tiktok/7615058166895709458.jpg differ
diff --git a/public/tiktok/7615059773691546887.jpg b/public/tiktok/7615059773691546887.jpg
new file mode 100644
index 0000000..6163e7e
Binary files /dev/null and b/public/tiktok/7615059773691546887.jpg differ
diff --git a/public/tiktok/7615061277148187922.jpg b/public/tiktok/7615061277148187922.jpg
new file mode 100644
index 0000000..ec90edc
Binary files /dev/null and b/public/tiktok/7615061277148187922.jpg differ
diff --git a/public/tiktok/7615063282382146824.jpg b/public/tiktok/7615063282382146824.jpg
new file mode 100644
index 0000000..7fab61d
Binary files /dev/null and b/public/tiktok/7615063282382146824.jpg differ
diff --git a/public/tiktok/7615066189110185234.jpg b/public/tiktok/7615066189110185234.jpg
new file mode 100644
index 0000000..037ff90
Binary files /dev/null and b/public/tiktok/7615066189110185234.jpg differ
diff --git a/public/tiktok/7615417396140068116.jpg b/public/tiktok/7615417396140068116.jpg
new file mode 100644
index 0000000..5e40352
Binary files /dev/null and b/public/tiktok/7615417396140068116.jpg differ
diff --git a/public/tiktok/7615417606446632213.jpg b/public/tiktok/7615417606446632213.jpg
new file mode 100644
index 0000000..5109443
Binary files /dev/null and b/public/tiktok/7615417606446632213.jpg differ
diff --git a/public/tiktok/7615417898932243732.jpg b/public/tiktok/7615417898932243732.jpg
new file mode 100644
index 0000000..3151660
Binary files /dev/null and b/public/tiktok/7615417898932243732.jpg differ
diff --git a/public/tiktok/7615418100892192020.jpg b/public/tiktok/7615418100892192020.jpg
new file mode 100644
index 0000000..3d1e022
Binary files /dev/null and b/public/tiktok/7615418100892192020.jpg differ
diff --git a/public/tiktok/7615418268869741845.jpg b/public/tiktok/7615418268869741845.jpg
new file mode 100644
index 0000000..ba824ba
Binary files /dev/null and b/public/tiktok/7615418268869741845.jpg differ
diff --git a/public/tiktok/7615447194316885256.jpg b/public/tiktok/7615447194316885256.jpg
new file mode 100644
index 0000000..687bd7c
Binary files /dev/null and b/public/tiktok/7615447194316885256.jpg differ
diff --git a/public/tiktok/7615448674025442567.jpg b/public/tiktok/7615448674025442567.jpg
new file mode 100644
index 0000000..1c8427c
Binary files /dev/null and b/public/tiktok/7615448674025442567.jpg differ
diff --git a/public/tiktok/7615450387285331208.jpg b/public/tiktok/7615450387285331208.jpg
new file mode 100644
index 0000000..22139ea
Binary files /dev/null and b/public/tiktok/7615450387285331208.jpg differ
diff --git a/public/tiktok/7615452362475392264.jpg b/public/tiktok/7615452362475392264.jpg
new file mode 100644
index 0000000..69cfbbc
Binary files /dev/null and b/public/tiktok/7615452362475392264.jpg differ
diff --git a/public/tiktok/7615454710916533511.jpg b/public/tiktok/7615454710916533511.jpg
new file mode 100644
index 0000000..e8cae6e
Binary files /dev/null and b/public/tiktok/7615454710916533511.jpg differ
diff --git a/public/tiktok/7615791481458117895.jpg b/public/tiktok/7615791481458117895.jpg
new file mode 100644
index 0000000..1f274a6
Binary files /dev/null and b/public/tiktok/7615791481458117895.jpg differ
diff --git a/public/tiktok/7615792335791787285.jpg b/public/tiktok/7615792335791787285.jpg
new file mode 100644
index 0000000..1307359
Binary files /dev/null and b/public/tiktok/7615792335791787285.jpg differ
diff --git a/public/tiktok/7615792557251071253.jpg b/public/tiktok/7615792557251071253.jpg
new file mode 100644
index 0000000..8636f80
Binary files /dev/null and b/public/tiktok/7615792557251071253.jpg differ
diff --git a/public/tiktok/7615792741502487828.jpg b/public/tiktok/7615792741502487828.jpg
new file mode 100644
index 0000000..bed899e
Binary files /dev/null and b/public/tiktok/7615792741502487828.jpg differ
diff --git a/public/tiktok/7615792939800808725.jpg b/public/tiktok/7615792939800808725.jpg
new file mode 100644
index 0000000..9aff9cb
Binary files /dev/null and b/public/tiktok/7615792939800808725.jpg differ
diff --git a/public/tiktok/7615793139785288980.jpg b/public/tiktok/7615793139785288980.jpg
new file mode 100644
index 0000000..c9f97fa
Binary files /dev/null and b/public/tiktok/7615793139785288980.jpg differ
diff --git a/public/tiktok/7615793545781267730.jpg b/public/tiktok/7615793545781267730.jpg
new file mode 100644
index 0000000..99ae31a
Binary files /dev/null and b/public/tiktok/7615793545781267730.jpg differ
diff --git a/public/tiktok/7615795344672132360.jpg b/public/tiktok/7615795344672132360.jpg
new file mode 100644
index 0000000..e958351
Binary files /dev/null and b/public/tiktok/7615795344672132360.jpg differ
diff --git a/public/tiktok/7615798501636672776.jpg b/public/tiktok/7615798501636672776.jpg
new file mode 100644
index 0000000..e4f3d96
Binary files /dev/null and b/public/tiktok/7615798501636672776.jpg differ
diff --git a/public/tiktok/7615802426007801096.jpg b/public/tiktok/7615802426007801096.jpg
new file mode 100644
index 0000000..0191dc6
Binary files /dev/null and b/public/tiktok/7615802426007801096.jpg differ
diff --git a/public/tiktok/7616157825328254215.jpg b/public/tiktok/7616157825328254215.jpg
new file mode 100644
index 0000000..ff81a68
Binary files /dev/null and b/public/tiktok/7616157825328254215.jpg differ
diff --git a/public/tiktok/7616159717517167879.jpg b/public/tiktok/7616159717517167879.jpg
new file mode 100644
index 0000000..4959180
Binary files /dev/null and b/public/tiktok/7616159717517167879.jpg differ
diff --git a/public/tiktok/7616163461604609287.jpg b/public/tiktok/7616163461604609287.jpg
new file mode 100644
index 0000000..0ee897c
Binary files /dev/null and b/public/tiktok/7616163461604609287.jpg differ
diff --git a/public/tiktok/7616164443701103893.jpg b/public/tiktok/7616164443701103893.jpg
new file mode 100644
index 0000000..01b9b27
Binary files /dev/null and b/public/tiktok/7616164443701103893.jpg differ
diff --git a/public/tiktok/7616164636920007957.jpg b/public/tiktok/7616164636920007957.jpg
new file mode 100644
index 0000000..ab8f959
Binary files /dev/null and b/public/tiktok/7616164636920007957.jpg differ
diff --git a/public/tiktok/7616164791706717461.jpg b/public/tiktok/7616164791706717461.jpg
new file mode 100644
index 0000000..09c5857
Binary files /dev/null and b/public/tiktok/7616164791706717461.jpg differ
diff --git a/public/tiktok/7616164954739182869.jpg b/public/tiktok/7616164954739182869.jpg
new file mode 100644
index 0000000..8bd4c12
Binary files /dev/null and b/public/tiktok/7616164954739182869.jpg differ
diff --git a/public/tiktok/7616165126718115093.jpg b/public/tiktok/7616165126718115093.jpg
new file mode 100644
index 0000000..c3db034
Binary files /dev/null and b/public/tiktok/7616165126718115093.jpg differ
diff --git a/public/tiktok/7616166257783606535.jpg b/public/tiktok/7616166257783606535.jpg
new file mode 100644
index 0000000..275424a
Binary files /dev/null and b/public/tiktok/7616166257783606535.jpg differ
diff --git a/public/tiktok/7616168374267055378.jpg b/public/tiktok/7616168374267055378.jpg
new file mode 100644
index 0000000..0510499
Binary files /dev/null and b/public/tiktok/7616168374267055378.jpg differ
diff --git a/public/tiktok/7616535620449619220.jpg b/public/tiktok/7616535620449619220.jpg
new file mode 100644
index 0000000..645d6bc
Binary files /dev/null and b/public/tiktok/7616535620449619220.jpg differ
diff --git a/public/tiktok/7616535801245093141.jpg b/public/tiktok/7616535801245093141.jpg
new file mode 100644
index 0000000..470b56a
Binary files /dev/null and b/public/tiktok/7616535801245093141.jpg differ
diff --git a/public/tiktok/7616536083496455445.jpg b/public/tiktok/7616536083496455445.jpg
new file mode 100644
index 0000000..2c8a9d3
Binary files /dev/null and b/public/tiktok/7616536083496455445.jpg differ
diff --git a/public/tiktok/7616536245102972180.jpg b/public/tiktok/7616536245102972180.jpg
new file mode 100644
index 0000000..51a3e1d
Binary files /dev/null and b/public/tiktok/7616536245102972180.jpg differ
diff --git a/public/tiktok/7616536467678055701.jpg b/public/tiktok/7616536467678055701.jpg
new file mode 100644
index 0000000..cccd7e5
Binary files /dev/null and b/public/tiktok/7616536467678055701.jpg differ
diff --git a/public/tiktok/7616902084092480789.jpg b/public/tiktok/7616902084092480789.jpg
new file mode 100644
index 0000000..ef1eb84
Binary files /dev/null and b/public/tiktok/7616902084092480789.jpg differ
diff --git a/public/tiktok/7616902289504193812.jpg b/public/tiktok/7616902289504193812.jpg
new file mode 100644
index 0000000..e0b9bf2
Binary files /dev/null and b/public/tiktok/7616902289504193812.jpg differ
diff --git a/public/tiktok/7616902503128501524.jpg b/public/tiktok/7616902503128501524.jpg
new file mode 100644
index 0000000..ae51cef
Binary files /dev/null and b/public/tiktok/7616902503128501524.jpg differ
diff --git a/public/tiktok/7616902684678917397.jpg b/public/tiktok/7616902684678917397.jpg
new file mode 100644
index 0000000..85b3c30
Binary files /dev/null and b/public/tiktok/7616902684678917397.jpg differ
diff --git a/public/tiktok/7616902964158008596.jpg b/public/tiktok/7616902964158008596.jpg
new file mode 100644
index 0000000..bdfcec8
Binary files /dev/null and b/public/tiktok/7616902964158008596.jpg differ
diff --git a/public/tiktok/7618023226857311508.jpg b/public/tiktok/7618023226857311508.jpg
new file mode 100644
index 0000000..592093d
Binary files /dev/null and b/public/tiktok/7618023226857311508.jpg differ
diff --git a/public/tiktok/7618023404637130005.jpg b/public/tiktok/7618023404637130005.jpg
new file mode 100644
index 0000000..258e663
Binary files /dev/null and b/public/tiktok/7618023404637130005.jpg differ
diff --git a/public/tiktok/7618023580994948372.jpg b/public/tiktok/7618023580994948372.jpg
new file mode 100644
index 0000000..5b28a9a
Binary files /dev/null and b/public/tiktok/7618023580994948372.jpg differ
diff --git a/public/tiktok/7618023673798151444.jpg b/public/tiktok/7618023673798151444.jpg
new file mode 100644
index 0000000..5b28a9a
Binary files /dev/null and b/public/tiktok/7618023673798151444.jpg differ
diff --git a/public/tiktok/7618023828597312788.jpg b/public/tiktok/7618023828597312788.jpg
new file mode 100644
index 0000000..1f92bba
Binary files /dev/null and b/public/tiktok/7618023828597312788.jpg differ
diff --git a/public/tiktok/7618030206959340818.jpg b/public/tiktok/7618030206959340818.jpg
new file mode 100644
index 0000000..b5da91b
Binary files /dev/null and b/public/tiktok/7618030206959340818.jpg differ
diff --git a/public/tiktok/7618031655797738760.jpg b/public/tiktok/7618031655797738760.jpg
new file mode 100644
index 0000000..6461619
Binary files /dev/null and b/public/tiktok/7618031655797738760.jpg differ
diff --git a/public/tiktok/7618032920892148999.jpg b/public/tiktok/7618032920892148999.jpg
new file mode 100644
index 0000000..e5fa08f
Binary files /dev/null and b/public/tiktok/7618032920892148999.jpg differ
diff --git a/public/tiktok/7618034303322148114.jpg b/public/tiktok/7618034303322148114.jpg
new file mode 100644
index 0000000..7204b29
Binary files /dev/null and b/public/tiktok/7618034303322148114.jpg differ
diff --git a/public/tiktok/7618035152551218450.jpg b/public/tiktok/7618035152551218450.jpg
new file mode 100644
index 0000000..1b0ea6c
Binary files /dev/null and b/public/tiktok/7618035152551218450.jpg differ
diff --git a/public/videos/traveler-day-4-miranda.mp4 b/public/videos/traveler-day-4-miranda.mp4
new file mode 100644
index 0000000..1bc302b
Binary files /dev/null and b/public/videos/traveler-day-4-miranda.mp4 differ
diff --git a/public/videos/traveler-day-4.mp4 b/public/videos/traveler-day-4.mp4
new file mode 100644
index 0000000..b946714
Binary files /dev/null and b/public/videos/traveler-day-4.mp4 differ
diff --git a/scripts/create-admin.ts b/scripts/create-admin.ts
new file mode 100644
index 0000000..f512789
--- /dev/null
+++ b/scripts/create-admin.ts
@@ -0,0 +1,61 @@
+/**
+ * Create or reset an admin user.
+ *
+ *   npx tsx scripts/create-admin.ts <email> <password> [full_name]
+ *
+ * Idempotent — if the email already exists the password_hash is rotated.
+ * Requires MYSQL_HOST/USER/PASSWORD/DATABASE in env (read /opt/hi2b/.env on prod).
+ */
+import 'dotenv/config'
+import bcrypt from 'bcryptjs'
+import mysql from 'mysql2/promise'
+
+async function main() {
+  const [email, password, fullName = 'Admin'] = process.argv.slice(2)
+  if (!email || !password) {
+    console.error('Usage: npx tsx scripts/create-admin.ts <email> <password> [full_name]')
+    process.exit(1)
+  }
+
+  const { MYSQL_HOST, MYSQL_USER, MYSQL_PASSWORD, MYSQL_DATABASE } = process.env
+  if (!MYSQL_HOST || !MYSQL_USER || !MYSQL_PASSWORD || !MYSQL_DATABASE) {
+    console.error('MYSQL_* env vars missing')
+    process.exit(1)
+  }
+
+  const conn = await mysql.createConnection({
+    host: MYSQL_HOST, user: MYSQL_USER, password: MYSQL_PASSWORD, database: MYSQL_DATABASE,
+  })
+
+  await conn.execute(`
+    CREATE TABLE IF NOT EXISTS admin_users (
+      id INT AUTO_INCREMENT PRIMARY KEY,
+      email VARCHAR(255) UNIQUE NOT NULL,
+      password_hash VARCHAR(255) NOT NULL,
+      full_name VARCHAR(255),
+      role VARCHAR(50) DEFAULT 'admin',
+      status VARCHAR(20) DEFAULT 'active',
+      created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+      updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
+    )
+  `)
+
+  const hash = await bcrypt.hash(password, 12)
+  const [existing] = await conn.execute('SELECT id FROM admin_users WHERE email = ?', [email]) as any[]
+  if (existing.length > 0) {
+    await conn.execute(
+      'UPDATE admin_users SET password_hash = ?, full_name = ?, status = ?, role = ? WHERE email = ?',
+      [hash, fullName, 'active', 'admin', email]
+    )
+    console.log(`Rotated password for existing admin: ${email}`)
+  } else {
+    await conn.execute(
+      'INSERT INTO admin_users (email, password_hash, full_name, role, status) VALUES (?, ?, ?, ?, ?)',
+      [email, hash, fullName, 'admin', 'active']
+    )
+    console.log(`Created admin: ${email}`)
+  }
+  await conn.end()
+}
+
+main().catch(err => { console.error(err); process.exit(1) })
diff --git a/scripts/followup-stats.ts b/scripts/followup-stats.ts
new file mode 100644
index 0000000..d1b1db3
--- /dev/null
+++ b/scripts/followup-stats.ts
@@ -0,0 +1,37 @@
+/** Funnel + follow-up drip stats.  npx tsx scripts/followup-stats.ts */
+import 'dotenv/config'
+import pool from '../src/lib/db-mysql'
+
+const c = async (sql: string): Promise<number> => {
+  const [r] = await pool.execute(sql) as any[]
+  return Number(r[0]?.c ?? 0)
+}
+
+async function main() {
+  const leads = await c('SELECT COUNT(*) c FROM ebook_leads')
+  const verified = await c('SELECT COUNT(*) c FROM early_leads WHERE confirmed=1')
+  const unverified = await c('SELECT COUNT(*) c FROM early_leads WHERE confirmed=0')
+  const abandoned = await c("SELECT COUNT(*) c FROM signups WHERE payment_status IS NULL OR payment_status NOT IN ('active','completed')")
+  const customers = await c("SELECT COUNT(*) c FROM signups WHERE payment_status IN ('active','completed')")
+  const [rev] = await pool.execute("SELECT COALESCE(SUM(amount),0) r FROM signups WHERE payment_status IN ('active','completed')") as any[]
+
+  console.log('\n=== hi2b FUNNEL ===')
+  console.log(`  Leads (emails captured):   ${leads}`)
+  console.log(`    verified:                ${verified}`)
+  console.log(`    unverified:              ${unverified}`)
+  console.log(`  Abandoned checkouts:       ${abandoned}`)
+  console.log(`  Paid customers:            ${customers}`)
+  console.log(`  Revenue booked:            $${Number(rev[0]?.r || 0)}`)
+  const cr = leads > 0 ? ((customers / leads) * 100).toFixed(1) : '0'
+  console.log(`  Lead -> customer:          ${cr}%`)
+
+  console.log('\n=== FOLLOW-UPS SENT ===')
+  const [fu] = await pool.execute(
+    'SELECT segment, step, COUNT(*) c FROM email_followups GROUP BY segment, step ORDER BY segment, step'
+  ) as any[]
+  if (!fu.length) console.log('  (none sent yet)')
+  for (const row of fu) console.log(`  ${row.segment} step${row.step + 1}: ${row.c}`)
+  console.log('')
+  await pool.end()
+}
+main().catch(e => { console.error(e); process.exit(1) })
diff --git a/scripts/generate-ebook.ts b/scripts/generate-ebook.ts
new file mode 100644
index 0000000..3e21d9c
--- /dev/null
+++ b/scripts/generate-ebook.ts
@@ -0,0 +1,553 @@
+/**
+ * Generate the Budget Luxury Travel e-book PDF
+ * Run: npx tsx scripts/generate-ebook.ts
+ *
+ * Pricing and branding are kept in one place (CONFIG) so this stays in sync
+ * with PAYMENT_CONFIG in src/app/lp/_config/types.ts.
+ */
+import PDFDocument from 'pdfkit'
+import { createWriteStream } from 'fs'
+import { join } from 'path'
+
+const outputPath = join(__dirname, '..', 'public', 'ebooks', 'budget-luxury-travel.pdf')
+
+// ─── SITE CONFIG (keep in sync with PAYMENT_CONFIG) ──────
+const CONFIG = {
+  // Regular (anchor) price
+  regularMonthlyPrice: 39,
+  regularTotalPrice: 390,
+  // Promo / today's price
+  monthlyPrice: 29,
+  totalMonths: 10,
+  totalPrice: 290,
+  oneTimePrice: 249,
+  savingsVsRegularTotal: 141,   // regularTotalPrice - oneTimePrice
+  savingsVsRegularMonthly: 100, // regularTotalPrice - totalPrice
+  savingsOneTime: 41,           // totalPrice - oneTimePrice
+  nights: 4,
+  days: 5,
+  bookingMonths: 18,
+  guaranteeDays: 30,
+  phone: '888-602-2424',
+  domain: 'hi2b.com',
+  siteUrl: 'https://hi2b.com',
+  primaryLPSlug: 'golden-hour',
+  brand: 'Mexico Paradise Vacations',
+  dailyCost: 0.97,           // monthlyPrice * 12 / 365 — one year of $29/mo
+}
+
+const doc = new PDFDocument({
+  size: 'letter',
+  // Bottom margin intentionally small so the page-number footer (rendered at
+  // y = page.height - 50) does not trigger PDFKit's auto-pagination.
+  margins: { top: 72, bottom: 30, left: 72, right: 72 },
+  info: {
+    Title: `The ${CONFIG.brand} Insider Guide — Mexico for Under $1/Day`,
+    Author: CONFIG.brand,
+    Subject: 'Travel Guide',
+  },
+})
+
+const stream = createWriteStream(outputPath)
+doc.pipe(stream)
+
+// Color palette
+const NAVY = '#15396B'
+const GOLD = '#D4A574'
+const DARK = '#1a1a2e'
+const GRAY = '#444444'
+const LIGHT_GRAY = '#888888'
+const WHITE = '#FFFFFF'
+const TEAL = '#0d7377'
+const ACCENT = '#E8651A'
+const GREEN = '#16A34A'
+
+// ─── COVER PAGE ────────────────────────────────────────────
+doc.rect(0, 0, doc.page.width, doc.page.height).fill(NAVY)
+
+doc.rect(60, 180, doc.page.width - 120, 2).fill(GOLD)
+
+doc.font('Helvetica-Bold').fontSize(42).fillColor(WHITE)
+   .text('Budget Luxury', 72, 220, { align: 'center' })
+doc.text('Travel in Mexico', 72, 275, { align: 'center' })
+
+doc.font('Helvetica').fontSize(18).fillColor(GOLD)
+   .text(`5 Days of All-Inclusive Paradise for Under $${CONFIG.oneTimePrice}`, 72, 345, { align: 'center' })
+doc.text('The Insider Guide', 72, 370, { align: 'center' })
+
+doc.rect(60, 420, doc.page.width - 120, 2).fill(GOLD)
+
+doc.font('Helvetica').fontSize(11).fillColor('#aabbcc')
+   .text(`A Free Guide from ${CONFIG.brand}`, 72, 460, { align: 'center' })
+
+doc.font('Helvetica').fontSize(9).fillColor('#667799')
+   .text(CONFIG.siteUrl, 72, 680, { align: 'center' })
+   .text(`© ${new Date().getFullYear()} ${CONFIG.brand}. All rights reserved.`, 72, 695, { align: 'center' })
+
+// ─── TABLE OF CONTENTS ────────────────────────────────────
+doc.addPage()
+doc.rect(0, 0, doc.page.width, 100).fill(NAVY)
+doc.font('Helvetica-Bold').fontSize(28).fillColor(WHITE)
+   .text('Table of Contents', 72, 40, { align: 'center' })
+
+const tocItems: [string, string, string][] = [
+  ['Introduction', 'Why Mexico? Why Now?', '3'],
+  ['Secret #1', 'Vacation Certificates — The Insider Hack', '4'],
+  ['Secret #2', 'Shoulder Season = Best Season', '5'],
+  ['Secret #3', 'All-Inclusive: The Hidden Math', '6'],
+  ['Secret #4', 'Destination Deep Dives', '7'],
+  ['Secret #5', 'The $29/mo Payment Plan Advantage', '9'],
+  ['Bonus', 'Your Mexico Packing Checklist', '10'],
+  ['Next Steps', 'Ready to Claim Your Paradise?', '11'],
+]
+
+let tocY = 140
+tocItems.forEach(([title, subtitle, page]) => {
+  doc.font('Helvetica-Bold').fontSize(14).fillColor(NAVY)
+     .text(title, 72, tocY)
+  doc.font('Helvetica').fontSize(11).fillColor(GRAY)
+     .text(subtitle, 72, tocY + 18)
+  doc.font('Helvetica').fontSize(11).fillColor(LIGHT_GRAY)
+     .text(page, 480, tocY + 5, { align: 'right', width: 60 })
+  doc.font('Helvetica').fontSize(9).fillColor('#cccccc')
+  const titleWidth = doc.widthOfString(subtitle, { font: 'Helvetica', fontSize: 11 })
+  const dotsStart = 80 + titleWidth
+  const dotsEnd = 475
+  if (dotsEnd > dotsStart + 10) {
+    const dots = '.'.repeat(Math.floor((dotsEnd - dotsStart) / 4))
+    doc.text(dots, dotsStart, tocY + 20, { width: dotsEnd - dotsStart })
+  }
+  tocY += 55
+})
+
+// ─── Helpers ───────────────────────────────────────────────
+function pageHeader(title: string, subtitle?: string) {
+  doc.addPage()
+  doc.rect(0, 0, doc.page.width, 90).fill(NAVY)
+  doc.font('Helvetica-Bold').fontSize(24).fillColor(WHITE)
+     .text(title, 72, 30, { width: doc.page.width - 144 })
+  if (subtitle) {
+    doc.font('Helvetica').fontSize(12).fillColor(GOLD)
+       .text(subtitle, 72, 60, { width: doc.page.width - 144 })
+  }
+  return 120
+}
+
+function sectionHeading(_y: number, text: string): number {
+  doc.font('Helvetica-Bold').fontSize(16).fillColor(NAVY)
+     .text(text, 72, _y, { width: doc.page.width - 144 })
+  return doc.y + 10
+}
+
+function bodyText(_y: number, content: string): number {
+  doc.font('Helvetica').fontSize(11).fillColor(GRAY)
+     .text(content, 72, _y, {
+       width: doc.page.width - 144,
+       lineGap: 4,
+     })
+  return doc.y + 10
+}
+
+function bulletPoint(_y: number, content: string): number {
+  doc.font('Helvetica').fontSize(11).fillColor(TEAL).text('•', 82, _y)
+  doc.font('Helvetica').fontSize(11).fillColor(GRAY)
+     .text(content, 100, _y, { width: doc.page.width - 172, lineGap: 3 })
+  return doc.y + 4
+}
+
+function highlightBox(y: number, title: string, content: string, accent = TEAL, bg = '#f0f7ff'): number {
+  const contentH = doc.heightOfString(content, { width: doc.page.width - 180, fontSize: 10, lineGap: 3 })
+  const boxHeight = contentH + 54
+  doc.roundedRect(72, y, doc.page.width - 144, boxHeight, 8).fill(bg)
+  doc.rect(72, y, 4, boxHeight).fill(accent)
+  doc.font('Helvetica-Bold').fontSize(11).fillColor(accent)
+     .text(title, 88, y + 12, { width: doc.page.width - 180 })
+  doc.font('Helvetica').fontSize(10).fillColor(GRAY)
+     .text(content, 88, y + 30, { width: doc.page.width - 180, lineGap: 3 })
+  return y + boxHeight + 16
+}
+
+function pageFooter(pageNum: number) {
+  // Force footer to land on the current page by resetting the text cursor to the
+  // footer position before writing. Without this, if prior content pushed the
+  // internal cursor near/past the page bottom, PDFKit auto-breaks to a new page
+  // even when we pass explicit (x, y) to .text() — resulting in blank spacer pages.
+  doc.rect(72, doc.page.height - 60, doc.page.width - 144, 0.5).fill('#dddddd')
+  doc.save()
+  doc.y = doc.page.height - 50
+  doc.x = 72
+  doc.font('Helvetica').fontSize(8).fillColor(LIGHT_GRAY)
+     .text(`${CONFIG.brand} — Page ${pageNum} — ${CONFIG.domain}`, 72, doc.page.height - 50, {
+       align: 'center',
+       width: doc.page.width - 144,
+       lineBreak: false,
+     })
+  doc.restore()
+}
+
+// ─── PAGE 3: INTRODUCTION ─────────────────────────────────
+let y = pageHeader('Introduction', 'Why Mexico? Why Now?')
+
+y = bodyText(y, 'Mexico has been one of the world\'s most beloved vacation destinations for decades — and for good reason. From the powdery white sands of Cancun to the dramatic cliffs of Cabo San Lucas, from the ancient Mayan ruins of the Riviera Maya to the cobblestone charm of Puerto Vallarta, Mexico offers an extraordinary range of experiences that few countries can match.')
+
+y = bodyText(y, `But here\'s what most travelers don\'t know: you don\'t have to spend $3,000-$5,000 to enjoy a luxury all-inclusive Mexican vacation. Savvy travelers have been enjoying 5-star resort experiences for a fraction of that price — often under $${CONFIG.oneTimePrice} total.`)
+
+y = bodyText(y, 'In this guide, we\'re pulling back the curtain on the five biggest secrets that budget-conscious luxury travelers use to experience world-class Mexican resorts without the world-class price tag.')
+
+y = sectionHeading(y + 8, 'What You\'ll Learn')
+y = bulletPoint(y, 'How vacation certificates can save you 85-90% on luxury resort stays')
+y = bulletPoint(y, 'The best times to travel for incredible weather AND incredible prices')
+y = bulletPoint(y, 'Why all-inclusive actually saves you more money than you think')
+y = bulletPoint(y, 'Which Mexican destination is perfect for YOUR travel style')
+y = bulletPoint(y, `How the $${CONFIG.monthlyPrice}/mo payment plan makes luxury travel accessible to any budget`)
+
+y = highlightBox(y + 4, 'Did You Know?', `The average American spends $1,979 per person on a domestic vacation. For $${CONFIG.oneTimePrice} total — or just $${CONFIG.monthlyPrice}/month — you and a partner can enjoy a ${CONFIG.days}-day, ${CONFIG.nights}-night all-inclusive Mexico vacation. That\'s over 85% less than the average trip.`)
+
+pageFooter(3)
+
+// ─── PAGE 4: SECRET #1 ────────────────────────────────────
+y = pageHeader('Secret #1', 'Vacation Certificates — The Insider Hack')
+
+y = bodyText(y, 'Here\'s a little-known fact about the resort industry: luxury resorts in Mexico have a powerful incentive to let you stay for almost nothing. It\'s called a "vacation certificate," and it\'s the single most effective way to experience luxury travel on a budget.')
+
+y = sectionHeading(y, 'How Vacation Certificates Work')
+y = bodyText(y, 'Luxury resorts invest millions in their properties — infinity pools, gourmet restaurants, spa facilities, world-class amenities. Their biggest challenge? Getting potential long-term customers through the door.')
+
+y = bodyText(y, `That\'s where vacation certificates come in. Resorts partner with companies like ${CONFIG.brand} to offer deeply discounted ${CONFIG.days}-day/${CONFIG.nights}-night all-inclusive stays. In exchange, guests attend a brief 90-minute resort tour and presentation about vacation ownership. There is absolutely no obligation to purchase anything.`)
+
+y = sectionHeading(y, 'The Numbers Speak for Themselves')
+y = bulletPoint(y, `Rack rate for ${CONFIG.nights} nights at a luxury all-inclusive: $2,500 - $4,000`)
+y = bulletPoint(y, 'Booking through Expedia or Hotels.com: $1,800 - $3,000')
+y = bulletPoint(y, `Regular certificate price: $${CONFIG.regularMonthlyPrice}/mo x ${CONFIG.totalMonths} = $${CONFIG.regularTotalPrice}`)
+y = bulletPoint(y, `Promo price today: $${CONFIG.monthlyPrice}/mo x ${CONFIG.totalMonths} = $${CONFIG.totalPrice} (save $${CONFIG.savingsVsRegularMonthly})`)
+y = bulletPoint(y, `Best value: $${CONFIG.oneTimePrice} one-time (save $${CONFIG.savingsVsRegularTotal} vs regular)`)
+y = bulletPoint(y, `Your savings vs retail: $1,510 - $3,751 per trip`)
+
+y = highlightBox(y + 4, 'Pro Tip', `The regular rate is $${CONFIG.regularMonthlyPrice}/mo, but our current promo drops it to $${CONFIG.monthlyPrice}/mo — under $1 a day. Or pay once at $${CONFIG.oneTimePrice} and save $${CONFIG.savingsVsRegularTotal} versus the regular total. Every certificate is covered by our ${CONFIG.guaranteeDays}-day 100% money-back guarantee, and bringing a guest is always free.`)
+
+pageFooter(4)
+
+// ─── PAGE 5: SECRET #2 ────────────────────────────────────
+y = pageHeader('Secret #2', 'Shoulder Season = Best Season')
+
+y = bodyText(y, 'Most travelers instinctively book during December holidays, spring break, or summer — exactly when prices are at their peak and beaches are packed. Smart travelers know that "shoulder season" offers the perfect sweet spot of great weather, low prices, and uncrowded beaches.')
+
+y = sectionHeading(y, 'Peak Season vs. Shoulder Season')
+
+const tableTop = y
+const colW = (doc.page.width - 144) / 3
+doc.rect(72, tableTop, doc.page.width - 144, 25).fill(NAVY)
+doc.font('Helvetica-Bold').fontSize(10).fillColor(WHITE)
+doc.text('', 72, tableTop + 8, { width: colW, align: 'center' })
+doc.text('Peak Season', 72 + colW, tableTop + 8, { width: colW, align: 'center' })
+doc.text('Shoulder Season', 72 + colW * 2, tableTop + 8, { width: colW, align: 'center' })
+
+const tableRows = [
+  ['Months', 'Dec-Mar, Jun-Aug', 'Apr-May, Sep-Nov'],
+  ['Weather', '80-90°F, Sunny', '80-88°F, Sunny'],
+  ['Crowds', 'Very crowded', 'Light crowds'],
+  ['Prices', '+40-60% premium', '-30-50% savings'],
+  ['Service', 'Stretched thin', 'Attentive & personal'],
+  ['Upgrades', 'Rarely available', 'Often complimentary'],
+]
+
+let rowY = tableTop + 25
+tableRows.forEach((row, i) => {
+  const bg = i % 2 === 0 ? '#f8f9fa' : WHITE
+  doc.rect(72, rowY, doc.page.width - 144, 22).fill(bg)
+  doc.font('Helvetica-Bold').fontSize(9).fillColor(DARK)
+     .text(row[0], 82, rowY + 6, { width: colW - 20 })
+  doc.font('Helvetica').fontSize(9).fillColor(GRAY)
+     .text(row[1], 72 + colW, rowY + 6, { width: colW, align: 'center' })
+  doc.font('Helvetica-Bold').fontSize(9).fillColor(TEAL)
+     .text(row[2], 72 + colW * 2, rowY + 6, { width: colW, align: 'center' })
+  rowY += 22
+})
+
+y = rowY + 20
+y = bodyText(y, 'The bottom line: you\'ll enjoy nearly identical weather, significantly fewer crowds, better service, and prices 30-50% lower. Many seasoned travelers say shoulder season is actually the BEST time to visit Mexico.')
+
+y = highlightBox(y, 'Best Shoulder Season Windows', '• April 15 - May 31: Perfect weather, post-spring-break calm\n• September 15 - November 30: Hurricane season winding down, incredible deals\n• Early December (before Dec 15): Holiday decorations without holiday crowds')
+
+pageFooter(5)
+
+// ─── PAGE 6: SECRET #3 ────────────────────────────────────
+y = pageHeader('Secret #3', 'All-Inclusive: The Hidden Math')
+
+y = bodyText(y, 'When most people see "all-inclusive" pricing, they think it\'s more expensive. But when you actually do the math, all-inclusive resorts almost always save you significant money — and eliminate the stress of watching every peso you spend.')
+
+y = sectionHeading(y, 'The Real Cost of a "Budget" Resort Stay')
+y = bodyText(y, 'Let\'s break down what a couple typically spends per day at a non-all-inclusive resort in Mexico:')
+
+const expenses = [
+  ['Breakfast', '$15-25/person', '$30-50'],
+  ['Lunch', '$20-35/person', '$40-70'],
+  ['Dinner', '$40-80/person', '$80-160'],
+  ['Drinks (pool/beach)', '$8-15 each × 4', '$32-60'],
+  ['Evening drinks', '$10-18 each × 3', '$30-54'],
+  ['Pool/beach chairs', '', '$20-40'],
+  ['Tips', '', '$25-40'],
+  ['Activities', '', '$40-100'],
+]
+
+let expY = y
+doc.rect(72, expY, doc.page.width - 144, 22).fill(NAVY)
+doc.font('Helvetica-Bold').fontSize(9).fillColor(WHITE)
+doc.text('Expense', 82, expY + 7)
+doc.text('Per Person', 280, expY + 7)
+doc.text('Couple Total', 420, expY + 7)
+expY += 22
+
+expenses.forEach((row, i) => {
+  const bg = i % 2 === 0 ? '#fef9f0' : WHITE
+  doc.rect(72, expY, doc.page.width - 144, 18).fill(bg)
+  doc.font('Helvetica').fontSize(9).fillColor(GRAY)
+  doc.text(row[0], 82, expY + 5)
+  doc.text(row[1], 280, expY + 5)
+  doc.font('Helvetica-Bold').fontSize(9).fillColor(ACCENT)
+  doc.text(row[2], 420, expY + 5)
+  expY += 18
+})
+
+doc.rect(72, expY, doc.page.width - 144, 22).fill('#fff3e0')
+doc.font('Helvetica-Bold').fontSize(10).fillColor(ACCENT)
+   .text('DAILY TOTAL (couple):', 82, expY + 6)
+   .text('$297 - $574', 420, expY + 6)
+expY += 30
+
+y = expY + 8
+y = bodyText(y, `Over a ${CONFIG.days}-day trip, that\'s $1,485 - $2,870 in additional costs on top of your room rate. With an all-inclusive certificate at $${CONFIG.oneTimePrice}, ALL of this is included — food, drinks, pools, beaches, resort amenities.`)
+
+y = highlightBox(y, 'The Bottom Line', `A "cheap" hotel room + food & drinks costs $2,000-$4,000 for a couple.\nAn all-inclusive vacation certificate: just $${CONFIG.oneTimePrice} — or $${CONFIG.monthlyPrice}/mo for ${CONFIG.totalMonths} months.\nYour savings: $1,750 - $3,750. It\'s not even close.`, ACCENT, '#fff3e0')
+
+pageFooter(6)
+
+// ─── PAGE 7: SECRET #4 ─────────────────────────────────
+y = pageHeader('Secret #4', 'Destination Deep Dives — Find Your Perfect Match')
+
+y = bodyText(y, 'Not all Mexican destinations are created equal — and choosing the right one for your travel style can make the difference between a good vacation and an unforgettable one. Here\'s our insider guide to the four premier destinations your certificate covers.')
+
+y = sectionHeading(y, 'Cancun')
+y = bodyText(y, 'Best for: Beach lovers, nightlife enthusiasts, and first-time Mexico visitors.')
+y = bodyText(y, 'Cancun\'s Hotel Zone is a 14-mile strip of powder-white beach backed by turquoise Caribbean waters. It\'s the most popular tourist destination in Mexico for good reason — stunning beaches, world-class resorts, and easy access from most US cities with direct flights under 3 hours.')
+
+y = bulletPoint(y, 'Must-Do: Take the ferry to Isla Mujeres for a laid-back island day')
+y = bulletPoint(y, 'Must-Do: Snorkel the underwater museum MUSA (500+ submerged sculptures)')
+y = bulletPoint(y, 'Must-Do: Visit Chichen Itza — one of the New Seven Wonders of the World')
+y = bulletPoint(y, 'Best For: Couples seeking beach + nightlife, families with older kids')
+
+y += 8
+y = sectionHeading(y, 'Cabo San Lucas')
+y = bodyText(y, 'Best for: Dramatic scenery, deep-sea fishing, and luxury seekers.')
+y = bodyText(y, 'Where the Pacific Ocean meets the Sea of Cortez, Cabo offers some of Mexico\'s most dramatic landscapes. The iconic El Arco rock formation, desert-meets-ocean terrain, and some of the finest resorts in the world make Cabo a favorite of celebrities and luxury travelers.')
+
+y = bulletPoint(y, 'Must-Do: See El Arco at sunset by boat or kayak')
+y = bulletPoint(y, 'Must-Do: Whale watching (December - April) — grey and humpback whales')
+y = bulletPoint(y, 'Must-Do: Take a desert ATV tour through the Baja landscape')
+y = bulletPoint(y, 'Best For: Couples, golf enthusiasts, deep-sea fishing fans')
+
+pageFooter(7)
+
+// ─── PAGE 8: SECRET #4 (continued) ─────────────────────────
+y = pageHeader('Secret #4 (continued)', 'More Dream Destinations')
+
+y = sectionHeading(y, 'Riviera Maya')
+y = bodyText(y, 'Best for: Adventure seekers, culture lovers, and eco-tourists.')
+y = bodyText(y, 'Stretching along the Caribbean coast south of Cancun, the Riviera Maya combines stunning beaches with ancient Mayan heritage. This is where you\'ll find cenotes (natural swimming holes), jungle adventures, and the cliff-top ruins of Tulum overlooking the turquoise sea.')
+
+y = bulletPoint(y, 'Must-Do: Swim in a cenote — there are over 6,000 in the Yucatan Peninsula')
+y = bulletPoint(y, 'Must-Do: Visit Tulum ruins at sunrise before the crowds arrive')
+y = bulletPoint(y, 'Must-Do: Snorkel with sea turtles in Akumal Bay')
+y = bulletPoint(y, 'Best For: Adventure couples, eco-travelers, history buffs')
+
+y += 8
+y = sectionHeading(y, 'Puerto Vallarta')
+y = bodyText(y, 'Best for: Culture enthusiasts, foodies, and sunset chasers.')
+y = bodyText(y, 'Puerto Vallarta is Mexico\'s most authentic resort city. Unlike purpose-built resort zones, PV has a real downtown with cobblestone streets, local markets, world-class restaurants, and a legendary Malecón (boardwalk) that comes alive every evening with street performers and art.')
+
+y = bulletPoint(y, 'Must-Do: Walk the Malecón at sunset — the most beautiful boardwalk in Mexico')
+y = bulletPoint(y, 'Must-Do: Take a food tour through the Romantic Zone')
+y = bulletPoint(y, 'Must-Do: Day trip to the hidden beach town of Sayulita')
+y = bulletPoint(y, 'Best For: Foodies, couples seeking authenticity, culture lovers')
+
+y += 12
+const quizBoxH = 90
+doc.roundedRect(72, y, doc.page.width - 144, quizBoxH, 8).fill('#e8f5e9')
+doc.rect(72, y, 4, quizBoxH).fill(TEAL)
+doc.font('Helvetica-Bold').fontSize(12).fillColor(TEAL)
+   .text('Not Sure Which Destination? Quick Guide:', 88, y + 12)
+doc.font('Helvetica').fontSize(10).fillColor(GRAY)
+   .text('Want the best beaches? → Cancun', 88, y + 32)
+   .text('Want dramatic luxury? → Cabo San Lucas', 88, y + 47)
+   .text('Want adventure + culture? → Riviera Maya', 88, y + 62)
+   .text('Want authentic Mexico? → Puerto Vallarta', 88, y + 77)
+
+pageFooter(8)
+
+// ─── PAGE 9: SECRET #5 ────────────────────────────────────
+y = pageHeader('Secret #5', `The $${CONFIG.monthlyPrice}/mo Payment Plan Advantage`)
+
+y = bodyText(y, 'The biggest psychological barrier to booking a vacation isn\'t the total cost — it\'s the upfront cost. Dropping $2,000+ in one transaction feels painful, even when you can afford it. Smart travelers use payment plans to eliminate this friction entirely.')
+
+y = sectionHeading(y, 'The Under-$1-a-Day Vacation')
+y = bodyText(y, `At ${CONFIG.brand}, you can lock in your all-inclusive vacation certificate for just $${CONFIG.monthlyPrice}/month over ${CONFIG.totalMonths} months. Let\'s put that in perspective:`)
+
+const comparisons: Array<[string, string, string]> = [
+  [`Your daily ${CONFIG.brand} cost`, `$${CONFIG.dailyCost.toFixed(2)}/day`, TEAL],
+  ['Pack of gum', '$1.50/day', GRAY],
+  ['Streaming subscription', '$1.80/day', GRAY],
+  ['Starbucks coffee', '$5.50/day', GRAY],
+  ['Fast food lunch', '$9.00/day', GRAY],
+  ['Daily takeout dinner', '$18.00/day', GRAY],
+]
+
+let compY = y
+comparisons.forEach(([label, cost, color]) => {
+  const amount = parseFloat(cost.replace(/[$\/day]/g, ''))
+  const barWidth = Math.min(amount * 25, 280)
+  doc.roundedRect(200, compY, barWidth, 18, 4).fill(color === TEAL ? '#e0f2f1' : '#f5f5f5')
+  doc.roundedRect(200, compY, barWidth, 18, 4).fill(color === TEAL ? TEAL : '#ccc')
+     .fillOpacity(color === TEAL ? 0.2 : 0.15)
+  doc.fillOpacity(1)
+  doc.font('Helvetica').fontSize(9).fillColor(GRAY)
+     .text(label, 82, compY + 4)
+  doc.font('Helvetica-Bold').fontSize(9).fillColor(color)
+     .text(cost, 200 + barWidth + 8, compY + 4)
+  compY += 24
+})
+
+y = compY + 12
+y = sectionHeading(y, 'Why Payment Plans Are Smart')
+y = bulletPoint(y, 'Lock in today\'s price before rates increase')
+y = bulletPoint(y, 'No credit check required — available to everyone')
+y = bulletPoint(y, `Book your travel dates immediately after your first $${CONFIG.monthlyPrice} payment`)
+y = bulletPoint(y, `No interest charges — promo price $${CONFIG.monthlyPrice} x ${CONFIG.totalMonths} = $${CONFIG.totalPrice} total (vs regular $${CONFIG.regularTotalPrice})`)
+y = bulletPoint(y, `Or save $${CONFIG.savingsVsRegularTotal} with a one-time payment of $${CONFIG.oneTimePrice}`)
+y = bulletPoint(y, `${CONFIG.guaranteeDays}-day 100% money-back guarantee — cancel anytime in the first month for a full refund`)
+
+y = highlightBox(y + 4, 'Important Note', `Regular price is $${CONFIG.regularMonthlyPrice}/mo — you are locking in the $${CONFIG.monthlyPrice}/mo promo. Your certificate is activated after your first $${CONFIG.monthlyPrice} payment, so you can begin booking travel dates immediately. You have ${CONFIG.bookingMonths} months to travel, and bringing a guest is always free.`)
+
+pageFooter(9)
+
+// ─── PAGE 10: PACKING CHECKLIST ───────────────────────────
+y = pageHeader('Bonus', 'Your Complete Mexico Packing Checklist')
+
+const checklistSections = [
+  {
+    title: 'Essential Documents',
+    items: ['Valid passport (6+ months before expiry)', 'Travel insurance documents', 'Vacation certificate confirmation', 'Digital + paper copies of all documents', 'Hotel/resort confirmation email'],
+  },
+  {
+    title: 'Clothing',
+    items: ['Swimsuits (2-3)', 'Light cover-ups and sundresses', 'One nice outfit for resort dining', 'Comfortable walking shoes', 'Flip flops / sandals', 'Light layers for air-conditioned spaces'],
+  },
+  {
+    title: 'Sun & Health',
+    items: ['Reef-safe sunscreen SPF 50+ (required at many resorts)', 'UV-protection sunglasses', 'Wide-brim hat', 'Insect repellent with DEET', 'Basic medications & first aid', 'Prescription medications in original bottles'],
+  },
+  {
+    title: 'Tech & Extras',
+    items: ['Waterproof phone case', 'Portable battery charger', 'Camera / GoPro', 'Universal power adapter (Mexico uses US plugs, but just in case)', 'Dry bag for beach/boat excursions'],
+  },
+]
+
+checklistSections.forEach((section) => {
+  doc.font('Helvetica-Bold').fontSize(13).fillColor(NAVY)
+     .text(section.title, 72, y)
+  y += 20
+  section.items.forEach((item) => {
+    doc.font('Helvetica').fontSize(10).fillColor(GRAY)
+    doc.rect(82, y + 2, 10, 10).lineWidth(0.5).stroke('#aaaaaa')
+    doc.text(item, 100, y + 1, { width: doc.page.width - 172 })
+    y += 18
+  })
+  y += 8
+})
+
+pageFooter(10)
+
+// ─── PAGE 11: CTA / CLOSING ──────────────────────────────
+doc.addPage()
+doc.rect(0, 0, doc.page.width, doc.page.height).fill(NAVY)
+
+doc.font('Helvetica-Bold').fontSize(32).fillColor(WHITE)
+   .text('Ready to Claim', 72, 100, { align: 'center' })
+   .text('Your Paradise?', 72, 145, { align: 'center' })
+
+doc.rect(200, 195, doc.page.width - 400, 2).fill(GOLD)
+
+doc.font('Helvetica').fontSize(14).fillColor('#aabbcc')
+   .text('You now have all 5 secrets to budget luxury travel in Mexico.', 72, 225, { align: 'center' })
+   .text('Here\'s the quick recap:', 72, 245, { align: 'center' })
+
+const recapItems = [
+  '1. Use vacation certificates for 85-90% savings',
+  '2. Travel shoulder season for best weather & prices',
+  '3. Choose all-inclusive to eliminate hidden costs',
+  '4. Pick the right destination for your style',
+  `5. Use the $${CONFIG.monthlyPrice}/mo payment plan to make it effortless`,
+]
+
+let recapY = 290
+recapItems.forEach((item) => {
+  doc.font('Helvetica').fontSize(13).fillColor(GOLD)
+     .text(item, 100, recapY, { align: 'center', width: doc.page.width - 200 })
+  recapY += 28
+})
+
+// Offer box
+const offerY = 445
+doc.roundedRect(100, offerY, doc.page.width - 200, 175, 12)
+   .lineWidth(2).stroke(GOLD)
+
+doc.font('Helvetica-Bold').fontSize(16).fillColor(WHITE)
+   .text('YOUR SPECIAL PROMO', 100, offerY + 16, { align: 'center', width: doc.page.width - 200 })
+
+doc.font('Helvetica').fontSize(13).fillColor('#aabbcc')
+   .text(`${CONFIG.days} Days / ${CONFIG.nights} Nights All-Inclusive Mexico Vacation`, 100, offerY + 45, { align: 'center', width: doc.page.width - 200 })
+
+// Struck-through regular price
+const regularText = `Regular price: $${CONFIG.regularMonthlyPrice}/month`
+const regularWidth = doc.widthOfString(regularText, { font: 'Helvetica', fontSize: 12 })
+const regularX = 100 + ((doc.page.width - 200) - regularWidth) / 2
+doc.font('Helvetica').fontSize(12).fillColor('#8899aa')
+   .text(regularText, regularX, offerY + 70)
+// Strikethrough line
+doc.rect(regularX, offerY + 78, regularWidth, 1).fill('#8899aa')
+
+// Today's promo price — big and gold
+doc.font('Helvetica-Bold').fontSize(26).fillColor(GOLD)
+   .text(`Today: $${CONFIG.monthlyPrice}/month for ${CONFIG.totalMonths} months`, 100, offerY + 88, { align: 'center', width: doc.page.width - 200 })
+
+doc.font('Helvetica').fontSize(11).fillColor('#aabbcc')
+   .text(`or save $${CONFIG.savingsVsRegularTotal} with a one-time payment of $${CONFIG.oneTimePrice}`, 100, offerY + 122, { align: 'center', width: doc.page.width - 200 })
+
+doc.font('Helvetica-Bold').fontSize(10).fillColor(GREEN)
+   .text(`${CONFIG.guaranteeDays}-Day Money-Back  •  Bring a Guest Free  •  ${CONFIG.bookingMonths}-Month Booking Window`, 100, offerY + 146, { align: 'center', width: doc.page.width - 200 })
+
+// Book now CTA — emphasize hi2b.com
+doc.font('Helvetica-Bold').fontSize(18).fillColor(WHITE)
+   .text(`Visit ${CONFIG.domain}`, 72, 645, { align: 'center', width: doc.page.width - 144 })
+
+doc.font('Helvetica-Bold').fontSize(16).fillColor(GOLD)
+   .text(`Or call ${CONFIG.phone}`, 72, 674, { align: 'center', width: doc.page.width - 144 })
+
+doc.font('Helvetica').fontSize(9).fillColor('#aabbcc')
+   .text('Mon-Fri 9am-8pm  |  Sat 10am-4pm EST  |  Toll-Free', 72, 698, { align: 'center', width: doc.page.width - 144 })
+
+doc.font('Helvetica').fontSize(8).fillColor('#667799')
+   .text(`© ${new Date().getFullYear()} ${CONFIG.brand}. All rights reserved.`, 72, 720, { align: 'center', width: doc.page.width - 144 })
+   .text('This guide is informational. Offers subject to availability and resort terms. ' +
+         'Certificate requires attendance at a 90-minute resort tour with no obligation to purchase.',
+         72, 734, { align: 'center', width: doc.page.width - 144 })
+
+// Finalize
+doc.end()
+
+stream.on('finish', () => {
+  console.log(`✅ PDF generated: ${outputPath}`)
+  const fs = require('fs')
+  const stats = fs.statSync(outputPath)
+  console.log(`   Size: ${(stats.size / 1024).toFixed(1)} KB`)
+  console.log(`   Pages: 11`)
+})
diff --git a/scripts/preview-followups.ts b/scripts/preview-followups.ts
new file mode 100644
index 0000000..3bda60c
--- /dev/null
+++ b/scripts/preview-followups.ts
@@ -0,0 +1,24 @@
+/** Send every follow-up template to one inbox so you can review them.
+ *   npx tsx scripts/preview-followups.ts [email]   (default nick@724care.net)
+ */
+import 'dotenv/config'
+import { sendLeadFollowup, sendAbandonedFollowup, sendBookingReminder } from '../src/lib/email'
+
+const to = process.argv[2] || 'nick@724care.net'
+
+async function main() {
+  const jobs: [string, () => Promise<any>][] = [
+    ['lead follow-up 1 (deal waiting)',  () => sendLeadFollowup(to, 0)],
+    ['lead follow-up 2 (offer + call)',  () => sendLeadFollowup(to, 1)],
+    ['lead follow-up 3 (last call)',     () => sendLeadFollowup(to, 2)],
+    ['abandoned 1 (finish booking)',       () => sendAbandonedFollowup(to, 0)],
+    ['abandoned 2 (reassurance + call)',   () => sendAbandonedFollowup(to, 1)],
+    ['customer (booking reminder)',        () => sendBookingReminder(to, 'Nick')],
+  ]
+  console.log(`Sending ${jobs.length} sample emails to ${to}\n`)
+  for (const [name, fn] of jobs) {
+    try { const r = await fn(); console.log(`  ${r ? 'SENT ' : 'FAIL '} ${name}`) }
+    catch (e) { console.log(`  ERR  ${name}: ${e instanceof Error ? e.message : e}`) }
+  }
+}
+main().catch(e => { console.error(e); process.exit(1) })
diff --git a/scripts/scrape-tiktok.ts b/scripts/scrape-tiktok.ts
new file mode 100644
index 0000000..f22bd21
--- /dev/null
+++ b/scripts/scrape-tiktok.ts
@@ -0,0 +1,92 @@
+import puppeteer from 'puppeteer-extra'
+import StealthPlugin from 'puppeteer-extra-plugin-stealth'
+
+puppeteer.use(StealthPlugin())
+
+const USERNAME = 'travel.to.mexico8'
+const sleep = (ms: number) => new Promise(r => setTimeout(r, ms))
+
+async function scrape() {
+  console.log('Launching stealth browser...')
+
+  const browser = await puppeteer.launch({
+    headless: true,
+    executablePath: '/usr/bin/google-chrome-stable',
+    args: ['--no-sandbox', '--disable-setuid-sandbox', '--disable-dev-shm-usage', '--disable-gpu'],
+  })
+
+  try {
+    const page = await browser.newPage()
+    await page.setUserAgent('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36')
+    await page.setViewport({ width: 1920, height: 1080 })
+
+    const profileUrl = `https://www.tiktok.com/@${USERNAME}`
+    console.log(`Navigating to ${profileUrl}...`)
+    await page.goto(profileUrl, { waitUntil: 'networkidle0', timeout: 45000 })
+    await sleep(5000)
+
+    // Scroll aggressively to trigger lazy loading
+    console.log('Scrolling to load all videos...')
+    for (let i = 0; i < 15; i++) {
+      await page.evaluate(() => window.scrollBy(0, 2000))
+      await sleep(1000)
+    }
+
+    // Scroll back up and down again
+    await page.evaluate(() => window.scrollTo(0, 0))
+    await sleep(1000)
+    for (let i = 0; i < 10; i++) {
+      await page.evaluate(() => window.scrollBy(0, 1500))
+      await sleep(800)
+    }
+
+    // Extract from page HTML source - TikTok embeds video IDs in the SSR data
+    const html = await page.content()
+
+    // Method 1: Find video IDs in href attributes
+    const hrefMatches = html.match(/\/@[^/]+\/video\/(\d+)/g) || []
+    const ids = new Set<string>()
+    hrefMatches.forEach(m => {
+      const id = m.match(/\/video\/(\d+)/)?.[1]
+      if (id) ids.add(id)
+    })
+
+    // Method 2: Find in JSON data / script tags
+    const jsonMatches = html.match(/"video\/(\d{15,25})"/g) || []
+    jsonMatches.forEach(m => {
+      const id = m.match(/(\d{15,25})/)?.[1]
+      if (id) ids.add(id)
+    })
+
+    // Method 3: Check __UNIVERSAL_DATA_FOR_REHYDRATION__ or SIGI_STATE
+    const dataMatches = html.match(/videoId['":\s]+['"](\d{15,25})['"]/g) || []
+    dataMatches.forEach(m => {
+      const id = m.match(/(\d{15,25})/)?.[1]
+      if (id) ids.add(id)
+    })
+
+    // Method 4: Look for video data in script tags
+    const scriptMatches = html.match(/"id"\s*:\s*"(\d{18,20})"/g) || []
+    scriptMatches.forEach(m => {
+      const id = m.match(/(\d{18,20})/)?.[1]
+      if (id) ids.add(id)
+    })
+
+    const videoIds = Array.from(ids)
+    console.log(`\nFound ${videoIds.length} video IDs for @${USERNAME}:`)
+    videoIds.forEach((id, i) => {
+      console.log(`  ${i + 1}. ${id} → https://www.tiktok.com/@${USERNAME}/video/${id}`)
+    })
+
+    console.log(`\n--- ARRAY FOR TikTokCarousel.tsx ---`)
+    console.log(`const TIKTOK_VIDEOS = ${JSON.stringify(videoIds, null, 2)}`)
+    console.log(`const TIKTOK_USERNAME = '${USERNAME}'`)
+
+  } catch (error) {
+    console.error('Scrape error:', error)
+  } finally {
+    await browser.close()
+  }
+}
+
+scrape()
diff --git a/scripts/send-followups.ts b/scripts/send-followups.ts
new file mode 100644
index 0000000..40d900a
--- /dev/null
+++ b/scripts/send-followups.ts
@@ -0,0 +1,125 @@
+/**
+ * Email follow-up drip worker. Run hourly via cron.
+ *   npx tsx scripts/send-followups.ts            # live
+ *   npx tsx scripts/send-followups.ts --dry-run  # preview, sends nothing
+ *
+ * Segments (mutually exclusive):
+ *   lead       — email captured, never started checkout
+ *   abandoned  — started checkout, payment not completed
+ *   customer   — paid (active/completed)
+ *
+ * Dedup is enforced by the email_followups table (unique on email+segment+step),
+ * so re-running is safe and each recipient advances one step per run.
+ */
+import 'dotenv/config'
+import pool from '../src/lib/db-mysql'
+import { sendLeadFollowup, sendAbandonedFollowup, sendBookingReminder } from '../src/lib/email'
+
+const DRY = process.argv.includes('--dry-run')
+
+// Internal/test domains to skip (don't drip our own test accounts).
+const SUPPRESS_DOMAINS = ['724c.com']
+const suppressed = (email: string) => SUPPRESS_DOMAINS.some(d => email.toLowerCase().endsWith('@' + d))
+
+const LEAD_DELAYS = [1, 24, 72]   // hours -> steps 0,1,2
+const ABANDONED_DELAYS = [1, 24]  // hours -> steps 0,1
+const CUSTOMER_DELAY = 72         // single booking reminder
+
+async function ensureTable() {
+  await pool.execute(`
+    CREATE TABLE IF NOT EXISTS email_followups (
+      id INT AUTO_INCREMENT PRIMARY KEY,
+      email VARCHAR(255) NOT NULL,
+      segment VARCHAR(32) NOT NULL,
+      step INT NOT NULL,
+      sent_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
+      UNIQUE KEY uniq_send (email, segment, step),
+      INDEX idx_email (email)
+    )`)
+}
+
+async function sentSteps(segment: string): Promise<Map<string, Set<number>>> {
+  const [rows] = await pool.execute('SELECT email, step FROM email_followups WHERE segment=?', [segment]) as any[]
+  const m = new Map<string, Set<number>>()
+  for (const r of rows) {
+    if (!m.has(r.email)) m.set(r.email, new Set())
+    m.get(r.email)!.add(r.step)
+  }
+  return m
+}
+
+async function record(email: string, segment: string, step: number) {
+  await pool.execute('INSERT IGNORE INTO email_followups (email, segment, step) VALUES (?,?,?)', [email, segment, step])
+}
+
+const hoursSince = (d: string | Date) => (Date.now() - new Date(d).getTime()) / 3.6e6
+
+// smallest step index whose delay has elapsed and hasn't been sent yet
+function nextDue(delays: number[], age: number, sent: Set<number>): number {
+  for (let i = 0; i < delays.length; i++) if (!sent.has(i) && age >= delays[i]) return i
+  return -1
+}
+
+async function processLeads() {
+  const [leads] = await pool.execute(`
+    SELECT e.email, e.created_at
+    FROM ebook_leads e
+    LEFT JOIN signups s ON s.email = e.email
+    WHERE s.id IS NULL
+  `) as any[]
+  const sent = await sentSteps('lead')
+  let n = 0
+  for (const l of leads) {
+    if (suppressed(l.email)) continue
+    const step = nextDue(LEAD_DELAYS, hoursSince(l.created_at), sent.get(l.email) || new Set())
+    if (step < 0) continue
+    if (!DRY) { await sendLeadFollowup(l.email, step); await record(l.email, 'lead', step) }
+    console.log(`  lead step${step + 1} -> ${l.email}${DRY ? ' (dry)' : ''}`); n++
+  }
+  return n
+}
+
+async function processAbandoned() {
+  const [rows] = await pool.execute(`
+    SELECT email, created_at FROM signups
+    WHERE payment_status IS NULL OR payment_status NOT IN ('active','completed')
+  `) as any[]
+  const sent = await sentSteps('abandoned')
+  let n = 0
+  for (const r of rows) {
+    if (suppressed(r.email)) continue
+    const step = nextDue(ABANDONED_DELAYS, hoursSince(r.created_at), sent.get(r.email) || new Set())
+    if (step < 0) continue
+    if (!DRY) { await sendAbandonedFollowup(r.email, step); await record(r.email, 'abandoned', step) }
+    console.log(`  abandoned step${step + 1} -> ${r.email}${DRY ? ' (dry)' : ''}`); n++
+  }
+  return n
+}
+
+async function processCustomers() {
+  const [rows] = await pool.execute(`
+    SELECT email, full_name, created_at FROM signups
+    WHERE payment_status IN ('active','completed')
+  `) as any[]
+  const sent = await sentSteps('customer')
+  let n = 0
+  for (const r of rows) {
+    if (suppressed(r.email)) continue
+    if ((sent.get(r.email) || new Set()).has(0) || hoursSince(r.created_at) < CUSTOMER_DELAY) continue
+    if (!DRY) { await sendBookingReminder(r.email, r.full_name); await record(r.email, 'customer', 0) }
+    console.log(`  customer reminder -> ${r.email}${DRY ? ' (dry)' : ''}`); n++
+  }
+  return n
+}
+
+async function main() {
+  await ensureTable()
+  console.log(`[followups] ${DRY ? 'DRY RUN — ' : ''}scanning…`)
+  const l = await processLeads()
+  const a = await processAbandoned()
+  const c = await processCustomers()
+  console.log(`[followups] ${l + a + c} email(s): ${l} lead, ${a} abandoned, ${c} customer${DRY ? '  (DRY RUN — nothing sent)' : ''}`)
+  await pool.end()
+}
+
+main().catch(e => { console.error('followups error:', e); process.exit(1) })
diff --git a/server.ts b/server.ts
index 0865ae9..6c2eb0c 100644
--- a/server.ts
+++ b/server.ts
@@ -5,7 +5,7 @@ import { Server } from 'socket.io';
 import next from 'next';
 
 const dev = process.env.NODE_ENV !== 'production';
-const currentPort = 3000;
+const currentPort = parseInt(process.env.PORT || '3000', 10);
 const hostname = '127.0.0.1';
 
 // Custom server with Socket.IO integration
diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
new file mode 100644
index 0000000..d0c8b64
--- /dev/null
+++ b/src/app/about/page.tsx
@@ -0,0 +1,96 @@
+import { Plane, Heart, Shield, Sparkles } from 'lucide-react'
+import Link from 'next/link'
+import type { Metadata } from 'next'
+import { PAYMENT_CONFIG } from '@/app/lp/_config/types'
+
+export const metadata: Metadata = {
+  title: 'About Us — Mexico Paradise Vacations',
+  description: 'How Mexico Paradise Vacations works, who we are, and why our all-inclusive Mexico certificates cost less than direct booking.',
+}
+
+export default function AboutPage() {
+  return (
+    <div className="min-h-screen bg-white">
+      <header className="border-b">
+        <div className="max-w-4xl mx-auto px-4 py-4 flex items-center justify-between">
+          <Link href="/" className="flex items-center gap-2">
+            <div className="w-8 h-8 bg-gradient-to-br from-orange-500 to-red-500 rounded-lg flex items-center justify-center">
+              <Plane className="w-4 h-4 text-white" />
+            </div>
+            <span className="font-bold text-gray-900">Mexico Paradise Vacations</span>
+          </Link>
+          <Link href="/" className="text-sm text-orange-600 hover:text-orange-700">Back to Home</Link>
+        </div>
+      </header>
+
+      <main className="max-w-4xl mx-auto px-4 py-12">
+        <h1 className="text-3xl font-bold text-gray-900 mb-2">About Mexico Paradise Vacations</h1>
+        <p className="text-gray-500 mb-8">Helping families take the Mexico trip they keep putting off.</p>
+
+        <div className="prose prose-gray max-w-none space-y-8 text-[15px] leading-relaxed">
+          <section>
+            <h2 className="text-xl font-bold text-gray-900">What we do</h2>
+            <p>Mexico Paradise Vacations sells pre-paid all-inclusive vacation certificates to luxury beachfront resorts in <b>Cancun, Cabo, Riviera Maya, and Puerto Vallarta</b>. Each certificate covers <b>5 days and 4 nights</b> for two adults, with kids under 12 staying free. Once you pay, the certificate is yours to redeem for any available dates in the next 18 months.</p>
+          </section>
+
+          <section>
+            <h2 className="text-xl font-bold text-gray-900">Why it&apos;s so much cheaper than booking direct</h2>
+            <p>This is the question almost everyone asks. The honest answer:</p>
+            <p>Resorts don&apos;t make their money on the room — they make it on the food, drinks, spa, excursions, and bar tabs you run while you&apos;re there. An empty room earns them nothing. So they partner with companies like ours to <b>fill rooms in advance at deeply discounted certificate prices</b>, knowing the rest of your spend will more than cover the gap. It&apos;s the same logic behind off-season cruise pricing and last-minute hotel apps — just structured as a pre-paid certificate so the resort can plan inventory.</p>
+            <p>It&apos;s real, it&apos;s legal, and the resorts you stay at are the same five-star properties listed on every travel site at full price.</p>
+          </section>
+
+          <section>
+            <h2 className="text-xl font-bold text-gray-900">What you actually pay</h2>
+            <div className="bg-orange-50 border border-orange-200 rounded-lg p-5 my-3">
+              <p className="text-sm text-gray-700 mb-2"><b>Two payment options:</b></p>
+              <ul className="space-y-1 text-sm">
+                <li>• <b>${PAYMENT_CONFIG.monthlyPrice}/month</b> for {PAYMENT_CONFIG.totalMonths} months (total ${PAYMENT_CONFIG.totalPrice})</li>
+                <li>• <b>${PAYMENT_CONFIG.oneTimePrice} one-time</b> (save ${PAYMENT_CONFIG.totalPrice - PAYMENT_CONFIG.oneTimePrice} vs the monthly plan)</li>
+              </ul>
+              <p className="text-xs text-gray-500 mt-2">Both options include the full 5-day / 4-night all-inclusive stay for two adults plus kids under 12.</p>
+            </div>
+            <p>You can book your travel dates immediately after the first payment. You don&apos;t have to wait to finish the payment plan.</p>
+          </section>
+
+          <section>
+            <h2 className="text-xl font-bold text-gray-900">The money-back guarantee</h2>
+            <p>If for any reason you&apos;re not satisfied within <b>30 days of purchase</b>, we&apos;ll refund you in full — no questions asked. We can offer this because, frankly, almost nobody asks for it. The math just works.</p>
+          </section>
+
+          <section>
+            <h2 className="text-xl font-bold text-gray-900">Who we are</h2>
+            <p>We&apos;re a small US-based team that&apos;s been in the travel-certificate business for years. We partner directly with resort groups and pass the savings to families who don&apos;t want to overpay for a vacation they deserve. We&apos;re not a marketplace, not a points scheme, and not a timeshare — just a pre-paid certificate for a real trip.</p>
+          </section>
+
+          <section>
+            <h2 className="text-xl font-bold text-gray-900">Where to go from here</h2>
+            <ul className="grid sm:grid-cols-2 gap-3 not-prose">
+              <li><Link href="/faq" className="block border border-gray-200 rounded-lg p-4 hover:border-orange-400 transition-colors">
+                <div className="font-bold text-gray-900 flex items-center gap-2"><Sparkles className="w-4 h-4 text-orange-500" />FAQ</div>
+                <div className="text-sm text-gray-500 mt-1">What&apos;s included, how to book, refund details.</div>
+              </Link></li>
+              <li><Link href="/reviews" className="block border border-gray-200 rounded-lg p-4 hover:border-orange-400 transition-colors">
+                <div className="font-bold text-gray-900 flex items-center gap-2"><Heart className="w-4 h-4 text-red-500" />Real reviews</div>
+                <div className="text-sm text-gray-500 mt-1">What real travelers say about their trips.</div>
+              </Link></li>
+              <li><Link href="/lp/golden-hour" className="block border border-gray-200 rounded-lg p-4 hover:border-orange-400 transition-colors">
+                <div className="font-bold text-gray-900 flex items-center gap-2"><Plane className="w-4 h-4 text-orange-600" />Claim a certificate</div>
+                <div className="text-sm text-gray-500 mt-1">5 days, 4 nights, all-inclusive — from ${PAYMENT_CONFIG.monthlyPrice}/mo.</div>
+              </Link></li>
+              <li><Link href="/privacy" className="block border border-gray-200 rounded-lg p-4 hover:border-orange-400 transition-colors">
+                <div className="font-bold text-gray-900 flex items-center gap-2"><Shield className="w-4 h-4 text-gray-600" />Privacy &amp; Terms</div>
+                <div className="text-sm text-gray-500 mt-1"><Link href="/privacy" className="underline">Privacy Policy</Link> · <Link href="/terms" className="underline">Terms of Service</Link></div>
+              </Link></li>
+            </ul>
+          </section>
+
+          <section>
+            <h2 className="text-xl font-bold text-gray-900">Contact</h2>
+            <p>Questions? Reach out at <a href="mailto:support@hi2b.com" className="text-orange-600 underline">support@hi2b.com</a> or call <a href="tel:8886022424" className="text-orange-600 underline">888-602-2424</a>.</p>
+          </section>
+        </div>
+      </main>
+    </div>
+  )
+}
diff --git a/src/app/admin/affiliates/page.tsx b/src/app/admin/affiliates/page.tsx
new file mode 100644
index 0000000..2015178
--- /dev/null
+++ b/src/app/admin/affiliates/page.tsx
@@ -0,0 +1,185 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Loader2 } from "lucide-react";
+
+interface Affiliate {
+  id: string | number;
+  name: string;
+  email: string;
+  code: string;
+  commission_rate: number;
+  status: string;
+  sales_count: number;
+  total_earned: number;
+  total_paid: number;
+}
+
+function affiliateStatusBadge(status: string) {
+  const s = status?.toLowerCase();
+  const styles: Record<string, string> = {
+    active: "bg-green-100 text-green-800 border-green-200",
+    pending: "bg-yellow-100 text-yellow-800 border-yellow-200",
+    suspended: "bg-red-100 text-red-800 border-red-200",
+  };
+  return (
+    <Badge variant="outline" className={styles[s] || ""}>
+      {status}
+    </Badge>
+  );
+}
+
+export default function AffiliatesPage() {
+  const [affiliates, setAffiliates] = useState<Affiliate[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [actionLoading, setActionLoading] = useState<string | number | null>(null);
+
+  async function fetchAffiliates() {
+    setLoading(true);
+    try {
+      const res = await fetch("/api/admin/affiliates");
+      if (res.ok) {
+        const json = await res.json();
+        setAffiliates(json.affiliates || []);
+      }
+    } catch (err) {
+      console.error("Failed to fetch affiliates:", err);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  useEffect(() => {
+    fetchAffiliates();
+  }, []);
+
+  async function updateStatus(id: string | number, status: string) {
+    setActionLoading(id);
+    try {
+      const res = await fetch("/api/admin/affiliates", {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ id, status }),
+      });
+      if (res.ok) {
+        await fetchAffiliates();
+      }
+    } catch (err) {
+      console.error("Failed to update affiliate:", err);
+    } finally {
+      setActionLoading(null);
+    }
+  }
+
+  function getActions(affiliate: Affiliate) {
+    const s = affiliate.status?.toLowerCase();
+    const isLoading = actionLoading === affiliate.id;
+
+    if (s === "pending") {
+      return (
+        <Button
+          size="sm"
+          className="bg-green-600 hover:bg-green-700 text-white"
+          disabled={isLoading}
+          onClick={() => updateStatus(affiliate.id, "active")}
+        >
+          {isLoading ? <Loader2 className="h-3 w-3 animate-spin" /> : "Approve"}
+        </Button>
+      );
+    }
+    if (s === "active") {
+      return (
+        <Button
+          size="sm"
+          variant="destructive"
+          disabled={isLoading}
+          onClick={() => updateStatus(affiliate.id, "suspended")}
+        >
+          {isLoading ? <Loader2 className="h-3 w-3 animate-spin" /> : "Suspend"}
+        </Button>
+      );
+    }
+    if (s === "suspended") {
+      return (
+        <Button
+          size="sm"
+          className="bg-green-600 hover:bg-green-700 text-white"
+          disabled={isLoading}
+          onClick={() => updateStatus(affiliate.id, "active")}
+        >
+          {isLoading ? <Loader2 className="h-3 w-3 animate-spin" /> : "Activate"}
+        </Button>
+      );
+    }
+    return null;
+  }
+
+  return (
+    <div className="space-y-6">
+      <Card>
+        <CardHeader>
+          <CardTitle>Affiliates</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="relative w-full overflow-x-auto">
+            <table className="w-full text-sm">
+              <thead>
+                <tr className="border-b">
+                  <th className="h-10 px-3 text-left font-medium text-muted-foreground">Name</th>
+                  <th className="h-10 px-3 text-left font-medium text-muted-foreground">Email</th>
+                  <th className="h-10 px-3 text-left font-medium text-muted-foreground">Code</th>
+                  <th className="h-10 px-3 text-left font-medium text-muted-foreground">Commission</th>
+                  <th className="h-10 px-3 text-left font-medium text-muted-foreground">Status</th>
+                  <th className="h-10 px-3 text-left font-medium text-muted-foreground">Sales</th>
+                  <th className="h-10 px-3 text-left font-medium text-muted-foreground">Total Earned</th>
+                  <th className="h-10 px-3 text-left font-medium text-muted-foreground">Total Paid</th>
+                  <th className="h-10 px-3 text-left font-medium text-muted-foreground">Actions</th>
+                </tr>
+              </thead>
+              <tbody>
+                {loading ? (
+                  Array.from({ length: 5 }).map((_, i) => (
+                    <tr key={i} className="border-b">
+                      {Array.from({ length: 9 }).map((_, j) => (
+                        <td key={j} className="p-3">
+                          <div className="h-4 animate-pulse rounded bg-gray-100" />
+                        </td>
+                      ))}
+                    </tr>
+                  ))
+                ) : affiliates.length > 0 ? (
+                  affiliates.map((aff) => (
+                    <tr key={aff.id} className="border-b hover:bg-muted/50 transition-colors">
+                      <td className="p-3 font-medium">{aff.name}</td>
+                      <td className="p-3 text-muted-foreground">{aff.email}</td>
+                      <td className="p-3 font-mono text-xs">{aff.code}</td>
+                      <td className="p-3">{(aff.commission_rate * 100).toFixed(0)}%</td>
+                      <td className="p-3">{affiliateStatusBadge(aff.status)}</td>
+                      <td className="p-3">{aff.sales_count}</td>
+                      <td className="p-3 font-medium">
+                        ${Number(aff.total_earned).toLocaleString("en-US", { minimumFractionDigits: 2 })}
+                      </td>
+                      <td className="p-3">
+                        ${Number(aff.total_paid).toLocaleString("en-US", { minimumFractionDigits: 2 })}
+                      </td>
+                      <td className="p-3">{getActions(aff)}</td>
+                    </tr>
+                  ))
+                ) : (
+                  <tr>
+                    <td colSpan={9} className="p-8 text-center text-muted-foreground">
+                      No affiliates found
+                    </td>
+                  </tr>
+                )}
+              </tbody>
+            </table>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/src/app/admin/analytics/page.tsx b/src/app/admin/analytics/page.tsx
new file mode 100644
index 0000000..66630a4
--- /dev/null
+++ b/src/app/admin/analytics/page.tsx
@@ -0,0 +1,265 @@
+"use client";
+
+import { useEffect, useState, useCallback } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import {
+  ResponsiveContainer,
+  AreaChart,
+  Area,
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  Tooltip,
+  CartesianGrid,
+  PieChart,
+  Pie,
+  Cell,
+} from "recharts";
+
+interface AnalyticsData {
+  salesByLP: { name: string; count: number }[];
+  salesBySource: { name: string; count: number }[];
+  salesByAffiliate: { name: string; count: number }[];
+  revenueOverTime: { date: string; revenue: number }[];
+  funnel: {
+    pageViews: number;
+    ebookDownloads: number;
+    signups: number;
+    paidCustomers: number;
+  };
+}
+
+const PIE_COLORS = ["#ea580c", "#f97316", "#fb923c", "#fdba74", "#fed7aa", "#9a3412", "#c2410c"];
+
+const dateRanges = [
+  { label: "7d", days: 7 },
+  { label: "30d", days: 30 },
+  { label: "90d", days: 90 },
+  { label: "All", days: 0 },
+];
+
+export default function AnalyticsPage() {
+  const [data, setData] = useState<AnalyticsData | null>(null);
+  const [days, setDays] = useState(30);
+  const [loading, setLoading] = useState(true);
+
+  const fetchAnalytics = useCallback(async () => {
+    setLoading(true);
+    try {
+      const params = days > 0 ? `?days=${days}` : "";
+      const res = await fetch(`/api/admin/analytics${params}`);
+      if (res.ok) setData(await res.json());
+    } catch (err) {
+      console.error("Failed to fetch analytics:", err);
+    } finally {
+      setLoading(false);
+    }
+  }, [days]);
+
+  useEffect(() => {
+    fetchAnalytics();
+  }, [fetchAnalytics]);
+
+  const funnelSteps = data?.funnel
+    ? [
+        { label: "Page Views", value: data.funnel.pageViews },
+        { label: "Ebook Downloads", value: data.funnel.ebookDownloads },
+        { label: "Signups", value: data.funnel.signups },
+        { label: "Paid", value: data.funnel.paidCustomers },
+      ]
+    : [];
+
+  const maxFunnel = funnelSteps.length > 0 ? Math.max(funnelSteps[0].value, 1) : 1;
+
+  return (
+    <div className="space-y-6">
+      {/* Date range selector */}
+      <div className="flex items-center gap-2">
+        <span className="text-sm font-medium text-muted-foreground mr-2">Period:</span>
+        {dateRanges.map((range) => (
+          <Button
+            key={range.label}
+            variant={days === range.days ? "default" : "outline"}
+            size="sm"
+            onClick={() => setDays(range.days)}
+            className={days === range.days ? "bg-orange-600 hover:bg-orange-700" : ""}
+          >
+            {range.label}
+          </Button>
+        ))}
+      </div>
+
+      {loading ? (
+        <div className="grid gap-6 lg:grid-cols-2">
+          {Array.from({ length: 4 }).map((_, i) => (
+            <Card key={i}>
+              <CardContent className="pt-6">
+                <div className="h-[300px] animate-pulse rounded bg-gray-100" />
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      ) : (
+        <div className="grid gap-6 lg:grid-cols-2">
+          {/* Revenue Over Time */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Revenue Over Time</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="h-[300px]">
+                {data?.revenueOverTime?.length ? (
+                  <ResponsiveContainer width="100%" height="100%">
+                    <AreaChart data={data.revenueOverTime}>
+                      <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
+                      <XAxis dataKey="date" tick={{ fontSize: 12 }} />
+                      <YAxis tick={{ fontSize: 12 }} />
+                      <Tooltip
+                        formatter={(value: number) => [`$${value.toLocaleString()}`, "Revenue"]}
+                      />
+                      <Area
+                        type="monotone"
+                        dataKey="revenue"
+                        stroke="#ea580c"
+                        fill="#fed7aa"
+                        strokeWidth={2}
+                      />
+                    </AreaChart>
+                  </ResponsiveContainer>
+                ) : (
+                  <div className="flex h-full items-center justify-center text-muted-foreground">
+                    No data available
+                  </div>
+                )}
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Sales by Landing Page - Horizontal Bar */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Sales by Landing Page (Top 10)</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="h-[300px]">
+                {data?.salesByLP?.length ? (
+                  <ResponsiveContainer width="100%" height="100%">
+                    <BarChart
+                      data={data.salesByLP.slice(0, 10)}
+                      layout="vertical"
+                      margin={{ left: 80 }}
+                    >
+                      <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
+                      <XAxis type="number" tick={{ fontSize: 12 }} />
+                      <YAxis
+                        dataKey="name"
+                        type="category"
+                        tick={{ fontSize: 11 }}
+                        width={70}
+                      />
+                      <Tooltip />
+                      <Bar dataKey="count" fill="#ea580c" radius={[0, 4, 4, 0]} />
+                    </BarChart>
+                  </ResponsiveContainer>
+                ) : (
+                  <div className="flex h-full items-center justify-center text-muted-foreground">
+                    No data available
+                  </div>
+                )}
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Sales by Source - Pie Chart */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Sales by Source</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="h-[300px]">
+                {data?.salesBySource?.length ? (
+                  <ResponsiveContainer width="100%" height="100%">
+                    <PieChart>
+                      <Pie
+                        data={data.salesBySource}
+                        dataKey="count"
+                        nameKey="name"
+                        cx="50%"
+                        cy="50%"
+                        outerRadius={100}
+                        label={({ name, percent }) =>
+                          `${name} (${(percent * 100).toFixed(0)}%)`
+                        }
+                      >
+                        {data.salesBySource.map((_, index) => (
+                          <Cell
+                            key={`cell-${index}`}
+                            fill={PIE_COLORS[index % PIE_COLORS.length]}
+                          />
+                        ))}
+                      </Pie>
+                      <Tooltip />
+                    </PieChart>
+                  </ResponsiveContainer>
+                ) : (
+                  <div className="flex h-full items-center justify-center text-muted-foreground">
+                    No data available
+                  </div>
+                )}
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Conversion Funnel */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Conversion Funnel</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-4">
+                {funnelSteps.length > 0 ? (
+                  funnelSteps.map((step, i) => {
+                    const pct = maxFunnel > 0 ? (step.value / maxFunnel) * 100 : 0;
+                    const dropoff =
+                      i > 0 && funnelSteps[i - 1].value > 0
+                        ? ((step.value / funnelSteps[i - 1].value) * 100).toFixed(1)
+                        : null;
+                    return (
+                      <div key={step.label}>
+                        <div className="flex items-center justify-between mb-1">
+                          <span className="text-sm font-medium">{step.label}</span>
+                          <div className="flex items-center gap-2">
+                            <span className="text-sm font-bold">
+                              {step.value.toLocaleString()}
+                            </span>
+                            {dropoff && (
+                              <span className="text-xs text-muted-foreground">
+                                ({dropoff}%)
+                              </span>
+                            )}
+                          </div>
+                        </div>
+                        <div className="h-8 w-full rounded-md bg-gray-100 overflow-hidden">
+                          <div
+                            className="h-full rounded-md bg-orange-500 transition-all duration-500"
+                            style={{ width: `${Math.max(pct, 2)}%` }}
+                          />
+                        </div>
+                      </div>
+                    );
+                  })
+                ) : (
+                  <div className="flex h-[240px] items-center justify-center text-muted-foreground">
+                    No funnel data available
+                  </div>
+                )}
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/admin/layout.tsx b/src/app/admin/layout.tsx
new file mode 100644
index 0000000..e353160
--- /dev/null
+++ b/src/app/admin/layout.tsx
@@ -0,0 +1,172 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useRouter, usePathname } from "next/navigation";
+import Link from "next/link";
+import {
+  LayoutDashboard,
+  ShoppingCart,
+  Users,
+  BarChart3,
+  UserCheck,
+  Wallet,
+  LogOut,
+  Menu,
+  X,
+  Plane,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const navItems = [
+  { href: "/admin", label: "Dashboard", icon: LayoutDashboard },
+  { href: "/admin/sales", label: "Sales", icon: ShoppingCart },
+  { href: "/admin/leads", label: "Leads", icon: Users },
+  { href: "/admin/analytics", label: "Analytics", icon: BarChart3 },
+  { href: "/admin/affiliates", label: "Affiliates", icon: UserCheck },
+  { href: "/admin/payouts", label: "Payouts", icon: Wallet },
+];
+
+export default function AdminLayout({ children }: { children: React.ReactNode }) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const [authed, setAuthed] = useState(false);
+  const [checking, setChecking] = useState(true);
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+
+  // Skip auth check for login page
+  const isLoginPage = pathname === "/admin/login";
+
+  useEffect(() => {
+    if (isLoginPage) {
+      setChecking(false);
+      setAuthed(true);
+      return;
+    }
+
+    async function checkAuth() {
+      try {
+        const res = await fetch("/api/admin/auth/me");
+        if (!res.ok) throw new Error("Unauthorized");
+        setAuthed(true);
+      } catch {
+        router.replace("/admin/login");
+      } finally {
+        setChecking(false);
+      }
+    }
+    checkAuth();
+  }, [isLoginPage, router]);
+
+  async function handleLogout() {
+    document.cookie = "admin_token=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT";
+    router.replace("/admin/login");
+  }
+
+  if (isLoginPage) {
+    return <>{children}</>;
+  }
+
+  if (checking) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gray-50">
+        <div className="flex flex-col items-center gap-3">
+          <div className="h-8 w-8 animate-spin rounded-full border-4 border-orange-600 border-t-transparent" />
+          <p className="text-sm text-muted-foreground">Verifying access...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!authed) return null;
+
+  return (
+    <div className="min-h-screen flex bg-gray-50">
+      {/* Mobile overlay */}
+      {sidebarOpen && (
+        <div
+          className="fixed inset-0 z-40 bg-black/50 lg:hidden"
+          onClick={() => setSidebarOpen(false)}
+        />
+      )}
+
+      {/* Sidebar */}
+      <aside
+        className={cn(
+          "fixed inset-y-0 left-0 z-50 flex w-64 flex-col bg-gray-900 text-white transition-transform lg:static lg:translate-x-0",
+          sidebarOpen ? "translate-x-0" : "-translate-x-full"
+        )}
+      >
+        <div className="flex h-16 items-center gap-2 px-6 border-b border-gray-800">
+          <Plane className="h-6 w-6 text-orange-400" />
+          <span className="font-semibold text-lg">MPV Admin</span>
+          <button
+            className="ml-auto lg:hidden text-gray-400 hover:text-white"
+            onClick={() => setSidebarOpen(false)}
+          >
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+
+        <nav className="flex-1 space-y-1 px-3 py-4">
+          {navItems.map((item) => {
+            const isActive =
+              item.href === "/admin"
+                ? pathname === "/admin"
+                : pathname.startsWith(item.href);
+            return (
+              <Link
+                key={item.href}
+                href={item.href}
+                onClick={() => setSidebarOpen(false)}
+                className={cn(
+                  "flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors",
+                  isActive
+                    ? "bg-orange-600 text-white"
+                    : "text-gray-300 hover:bg-gray-800 hover:text-white"
+                )}
+              >
+                <item.icon className="h-5 w-5" />
+                {item.label}
+              </Link>
+            );
+          })}
+        </nav>
+
+        <div className="border-t border-gray-800 p-3">
+          <button
+            onClick={handleLogout}
+            className="flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium text-gray-300 hover:bg-gray-800 hover:text-white transition-colors"
+          >
+            <LogOut className="h-5 w-5" />
+            Logout
+          </button>
+        </div>
+      </aside>
+
+      {/* Main content */}
+      <div className="flex-1 flex flex-col min-w-0">
+        {/* Top bar */}
+        <header className="sticky top-0 z-30 flex h-16 items-center gap-4 border-b bg-white px-6">
+          <Button
+            variant="ghost"
+            size="icon"
+            className="lg:hidden"
+            onClick={() => setSidebarOpen(true)}
+          >
+            <Menu className="h-5 w-5" />
+          </Button>
+          <h1 className="text-lg font-semibold text-gray-900">
+            {navItems.find((n) =>
+              n.href === "/admin"
+                ? pathname === "/admin"
+                : pathname.startsWith(n.href)
+            )?.label || "Admin"}
+          </h1>
+        </header>
+
+        <main className="flex-1 p-6">{children}</main>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/admin/leads/page.tsx b/src/app/admin/leads/page.tsx
new file mode 100644
index 0000000..53e8457
--- /dev/null
+++ b/src/app/admin/leads/page.tsx
@@ -0,0 +1,163 @@
+"use client";
+
+import { useEffect, useState, useCallback } from "react";
+import { Search, ChevronLeft, ChevronRight } from "lucide-react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+
+interface Lead {
+  id: string | number;
+  email: string;
+  name: string;
+  source_lp: string;
+  utm_source: string;
+  created_at: string;
+}
+
+interface LeadsResponse {
+  data: Lead[];
+  total: number;
+  page: number;
+  limit: number;
+  totalPages: number;
+}
+
+export default function LeadsPage() {
+  const [data, setData] = useState<LeadsResponse | null>(null);
+  const [page, setPage] = useState(1);
+  const [search, setSearch] = useState("");
+  const [searchInput, setSearchInput] = useState("");
+  const [loading, setLoading] = useState(true);
+  const limit = 25;
+
+  const fetchLeads = useCallback(async () => {
+    setLoading(true);
+    try {
+      const params = new URLSearchParams({ page: String(page), limit: String(limit) });
+      if (search) params.set("search", search);
+      const res = await fetch(`/api/admin/leads?${params}`);
+      if (res.ok) setData(await res.json());
+    } catch (err) {
+      console.error("Failed to fetch leads:", err);
+    } finally {
+      setLoading(false);
+    }
+  }, [page, search]);
+
+  useEffect(() => {
+    fetchLeads();
+  }, [fetchLeads]);
+
+  function handleSearch(e: React.FormEvent) {
+    e.preventDefault();
+    setPage(1);
+    setSearch(searchInput);
+  }
+
+  return (
+    <div className="space-y-6">
+      <Card>
+        <CardHeader>
+          <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+            <CardTitle>Ebook Leads</CardTitle>
+            <form onSubmit={handleSearch} className="flex gap-2">
+              <div className="relative">
+                <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+                <Input
+                  placeholder="Search by name or email..."
+                  value={searchInput}
+                  onChange={(e) => setSearchInput(e.target.value)}
+                  className="pl-9 w-64"
+                />
+              </div>
+              <Button type="submit" variant="secondary">
+                Search
+              </Button>
+            </form>
+          </div>
+        </CardHeader>
+        <CardContent>
+          <div className="relative w-full overflow-x-auto">
+            <table className="w-full text-sm">
+              <thead>
+                <tr className="border-b">
+                  <th className="h-10 px-3 text-left font-medium text-muted-foreground">ID</th>
+                  <th className="h-10 px-3 text-left font-medium text-muted-foreground">Email</th>
+                  <th className="h-10 px-3 text-left font-medium text-muted-foreground">Name</th>
+                  <th className="h-10 px-3 text-left font-medium text-muted-foreground">Source LP</th>
+                  <th className="h-10 px-3 text-left font-medium text-muted-foreground">UTM Source</th>
+                  <th className="h-10 px-3 text-left font-medium text-muted-foreground">Date</th>
+                </tr>
+              </thead>
+              <tbody>
+                {loading ? (
+                  Array.from({ length: 5 }).map((_, i) => (
+                    <tr key={i} className="border-b">
+                      {Array.from({ length: 6 }).map((_, j) => (
+                        <td key={j} className="p-3">
+                          <div className="h-4 animate-pulse rounded bg-gray-100" />
+                        </td>
+                      ))}
+                    </tr>
+                  ))
+                ) : data?.data?.length ? (
+                  data.data.map((lead) => (
+                    <tr key={lead.id} className="border-b hover:bg-muted/50 transition-colors">
+                      <td className="p-3 font-mono text-xs">{lead.id}</td>
+                      <td className="p-3">{lead.email}</td>
+                      <td className="p-3">{lead.name || "-"}</td>
+                      <td className="p-3">{lead.source_lp || "-"}</td>
+                      <td className="p-3">{lead.utm_source || "-"}</td>
+                      <td className="p-3 text-muted-foreground whitespace-nowrap">
+                        {lead.created_at ? new Date(lead.created_at).toLocaleDateString() : "-"}
+                      </td>
+                    </tr>
+                  ))
+                ) : (
+                  <tr>
+                    <td colSpan={6} className="p-8 text-center text-muted-foreground">
+                      No leads found
+                    </td>
+                  </tr>
+                )}
+              </tbody>
+            </table>
+          </div>
+
+          {data && data.totalPages > 1 && (
+            <div className="flex items-center justify-between mt-4 pt-4 border-t">
+              <p className="text-sm text-muted-foreground">
+                Showing {(data.page - 1) * data.limit + 1} to{" "}
+                {Math.min(data.page * data.limit, data.total)} of {data.total} results
+              </p>
+              <div className="flex items-center gap-2">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  disabled={page <= 1}
+                  onClick={() => setPage((p) => p - 1)}
+                >
+                  <ChevronLeft className="h-4 w-4" />
+                  Previous
+                </Button>
+                <span className="text-sm text-muted-foreground px-2">
+                  Page {data.page} of {data.totalPages}
+                </span>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  disabled={page >= data.totalPages}
+                  onClick={() => setPage((p) => p + 1)}
+                >
+                  Next
+                  <ChevronRight className="h-4 w-4" />
+                </Button>
+              </div>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/src/app/admin/login/page.tsx b/src/app/admin/login/page.tsx
new file mode 100644
index 0000000..52bf234
--- /dev/null
+++ b/src/app/admin/login/page.tsx
@@ -0,0 +1,101 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { Plane, Loader2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+
+export default function AdminLoginPage() {
+  const router = useRouter();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setError("");
+    setLoading(true);
+
+    try {
+      const res = await fetch("/api/admin/auth/login", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email, password }),
+      });
+
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}));
+        throw new Error(data.error || "Invalid credentials");
+      }
+
+      router.push("/admin");
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : "Login failed");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-orange-50 to-amber-50">
+      <Card className="w-full max-w-md mx-4">
+        <CardHeader className="text-center">
+          <div className="mx-auto mb-2 flex h-14 w-14 items-center justify-center rounded-full bg-orange-100">
+            <Plane className="h-7 w-7 text-orange-600" />
+          </div>
+          <CardTitle className="text-2xl">Mexico Paradise Vacations</CardTitle>
+          <CardDescription>Admin Portal</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit} className="space-y-4">
+            {error && (
+              <div className="rounded-md bg-red-50 border border-red-200 p-3 text-sm text-red-700">
+                {error}
+              </div>
+            )}
+            <div className="space-y-2">
+              <Label htmlFor="email">Email</Label>
+              <Input
+                id="email"
+                type="email"
+                placeholder="admin@example.com"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="password">Password</Label>
+              <Input
+                id="password"
+                type="password"
+                placeholder="Enter your password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                required
+              />
+            </div>
+            <Button
+              type="submit"
+              className="w-full bg-orange-600 hover:bg-orange-700 text-white"
+              disabled={loading}
+            >
+              {loading ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  Signing in...
+                </>
+              ) : (
+                "Sign In"
+              )}
+            </Button>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
new file mode 100644
index 0000000..fce8bf0
--- /dev/null
+++ b/src/app/admin/page.tsx
@@ -0,0 +1,183 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import {
+  DollarSign,
+  ShoppingCart,
+  TrendingUp,
+  Users,
+  Eye,
+  Percent,
+} from "lucide-react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  ResponsiveContainer,
+  AreaChart,
+  Area,
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  Tooltip,
+  CartesianGrid,
+} from "recharts";
+
+interface Stats {
+  totalSales: number;
+  totalRevenue: number;
+  mrr: number;
+  totalLeads: number;
+  totalViews: number;
+  conversionRate: number;
+}
+
+interface AnalyticsData {
+  revenueOverTime: { date: string; revenue: number }[];
+  salesByLP: { name: string; count: number }[];
+}
+
+const kpiConfig = [
+  { key: "totalSales" as const, label: "Total Sales", icon: ShoppingCart, format: "number" },
+  { key: "totalRevenue" as const, label: "Total Revenue", icon: DollarSign, format: "currency" },
+  { key: "mrr" as const, label: "MRR", icon: TrendingUp, format: "currency" },
+  { key: "totalLeads" as const, label: "Total Leads", icon: Users, format: "number" },
+  { key: "totalViews" as const, label: "Page Views", icon: Eye, format: "number" },
+  { key: "conversionRate" as const, label: "Conversion Rate", icon: Percent, format: "percent" },
+];
+
+function formatValue(value: number, format: string): string {
+  switch (format) {
+    case "currency":
+      return `$${value.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+    case "percent":
+      return `${value.toFixed(1)}%`;
+    default:
+      return value.toLocaleString();
+  }
+}
+
+export default function AdminDashboardPage() {
+  const [stats, setStats] = useState<Stats | null>(null);
+  const [analytics, setAnalytics] = useState<AnalyticsData | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    async function fetchData() {
+      try {
+        const [statsRes, analyticsRes] = await Promise.all([
+          fetch("/api/admin/stats"),
+          fetch("/api/admin/analytics"),
+        ]);
+        if (statsRes.ok) setStats(await statsRes.json());
+        if (analyticsRes.ok) setAnalytics(await analyticsRes.json());
+      } catch (err) {
+        console.error("Failed to fetch dashboard data:", err);
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchData();
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="space-y-6">
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+          {Array.from({ length: 6 }).map((_, i) => (
+            <Card key={i}>
+              <CardContent className="pt-6">
+                <div className="h-16 animate-pulse rounded bg-gray-100" />
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* KPI Cards */}
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+        {kpiConfig.map((kpi) => (
+          <Card key={kpi.key}>
+            <CardContent className="pt-6">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm font-medium text-muted-foreground">{kpi.label}</p>
+                  <p className="text-2xl font-bold mt-1">
+                    {stats ? formatValue(stats[kpi.key], kpi.format) : "--"}
+                  </p>
+                </div>
+                <div className="flex h-12 w-12 items-center justify-center rounded-full bg-orange-100">
+                  <kpi.icon className="h-6 w-6 text-orange-600" />
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      {/* Charts */}
+      <div className="grid gap-6 lg:grid-cols-2">
+        <Card>
+          <CardHeader>
+            <CardTitle>Revenue Over Time</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="h-[300px]">
+              {analytics?.revenueOverTime?.length ? (
+                <ResponsiveContainer width="100%" height="100%">
+                  <AreaChart data={analytics.revenueOverTime}>
+                    <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
+                    <XAxis dataKey="date" tick={{ fontSize: 12 }} />
+                    <YAxis tick={{ fontSize: 12 }} />
+                    <Tooltip
+                      formatter={(value: number) => [`$${value.toLocaleString()}`, "Revenue"]}
+                    />
+                    <Area
+                      type="monotone"
+                      dataKey="revenue"
+                      stroke="#ea580c"
+                      fill="#fed7aa"
+                      strokeWidth={2}
+                    />
+                  </AreaChart>
+                </ResponsiveContainer>
+              ) : (
+                <div className="flex h-full items-center justify-center text-muted-foreground">
+                  No data available
+                </div>
+              )}
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Sales by Landing Page</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="h-[300px]">
+              {analytics?.salesByLP?.length ? (
+                <ResponsiveContainer width="100%" height="100%">
+                  <BarChart data={analytics.salesByLP}>
+                    <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
+                    <XAxis dataKey="name" tick={{ fontSize: 12 }} />
+                    <YAxis tick={{ fontSize: 12 }} />
+                    <Tooltip />
+                    <Bar dataKey="count" fill="#ea580c" radius={[4, 4, 0, 0]} />
+                  </BarChart>
+                </ResponsiveContainer>
+              ) : (
+                <div className="flex h-full items-center justify-center text-muted-foreground">
+                  No data available
+                </div>
+              )}
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/admin/payouts/page.tsx b/src/app/admin/payouts/page.tsx
new file mode 100644
index 0000000..41cd886
--- /dev/null
+++ b/src/app/admin/payouts/page.tsx
@@ -0,0 +1,301 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Loader2, Plus } from "lucide-react";
+
+interface Payout {
+  id: string | number;
+  affiliate_name: string;
+  amount: number;
+  method: string;
+  reference: string;
+  status: string;
+  created_at: string;
+}
+
+interface Affiliate {
+  id: string | number;
+  name: string;
+  email: string;
+}
+
+const METHODS = [
+  { value: "paypal", label: "PayPal" },
+  { value: "bank", label: "Bank Transfer" },
+  { value: "check", label: "Check" },
+  { value: "zelle", label: "Zelle" },
+];
+
+function payoutStatusBadge(status: string) {
+  const s = status?.toLowerCase();
+  const styles: Record<string, string> = {
+    completed: "bg-green-100 text-green-800 border-green-200",
+    pending: "bg-yellow-100 text-yellow-800 border-yellow-200",
+    failed: "bg-red-100 text-red-800 border-red-200",
+    processing: "bg-blue-100 text-blue-800 border-blue-200",
+  };
+  return (
+    <Badge variant="outline" className={styles[s] || ""}>
+      {status}
+    </Badge>
+  );
+}
+
+export default function PayoutsPage() {
+  const [payouts, setPayouts] = useState<Payout[]>([]);
+  const [affiliates, setAffiliates] = useState<Affiliate[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [submitting, setSubmitting] = useState(false);
+  const [showForm, setShowForm] = useState(false);
+
+  // Form state
+  const [affiliateId, setAffiliateId] = useState("");
+  const [amount, setAmount] = useState("");
+  const [method, setMethod] = useState("");
+  const [reference, setReference] = useState("");
+  const [formError, setFormError] = useState("");
+  const [formSuccess, setFormSuccess] = useState("");
+
+  async function fetchData() {
+    setLoading(true);
+    try {
+      const [payoutsRes, affiliatesRes] = await Promise.all([
+        fetch("/api/admin/payouts"),
+        fetch("/api/admin/affiliates"),
+      ]);
+      if (payoutsRes.ok) {
+        const json = await payoutsRes.json();
+        setPayouts(json.payouts || json.data || []);
+      }
+      if (affiliatesRes.ok) {
+        const json = await affiliatesRes.json();
+        setAffiliates(json.affiliates || []);
+      }
+    } catch (err) {
+      console.error("Failed to fetch payouts:", err);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setFormError("");
+    setFormSuccess("");
+
+    if (!affiliateId || !amount || !method) {
+      setFormError("Please fill in all required fields.");
+      return;
+    }
+
+    setSubmitting(true);
+    try {
+      const res = await fetch("/api/admin/payouts", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          affiliate_id: affiliateId,
+          amount: parseFloat(amount),
+          method,
+          reference,
+        }),
+      });
+
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}));
+        throw new Error(data.error || "Failed to create payout");
+      }
+
+      setFormSuccess("Payout created successfully.");
+      setAffiliateId("");
+      setAmount("");
+      setMethod("");
+      setReference("");
+      setShowForm(false);
+      await fetchData();
+    } catch (err: unknown) {
+      setFormError(err instanceof Error ? err.message : "Failed to create payout");
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Create Payout */}
+      <Card>
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <CardTitle>Create Payout</CardTitle>
+            <Button
+              variant={showForm ? "secondary" : "default"}
+              size="sm"
+              onClick={() => setShowForm(!showForm)}
+              className={!showForm ? "bg-orange-600 hover:bg-orange-700 text-white" : ""}
+            >
+              <Plus className="h-4 w-4 mr-1" />
+              {showForm ? "Cancel" : "New Payout"}
+            </Button>
+          </div>
+        </CardHeader>
+        {showForm && (
+          <CardContent>
+            <form onSubmit={handleSubmit} className="space-y-4">
+              {formError && (
+                <div className="rounded-md bg-red-50 border border-red-200 p-3 text-sm text-red-700">
+                  {formError}
+                </div>
+              )}
+              {formSuccess && (
+                <div className="rounded-md bg-green-50 border border-green-200 p-3 text-sm text-green-700">
+                  {formSuccess}
+                </div>
+              )}
+              <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+                <div className="space-y-2">
+                  <Label>Affiliate *</Label>
+                  <Select value={affiliateId} onValueChange={setAffiliateId}>
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select affiliate" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {affiliates.map((aff) => (
+                        <SelectItem key={aff.id} value={String(aff.id)}>
+                          {aff.name} ({aff.email})
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="space-y-2">
+                  <Label>Amount ($) *</Label>
+                  <Input
+                    type="number"
+                    step="0.01"
+                    min="0.01"
+                    placeholder="0.00"
+                    value={amount}
+                    onChange={(e) => setAmount(e.target.value)}
+                    required
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label>Method *</Label>
+                  <Select value={method} onValueChange={setMethod}>
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select method" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {METHODS.map((m) => (
+                        <SelectItem key={m.value} value={m.value}>
+                          {m.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="space-y-2">
+                  <Label>Reference</Label>
+                  <Input
+                    placeholder="Transaction ID, etc."
+                    value={reference}
+                    onChange={(e) => setReference(e.target.value)}
+                  />
+                </div>
+              </div>
+              <Button
+                type="submit"
+                disabled={submitting}
+                className="bg-orange-600 hover:bg-orange-700 text-white"
+              >
+                {submitting ? (
+                  <>
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                    Creating...
+                  </>
+                ) : (
+                  "Create Payout"
+                )}
+              </Button>
+            </form>
+          </CardContent>
+        )}
+      </Card>
+
+      {/* Payouts Table */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Payout History</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="relative w-full overflow-x-auto">
+            <table className="w-full text-sm">
+              <thead>
+                <tr className="border-b">
+                  <th className="h-10 px-3 text-left font-medium text-muted-foreground">ID</th>
+                  <th className="h-10 px-3 text-left font-medium text-muted-foreground">Affiliate</th>
+                  <th className="h-10 px-3 text-left font-medium text-muted-foreground">Amount</th>
+                  <th className="h-10 px-3 text-left font-medium text-muted-foreground">Method</th>
+                  <th className="h-10 px-3 text-left font-medium text-muted-foreground">Reference</th>
+                  <th className="h-10 px-3 text-left font-medium text-muted-foreground">Status</th>
+                  <th className="h-10 px-3 text-left font-medium text-muted-foreground">Date</th>
+                </tr>
+              </thead>
+              <tbody>
+                {loading ? (
+                  Array.from({ length: 5 }).map((_, i) => (
+                    <tr key={i} className="border-b">
+                      {Array.from({ length: 7 }).map((_, j) => (
+                        <td key={j} className="p-3">
+                          <div className="h-4 animate-pulse rounded bg-gray-100" />
+                        </td>
+                      ))}
+                    </tr>
+                  ))
+                ) : payouts.length > 0 ? (
+                  payouts.map((payout) => (
+                    <tr key={payout.id} className="border-b hover:bg-muted/50 transition-colors">
+                      <td className="p-3 font-mono text-xs">{payout.id}</td>
+                      <td className="p-3">{payout.affiliate_name}</td>
+                      <td className="p-3 font-medium">
+                        ${Number(payout.amount).toLocaleString("en-US", { minimumFractionDigits: 2 })}
+                      </td>
+                      <td className="p-3 capitalize">{payout.method}</td>
+                      <td className="p-3 font-mono text-xs">{payout.reference || "-"}</td>
+                      <td className="p-3">{payoutStatusBadge(payout.status)}</td>
+                      <td className="p-3 text-muted-foreground whitespace-nowrap">
+                        {payout.created_at ? new Date(payout.created_at).toLocaleDateString() : "-"}
+                      </td>
+                    </tr>
+                  ))
+                ) : (
+                  <tr>
+                    <td colSpan={7} className="p-8 text-center text-muted-foreground">
+                      No payouts found
+                    </td>
+                  </tr>
+                )}
+              </tbody>
+            </table>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/src/app/admin/sales/page.tsx b/src/app/admin/sales/page.tsx
new file mode 100644
index 0000000..1b90881
--- /dev/null
+++ b/src/app/admin/sales/page.tsx
@@ -0,0 +1,239 @@
+"use client";
+
+import { useEffect, useState, useCallback } from "react";
+import { Search, ChevronLeft, ChevronRight } from "lucide-react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+
+interface Sale {
+  id: string | number;
+  full_name: string;
+  email: string;
+  amount: number;
+  payment_status: string;
+  source_lp: string;
+  utm_source: string;
+  affiliate_name: string | null;
+  created_at: string;
+  certificate_number: string | null;
+  certificate_expires: string | null;
+  payment_plan_months: number | null;
+  payments_made: number | null;
+}
+
+function validityCell(expires: string | null) {
+  if (!expires) return <span className="text-muted-foreground">-</span>;
+  const exp = new Date(expires);
+  const days = Math.ceil((exp.getTime() - Date.now()) / (1000 * 60 * 60 * 24));
+  const date = exp.toLocaleDateString();
+  let cls = "text-green-700";
+  let label = `${days}d left`;
+  if (days < 0) { cls = "text-red-700 font-medium"; label = `Expired ${Math.abs(days)}d ago`; }
+  else if (days <= 30) { cls = "text-red-600"; }
+  else if (days <= 90) { cls = "text-amber-600"; }
+  return (
+    <div className="flex flex-col">
+      <span className="whitespace-nowrap">{date}</span>
+      <span className={`text-xs ${cls}`}>{label}</span>
+    </div>
+  );
+}
+
+function paymentsCell(made: number | null, plan: number | null) {
+  const m = Number(made ?? 0);
+  const p = Number(plan ?? 0);
+  if (!p) return <span className="font-mono text-xs">{m}</span>;
+  const complete = m >= p;
+  return (
+    <span className={`font-mono text-xs ${complete ? "text-green-700 font-semibold" : ""}`}>
+      {m}/{p}
+    </span>
+  );
+}
+
+interface SalesResponse {
+  data: Sale[];
+  total: number;
+  page: number;
+  limit: number;
+  totalPages: number;
+}
+
+function statusBadge(status: string) {
+  const s = status?.toLowerCase();
+  const styles: Record<string, string> = {
+    active: "bg-green-100 text-green-800 border-green-200",
+    pending: "bg-yellow-100 text-yellow-800 border-yellow-200",
+    failed: "bg-red-100 text-red-800 border-red-200",
+    completed: "bg-blue-100 text-blue-800 border-blue-200",
+  };
+  return (
+    <Badge variant="outline" className={styles[s] || ""}>
+      {status}
+    </Badge>
+  );
+}
+
+export default function SalesPage() {
+  const [data, setData] = useState<SalesResponse | null>(null);
+  const [page, setPage] = useState(1);
+  const [search, setSearch] = useState("");
+  const [searchInput, setSearchInput] = useState("");
+  const [loading, setLoading] = useState(true);
+  const limit = 25;
+
+  const fetchSales = useCallback(async () => {
+    setLoading(true);
+    try {
+      const params = new URLSearchParams({ page: String(page), limit: String(limit) });
+      if (search) params.set("search", search);
+      const res = await fetch(`/api/admin/sales?${params}`);
+      if (res.ok) setData(await res.json());
+    } catch (err) {
+      console.error("Failed to fetch sales:", err);
+    } finally {
+      setLoading(false);
+    }
+  }, [page, search]);
+
+  useEffect(() => {
+    fetchSales();
+  }, [fetchSales]);
+
+  function handleSearch(e: React.FormEvent) {
+    e.preventDefault();
+    setPage(1);
+    setSearch(searchInput);
+  }
+
+  return (
+    <div className="space-y-6">
+      <Card>
+        <CardHeader>
+          <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+            <CardTitle>Sales</CardTitle>
+            <form onSubmit={handleSearch} className="flex gap-2">
+              <div className="relative">
+                <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+                <Input
+                  placeholder="Search by name or email..."
+                  value={searchInput}
+                  onChange={(e) => setSearchInput(e.target.value)}
+                  className="pl-9 w-64"
+                />
+              </div>
+              <Button type="submit" variant="secondary">
+                Search
+              </Button>
+            </form>
+          </div>
+        </CardHeader>
+        <CardContent>
+          <div className="relative w-full overflow-x-auto">
+            <table className="w-full text-sm">
+              <thead>
+                <tr className="border-b">
+                  <th className="h-10 px-3 text-left font-medium text-muted-foreground">ID</th>
+                  <th className="h-10 px-3 text-left font-medium text-muted-foreground">Name</th>
+                  <th className="h-10 px-3 text-left font-medium text-muted-foreground">Email</th>
+                  <th className="h-10 px-3 text-left font-medium text-muted-foreground">Amount</th>
+                  <th className="h-10 px-3 text-left font-medium text-muted-foreground">Status</th>
+                  <th className="h-10 px-3 text-left font-medium text-muted-foreground">Certificate #</th>
+                  <th className="h-10 px-3 text-left font-medium text-muted-foreground">Valid Until</th>
+                  <th className="h-10 px-3 text-left font-medium text-muted-foreground">Payments</th>
+                  <th className="h-10 px-3 text-left font-medium text-muted-foreground">Source LP</th>
+                  <th className="h-10 px-3 text-left font-medium text-muted-foreground">UTM Source</th>
+                  <th className="h-10 px-3 text-left font-medium text-muted-foreground">Affiliate</th>
+                  <th className="h-10 px-3 text-left font-medium text-muted-foreground">Date</th>
+                </tr>
+              </thead>
+              <tbody>
+                {loading ? (
+                  Array.from({ length: 5 }).map((_, i) => (
+                    <tr key={i} className="border-b">
+                      {Array.from({ length: 12 }).map((_, j) => (
+                        <td key={j} className="p-3">
+                          <div className="h-4 animate-pulse rounded bg-gray-100" />
+                        </td>
+                      ))}
+                    </tr>
+                  ))
+                ) : data?.data?.length ? (
+                  data.data.map((sale) => (
+                    <tr key={sale.id} className="border-b hover:bg-muted/50 transition-colors">
+                      <td className="p-3 font-mono text-xs">{sale.id}</td>
+                      <td className="p-3">{sale.full_name || "-"}</td>
+                      <td className="p-3 text-muted-foreground">{sale.email}</td>
+                      <td className="p-3 font-medium">
+                        ${Number(sale.amount).toLocaleString("en-US", { minimumFractionDigits: 2 })}
+                      </td>
+                      <td className="p-3">{statusBadge(sale.payment_status)}</td>
+                      <td className="p-3">
+                        {sale.certificate_number ? (
+                          <span className="font-mono text-xs bg-orange-50 text-orange-800 border border-orange-200 px-2 py-0.5 rounded">
+                            {sale.certificate_number}
+                          </span>
+                        ) : (
+                          <span className="text-muted-foreground">-</span>
+                        )}
+                      </td>
+                      <td className="p-3">{validityCell(sale.certificate_expires)}</td>
+                      <td className="p-3">{paymentsCell(sale.payments_made, sale.payment_plan_months)}</td>
+                      <td className="p-3">{sale.source_lp || "-"}</td>
+                      <td className="p-3">{sale.utm_source || "-"}</td>
+                      <td className="p-3">{sale.affiliate_name || "-"}</td>
+                      <td className="p-3 text-muted-foreground whitespace-nowrap">
+                        {sale.created_at ? new Date(sale.created_at).toLocaleDateString() : "-"}
+                      </td>
+                    </tr>
+                  ))
+                ) : (
+                  <tr>
+                    <td colSpan={12} className="p-8 text-center text-muted-foreground">
+                      No sales found
+                    </td>
+                  </tr>
+                )}
+              </tbody>
+            </table>
+          </div>
+
+          {/* Pagination */}
+          {data && data.totalPages > 1 && (
+            <div className="flex items-center justify-between mt-4 pt-4 border-t">
+              <p className="text-sm text-muted-foreground">
+                Showing {(data.page - 1) * data.limit + 1} to{" "}
+                {Math.min(data.page * data.limit, data.total)} of {data.total} results
+              </p>
+              <div className="flex items-center gap-2">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  disabled={page <= 1}
+                  onClick={() => setPage((p) => p - 1)}
+                >
+                  <ChevronLeft className="h-4 w-4" />
+                  Previous
+                </Button>
+                <span className="text-sm text-muted-foreground px-2">
+                  Page {data.page} of {data.totalPages}
+                </span>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  disabled={page >= data.totalPages}
+                  onClick={() => setPage((p) => p + 1)}
+                >
+                  Next
+                  <ChevronRight className="h-4 w-4" />
+                </Button>
+              </div>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/src/app/affiliate/layout.tsx b/src/app/affiliate/layout.tsx
new file mode 100644
index 0000000..daa1a3f
--- /dev/null
+++ b/src/app/affiliate/layout.tsx
@@ -0,0 +1,217 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useRouter, usePathname } from "next/navigation";
+import Link from "next/link";
+import { LayoutDashboard, Users, Wallet, LogOut, Copy, CheckCircle, Menu, X } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+interface AffiliateData {
+  name: string;
+  email: string;
+  referral_code: string;
+  commission_rate: number;
+  status: string;
+  total_earned: number;
+  total_paid: number;
+}
+
+const AUTH_FREE_PATHS = ["/affiliate/login", "/affiliate/register"];
+
+export default function AffiliateLayout({ children }: { children: React.ReactNode }) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const [affiliate, setAffiliate] = useState<AffiliateData | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [copiedCode, setCopiedCode] = useState(false);
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+  const isAuthPage = AUTH_FREE_PATHS.includes(pathname);
+
+  useEffect(() => {
+    if (isAuthPage) {
+      setLoading(false);
+      return;
+    }
+
+    async function checkAuth() {
+      try {
+        const res = await fetch("/api/affiliate/auth/me");
+        if (!res.ok) {
+          router.push("/affiliate/login");
+          return;
+        }
+        const data = await res.json();
+        setAffiliate(data.affiliate);
+      } catch {
+        router.push("/affiliate/login");
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    checkAuth();
+  }, [isAuthPage, router]);
+
+  function handleLogout() {
+    document.cookie = "affiliate_token=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT";
+    router.push("/affiliate/login");
+  }
+
+  function handleCopyCode() {
+    if (affiliate?.referral_code) {
+      navigator.clipboard.writeText(affiliate.referral_code);
+      setCopiedCode(true);
+      setTimeout(() => setCopiedCode(false), 2000);
+    }
+  }
+
+  if (isAuthPage) {
+    return <>{children}</>;
+  }
+
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gray-50">
+        <div className="flex flex-col items-center gap-3">
+          <div className="w-8 h-8 border-4 border-teal-600 border-t-transparent rounded-full animate-spin" />
+          <p className="text-gray-500 text-sm">Loading...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!affiliate) {
+    return null;
+  }
+
+  const navLinks = [
+    { href: "/affiliate", label: "Dashboard", icon: LayoutDashboard },
+    { href: "/affiliate/referrals", label: "Referrals", icon: Users },
+    { href: "/affiliate/payouts", label: "Payouts", icon: Wallet },
+  ];
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <nav className="bg-white border-b border-gray-200 sticky top-0 z-50">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex items-center justify-between h-16">
+            {/* Logo / Brand */}
+            <div className="flex items-center gap-3">
+              <div className="w-8 h-8 rounded-lg bg-teal-600 flex items-center justify-center">
+                <Users className="w-4 h-4 text-white" />
+              </div>
+              <span className="font-semibold text-gray-900 hidden sm:block">Affiliate Portal</span>
+            </div>
+
+            {/* Desktop Nav */}
+            <div className="hidden md:flex items-center gap-1">
+              {navLinks.map((link) => {
+                const isActive = pathname === link.href;
+                return (
+                  <Link
+                    key={link.href}
+                    href={link.href}
+                    className={`flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-colors ${
+                      isActive
+                        ? "bg-teal-50 text-teal-700"
+                        : "text-gray-600 hover:bg-gray-100 hover:text-gray-900"
+                    }`}
+                  >
+                    <link.icon className="w-4 h-4" />
+                    {link.label}
+                  </Link>
+                );
+              })}
+            </div>
+
+            {/* Right side */}
+            <div className="hidden md:flex items-center gap-3">
+              <div className="flex items-center gap-2 text-sm">
+                <span className="text-gray-500">{affiliate.name}</span>
+                <button
+                  onClick={handleCopyCode}
+                  className="flex items-center gap-1 bg-teal-50 text-teal-700 px-2 py-1 rounded text-xs font-mono font-medium hover:bg-teal-100 transition-colors"
+                  title="Copy referral code"
+                >
+                  {affiliate.referral_code}
+                  {copiedCode ? (
+                    <CheckCircle className="w-3 h-3 text-green-600" />
+                  ) : (
+                    <Copy className="w-3 h-3" />
+                  )}
+                </button>
+              </div>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={handleLogout}
+                className="text-gray-500 hover:text-red-600"
+              >
+                <LogOut className="w-4 h-4 mr-1" />
+                Logout
+              </Button>
+            </div>
+
+            {/* Mobile menu button */}
+            <button
+              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+              className="md:hidden p-2 rounded-md text-gray-500 hover:bg-gray-100"
+            >
+              {mobileMenuOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
+            </button>
+          </div>
+        </div>
+
+        {/* Mobile menu */}
+        {mobileMenuOpen && (
+          <div className="md:hidden border-t border-gray-200 bg-white">
+            <div className="px-4 py-3 space-y-1">
+              {navLinks.map((link) => {
+                const isActive = pathname === link.href;
+                return (
+                  <Link
+                    key={link.href}
+                    href={link.href}
+                    onClick={() => setMobileMenuOpen(false)}
+                    className={`flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium ${
+                      isActive
+                        ? "bg-teal-50 text-teal-700"
+                        : "text-gray-600 hover:bg-gray-100"
+                    }`}
+                  >
+                    <link.icon className="w-4 h-4" />
+                    {link.label}
+                  </Link>
+                );
+              })}
+              <div className="border-t border-gray-100 pt-3 mt-3">
+                <div className="flex items-center justify-between px-3 py-2">
+                  <span className="text-sm text-gray-500">{affiliate.name}</span>
+                  <button
+                    onClick={handleCopyCode}
+                    className="flex items-center gap-1 bg-teal-50 text-teal-700 px-2 py-1 rounded text-xs font-mono font-medium"
+                  >
+                    {affiliate.referral_code}
+                    {copiedCode ? <CheckCircle className="w-3 h-3" /> : <Copy className="w-3 h-3" />}
+                  </button>
+                </div>
+                <button
+                  onClick={handleLogout}
+                  className="flex items-center gap-2 px-3 py-2 text-sm text-red-600 hover:bg-red-50 rounded-md w-full"
+                >
+                  <LogOut className="w-4 h-4" />
+                  Logout
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
+      </nav>
+
+      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        {children}
+      </main>
+    </div>
+  );
+}
diff --git a/src/app/affiliate/login/page.tsx b/src/app/affiliate/login/page.tsx
new file mode 100644
index 0000000..7600600
--- /dev/null
+++ b/src/app/affiliate/login/page.tsx
@@ -0,0 +1,129 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+import { Users, Mail, Lock, Loader2 } from "lucide-react";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+export default function AffiliateLoginPage() {
+  const router = useRouter();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setError("");
+    setLoading(true);
+
+    try {
+      const res = await fetch("/api/affiliate/auth/login", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email, password }),
+      });
+
+      const data = await res.json();
+
+      if (!res.ok) {
+        setError(data.error || "Login failed. Please try again.");
+        return;
+      }
+
+      router.push("/affiliate");
+    } catch {
+      setError("An unexpected error occurred. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-teal-50 to-emerald-50 p-4">
+      <div className="w-full max-w-md">
+        <div className="text-center mb-8">
+          <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-teal-100 mb-4">
+            <Users className="w-8 h-8 text-teal-600" />
+          </div>
+          <h1 className="text-2xl font-bold text-gray-900">Affiliate Portal</h1>
+          <p className="text-gray-500 mt-1">Mexico Paradise Vacations</p>
+        </div>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Sign In</CardTitle>
+            <CardDescription>Enter your credentials to access your affiliate dashboard</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <form onSubmit={handleSubmit} className="space-y-4">
+              {error && (
+                <div className="bg-red-50 border border-red-200 text-red-700 text-sm rounded-md p-3">
+                  {error}
+                </div>
+              )}
+
+              <div className="space-y-2">
+                <Label htmlFor="email">Email</Label>
+                <div className="relative">
+                  <Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
+                  <Input
+                    id="email"
+                    type="email"
+                    placeholder="you@example.com"
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                    className="pl-10"
+                    required
+                  />
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="password">Password</Label>
+                <div className="relative">
+                  <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
+                  <Input
+                    id="password"
+                    type="password"
+                    placeholder="Enter your password"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    className="pl-10"
+                    required
+                  />
+                </div>
+              </div>
+
+              <Button
+                type="submit"
+                className="w-full bg-teal-600 hover:bg-teal-700 text-white"
+                disabled={loading}
+              >
+                {loading ? (
+                  <>
+                    <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                    Signing in...
+                  </>
+                ) : (
+                  "Sign In"
+                )}
+              </Button>
+            </form>
+
+            <div className="mt-6 text-center text-sm text-gray-500">
+              Don&apos;t have an account?{" "}
+              <Link href="/affiliate/register" className="text-teal-600 hover:text-teal-700 font-medium">
+                Register as an affiliate
+              </Link>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/affiliate/page.tsx b/src/app/affiliate/page.tsx
new file mode 100644
index 0000000..8301c57
--- /dev/null
+++ b/src/app/affiliate/page.tsx
@@ -0,0 +1,259 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { MousePointerClick, ArrowRightLeft, Percent, DollarSign, Clock, CheckCircle, Copy, Loader2, Lightbulb } from "lucide-react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+
+interface AffiliateData {
+  name: string;
+  email: string;
+  referral_code: string;
+  short_code: string | null;
+  commission_rate: number;
+  status: string;
+  total_earned: number;
+  total_paid: number;
+}
+
+interface StatsData {
+  clicks: number;
+  conversions: number;
+  conversionRate: number;
+  totalEarned: number;
+  pendingAmount: number;
+  paidAmount: number;
+}
+
+export default function AffiliateDashboardPage() {
+  const [affiliate, setAffiliate] = useState<AffiliateData | null>(null);
+  const [stats, setStats] = useState<StatsData | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [copied, setCopied] = useState(false);
+
+  useEffect(() => {
+    async function fetchData() {
+      try {
+        const [meRes, statsRes] = await Promise.all([
+          fetch("/api/affiliate/auth/me"),
+          fetch("/api/affiliate/stats"),
+        ]);
+
+        if (meRes.ok) {
+          const meData = await meRes.json();
+          setAffiliate(meData.affiliate);
+        }
+
+        if (statsRes.ok) {
+          const statsData = await statsRes.json();
+          setStats(statsData);
+        }
+      } catch {
+        // Errors handled by layout auth check
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchData();
+  }, []);
+
+  const [copiedKey, setCopiedKey] = useState<string | null>(null);
+  function copy(text: string, key: string) {
+    navigator.clipboard.writeText(text);
+    setCopiedKey(key);
+    setTimeout(() => setCopiedKey(null), 2000);
+  }
+  function handleCopyLink() {
+    if (affiliate?.referral_code) {
+      copy(`https://hi2b.com/lp/golden-hour?ref=${affiliate.referral_code}`, 'long');
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-20">
+        <Loader2 className="w-6 h-6 animate-spin text-teal-600" />
+      </div>
+    );
+  }
+
+  const referralLink = affiliate
+    ? `https://hi2b.com/lp/golden-hour?ref=${affiliate.referral_code}`
+    : "";
+  const shortLink = affiliate?.short_code
+    ? `https://hi2b.com/pay/${affiliate.short_code}`
+    : "";
+
+  const kpis = [
+    {
+      label: "Clicks",
+      value: stats?.clicks ?? 0,
+      format: "number",
+      icon: MousePointerClick,
+      color: "text-blue-600",
+      bg: "bg-blue-50",
+    },
+    {
+      label: "Conversions",
+      value: stats?.conversions ?? 0,
+      format: "number",
+      icon: ArrowRightLeft,
+      color: "text-emerald-600",
+      bg: "bg-emerald-50",
+    },
+    {
+      label: "Conversion Rate",
+      value: stats?.conversionRate ?? 0,
+      format: "percent",
+      icon: Percent,
+      color: "text-purple-600",
+      bg: "bg-purple-50",
+    },
+    {
+      label: "Total Earned",
+      value: stats?.totalEarned ?? 0,
+      format: "currency",
+      icon: DollarSign,
+      color: "text-teal-600",
+      bg: "bg-teal-50",
+    },
+    {
+      label: "Pending",
+      value: stats?.pendingAmount ?? 0,
+      format: "currency",
+      icon: Clock,
+      color: "text-amber-600",
+      bg: "bg-amber-50",
+    },
+    {
+      label: "Paid",
+      value: stats?.paidAmount ?? 0,
+      format: "currency",
+      icon: CheckCircle,
+      color: "text-green-600",
+      bg: "bg-green-50",
+    },
+  ];
+
+  function formatValue(value: number | string | null | undefined, format: string): string {
+    const n = typeof value === "number" ? value : Number(value) || 0;
+    switch (format) {
+      case "currency":
+        return `$${n.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+      case "percent":
+        return `${n.toFixed(1)}%`;
+      default:
+        return n.toLocaleString();
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Welcome Header */}
+      <div>
+        <h1 className="text-2xl font-bold text-gray-900">
+          Welcome back, {affiliate?.name ?? "Affiliate"}
+        </h1>
+        <p className="text-gray-500 mt-1">Here&apos;s an overview of your affiliate performance.</p>
+      </div>
+
+      {/* Short link — easy-to-text, easy-to-remember */}
+      {shortLink && (
+        <Card className="border-orange-300 bg-gradient-to-br from-orange-50 to-amber-50">
+          <CardContent className="pt-6">
+            <div className="flex flex-col sm:flex-row items-start sm:items-center gap-3">
+              <div className="flex-1 min-w-0">
+                <p className="text-sm font-medium text-orange-700 mb-1">
+                  📲 Your Short Link <span className="text-xs text-orange-500">— perfect for texts, IG bio, business cards</span>
+                </p>
+                <code className="block text-base sm:text-lg font-bold bg-white border-2 border-orange-300 rounded-md px-3 py-2 text-orange-900 truncate w-full">
+                  {shortLink}
+                </code>
+              </div>
+              <Button
+                onClick={() => copy(shortLink, 'short')}
+                className="bg-orange-600 hover:bg-orange-700 text-white shrink-0"
+              >
+                {copiedKey === 'short' ? (
+                  <><CheckCircle className="w-4 h-4 mr-2" />Copied!</>
+                ) : (
+                  <><Copy className="w-4 h-4 mr-2" />Copy</>
+                )}
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Long referral link box */}
+      <Card className="border-teal-200 bg-teal-50/50">
+        <CardContent className="pt-6">
+          <div className="flex flex-col sm:flex-row items-start sm:items-center gap-3">
+            <div className="flex-1 min-w-0">
+              <p className="text-sm font-medium text-teal-700 mb-1">Full Referral Link <span className="text-xs text-teal-500">— landing page version with tracking</span></p>
+              <code className="block text-sm bg-white border border-teal-200 rounded-md px-3 py-2 text-gray-700 truncate w-full">
+                {referralLink}
+              </code>
+            </div>
+            <Button
+              onClick={handleCopyLink}
+              className="bg-teal-600 hover:bg-teal-700 text-white shrink-0"
+            >
+              {copied ? (
+                <>
+                  <CheckCircle className="w-4 h-4 mr-2" />
+                  Copied!
+                </>
+              ) : (
+                <>
+                  <Copy className="w-4 h-4 mr-2" />
+                  Copy Link
+                </>
+              )}
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* KPI Cards */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+        {kpis.map((kpi) => (
+          <Card key={kpi.label}>
+            <CardHeader className="flex flex-row items-center justify-between pb-2">
+              <CardTitle className="text-sm font-medium text-gray-500">{kpi.label}</CardTitle>
+              <div className={`w-8 h-8 rounded-lg ${kpi.bg} flex items-center justify-center`}>
+                <kpi.icon className={`w-4 h-4 ${kpi.color}`} />
+              </div>
+            </CardHeader>
+            <CardContent>
+              <p className="text-2xl font-bold text-gray-900">
+                {formatValue(kpi.value, kpi.format)}
+              </p>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      {/* Quick Tip */}
+      <Card className="border-amber-200 bg-amber-50/50">
+        <CardContent className="pt-6">
+          <div className="flex items-start gap-3">
+            <div className="w-8 h-8 rounded-lg bg-amber-100 flex items-center justify-center shrink-0">
+              <Lightbulb className="w-4 h-4 text-amber-600" />
+            </div>
+            <div>
+              <p className="font-medium text-amber-800">Quick Tip</p>
+              <p className="text-sm text-amber-700 mt-1">
+                Share your referral link on social media, email, or your website. You earn{" "}
+                {affiliate?.commission_rate ?? 0}% commission on every sale!
+              </p>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/src/app/affiliate/payouts/page.tsx b/src/app/affiliate/payouts/page.tsx
new file mode 100644
index 0000000..e121ca2
--- /dev/null
+++ b/src/app/affiliate/payouts/page.tsx
@@ -0,0 +1,147 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Loader2, Wallet, Inbox } from "lucide-react";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+
+interface Payout {
+  id: string;
+  amount: number;
+  method: string;
+  reference: string;
+  status: string;
+  created_at: string;
+}
+
+const STATUS_STYLES: Record<string, string> = {
+  pending: "bg-yellow-100 text-yellow-800 border-yellow-200",
+  processing: "bg-blue-100 text-blue-800 border-blue-200",
+  completed: "bg-green-100 text-green-800 border-green-200",
+  failed: "bg-red-100 text-red-800 border-red-200",
+};
+
+export default function AffiliatePayoutsPage() {
+  const [payouts, setPayouts] = useState<Payout[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    async function fetchPayouts() {
+      try {
+        const res = await fetch("/api/affiliate/payouts");
+        if (res.ok) {
+          const data = await res.json();
+          setPayouts(data.payouts || []);
+        }
+      } catch {
+        // Error handled silently
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchPayouts();
+  }, []);
+
+  function formatDate(dateStr: string): string {
+    return new Date(dateStr).toLocaleDateString("en-US", {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+    });
+  }
+
+  function formatCurrency(amount: number): string {
+    return `$${amount.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+  }
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-20">
+        <Loader2 className="w-6 h-6 animate-spin text-teal-600" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-bold text-gray-900">Payouts</h1>
+        <p className="text-gray-500 mt-1">View your payout history and payment details.</p>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <div className="flex items-center gap-2">
+            <Wallet className="w-5 h-5 text-teal-600" />
+            <CardTitle>Payout History</CardTitle>
+          </div>
+          <CardDescription>
+            {payouts.length} total payout{payouts.length !== 1 ? "s" : ""}
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          {payouts.length === 0 ? (
+            <div className="text-center py-12">
+              <div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-gray-100 mb-4">
+                <Inbox className="w-6 h-6 text-gray-400" />
+              </div>
+              <p className="text-gray-500 font-medium">No payouts yet</p>
+              <p className="text-gray-400 text-sm mt-1">
+                Keep sharing your referral link! Payouts will appear here once processed.
+              </p>
+            </div>
+          ) : (
+            <div className="overflow-x-auto">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>Date</TableHead>
+                    <TableHead className="text-right">Amount</TableHead>
+                    <TableHead>Method</TableHead>
+                    <TableHead>Reference</TableHead>
+                    <TableHead>Status</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {payouts.map((payout) => (
+                    <TableRow key={payout.id}>
+                      <TableCell className="whitespace-nowrap text-sm text-gray-600">
+                        {formatDate(payout.created_at)}
+                      </TableCell>
+                      <TableCell className="text-right text-sm font-medium text-gray-900">
+                        {formatCurrency(payout.amount)}
+                      </TableCell>
+                      <TableCell className="text-sm text-gray-600 capitalize">
+                        {payout.method}
+                      </TableCell>
+                      <TableCell className="text-sm text-gray-500 font-mono">
+                        {payout.reference || "—"}
+                      </TableCell>
+                      <TableCell>
+                        <Badge
+                          variant="outline"
+                          className={STATUS_STYLES[payout.status] || STATUS_STYLES.pending}
+                        >
+                          {payout.status.charAt(0).toUpperCase() + payout.status.slice(1)}
+                        </Badge>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/src/app/affiliate/referrals/page.tsx b/src/app/affiliate/referrals/page.tsx
new file mode 100644
index 0000000..3a67d11
--- /dev/null
+++ b/src/app/affiliate/referrals/page.tsx
@@ -0,0 +1,148 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Loader2, Users, Inbox } from "lucide-react";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+
+interface Referral {
+  id: string;
+  commission_amount: number;
+  status: string;
+  created_at: string;
+  paid_at: string | null;
+  customer_email: string;
+  sale_amount: number;
+}
+
+const STATUS_STYLES: Record<string, string> = {
+  pending: "bg-yellow-100 text-yellow-800 border-yellow-200",
+  approved: "bg-blue-100 text-blue-800 border-blue-200",
+  paid: "bg-green-100 text-green-800 border-green-200",
+  rejected: "bg-red-100 text-red-800 border-red-200",
+};
+
+export default function AffiliateReferralsPage() {
+  const [referrals, setReferrals] = useState<Referral[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    async function fetchReferrals() {
+      try {
+        const res = await fetch("/api/affiliate/referrals");
+        if (res.ok) {
+          const data = await res.json();
+          setReferrals(data.referrals || []);
+        }
+      } catch {
+        // Error handled silently
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchReferrals();
+  }, []);
+
+  function formatDate(dateStr: string): string {
+    return new Date(dateStr).toLocaleDateString("en-US", {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+    });
+  }
+
+  function formatCurrency(amount: number): string {
+    return `$${amount.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+  }
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-20">
+        <Loader2 className="w-6 h-6 animate-spin text-teal-600" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-bold text-gray-900">Referrals</h1>
+        <p className="text-gray-500 mt-1">Track all your referral sales and commissions.</p>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <div className="flex items-center gap-2">
+            <Users className="w-5 h-5 text-teal-600" />
+            <CardTitle>Referral History</CardTitle>
+          </div>
+          <CardDescription>
+            {referrals.length} total referral{referrals.length !== 1 ? "s" : ""}
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          {referrals.length === 0 ? (
+            <div className="text-center py-12">
+              <div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-gray-100 mb-4">
+                <Inbox className="w-6 h-6 text-gray-400" />
+              </div>
+              <p className="text-gray-500 font-medium">No referrals yet</p>
+              <p className="text-gray-400 text-sm mt-1">
+                Share your referral link to start earning commissions.
+              </p>
+            </div>
+          ) : (
+            <div className="overflow-x-auto">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>Date</TableHead>
+                    <TableHead>Customer</TableHead>
+                    <TableHead className="text-right">Sale Amount</TableHead>
+                    <TableHead className="text-right">Commission</TableHead>
+                    <TableHead>Status</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {referrals.map((referral) => (
+                    <TableRow key={referral.id}>
+                      <TableCell className="whitespace-nowrap text-sm text-gray-600">
+                        {formatDate(referral.created_at)}
+                      </TableCell>
+                      <TableCell className="text-sm text-gray-600">
+                        {referral.customer_email}
+                      </TableCell>
+                      <TableCell className="text-right text-sm font-medium text-gray-900">
+                        {formatCurrency(referral.sale_amount)}
+                      </TableCell>
+                      <TableCell className="text-right text-sm font-medium text-teal-700">
+                        {formatCurrency(referral.commission_amount)}
+                      </TableCell>
+                      <TableCell>
+                        <Badge
+                          variant="outline"
+                          className={STATUS_STYLES[referral.status] || STATUS_STYLES.pending}
+                        >
+                          {referral.status.charAt(0).toUpperCase() + referral.status.slice(1)}
+                        </Badge>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/src/app/affiliate/register/page.tsx b/src/app/affiliate/register/page.tsx
new file mode 100644
index 0000000..b982b13
--- /dev/null
+++ b/src/app/affiliate/register/page.tsx
@@ -0,0 +1,220 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+import { Users, Mail, Lock, User, Loader2, CheckCircle, Copy } from "lucide-react";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+export default function AffiliateRegisterPage() {
+  const router = useRouter();
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [success, setSuccess] = useState(false);
+  const [referralCode, setReferralCode] = useState("");
+  const [copied, setCopied] = useState(false);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setError("");
+
+    if (password !== confirmPassword) {
+      setError("Passwords do not match.");
+      return;
+    }
+
+    if (password.length < 6) {
+      setError("Password must be at least 6 characters.");
+      return;
+    }
+
+    setLoading(true);
+
+    try {
+      const res = await fetch("/api/affiliate/auth/register", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ name, email, password }),
+      });
+
+      const data = await res.json();
+
+      if (!res.ok) {
+        setError(data.error || "Registration failed. Please try again.");
+        return;
+      }
+
+      setReferralCode(data.referral_code || data.affiliate?.referral_code || "");
+      setSuccess(true);
+    } catch {
+      setError("An unexpected error occurred. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  function handleCopyCode() {
+    navigator.clipboard.writeText(referralCode);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  }
+
+  if (success) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-teal-50 to-emerald-50 p-4">
+        <div className="w-full max-w-md">
+          <Card>
+            <CardContent className="pt-6 text-center space-y-4">
+              <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-green-100 mx-auto">
+                <CheckCircle className="w-8 h-8 text-green-600" />
+              </div>
+              <h2 className="text-xl font-bold text-gray-900">Registration Successful!</h2>
+              <p className="text-gray-500 text-sm">
+                Welcome to the Mexico Paradise Vacations affiliate program. Your referral code is:
+              </p>
+              {referralCode && (
+                <div className="flex items-center gap-2 justify-center">
+                  <code className="bg-teal-50 border border-teal-200 text-teal-700 px-4 py-2 rounded-md font-mono text-lg font-bold">
+                    {referralCode}
+                  </code>
+                  <Button variant="outline" size="icon" onClick={handleCopyCode}>
+                    {copied ? <CheckCircle className="w-4 h-4 text-green-600" /> : <Copy className="w-4 h-4" />}
+                  </Button>
+                </div>
+              )}
+              <Button
+                className="w-full bg-teal-600 hover:bg-teal-700 text-white"
+                onClick={() => router.push("/affiliate")}
+              >
+                Go to Dashboard
+              </Button>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-teal-50 to-emerald-50 p-4">
+      <div className="w-full max-w-md">
+        <div className="text-center mb-8">
+          <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-teal-100 mb-4">
+            <Users className="w-8 h-8 text-teal-600" />
+          </div>
+          <h1 className="text-2xl font-bold text-gray-900">Join Our Affiliate Program</h1>
+          <p className="text-gray-500 mt-1">Mexico Paradise Vacations</p>
+        </div>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Create Account</CardTitle>
+            <CardDescription>Register to start earning commissions on referrals</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <form onSubmit={handleSubmit} className="space-y-4">
+              {error && (
+                <div className="bg-red-50 border border-red-200 text-red-700 text-sm rounded-md p-3">
+                  {error}
+                </div>
+              )}
+
+              <div className="space-y-2">
+                <Label htmlFor="name">Full Name</Label>
+                <div className="relative">
+                  <User className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
+                  <Input
+                    id="name"
+                    type="text"
+                    placeholder="John Doe"
+                    value={name}
+                    onChange={(e) => setName(e.target.value)}
+                    className="pl-10"
+                    required
+                  />
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="email">Email</Label>
+                <div className="relative">
+                  <Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
+                  <Input
+                    id="email"
+                    type="email"
+                    placeholder="you@example.com"
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                    className="pl-10"
+                    required
+                  />
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="password">Password</Label>
+                <div className="relative">
+                  <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
+                  <Input
+                    id="password"
+                    type="password"
+                    placeholder="At least 6 characters"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    className="pl-10"
+                    required
+                  />
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="confirmPassword">Confirm Password</Label>
+                <div className="relative">
+                  <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
+                  <Input
+                    id="confirmPassword"
+                    type="password"
+                    placeholder="Confirm your password"
+                    value={confirmPassword}
+                    onChange={(e) => setConfirmPassword(e.target.value)}
+                    className="pl-10"
+                    required
+                  />
+                </div>
+              </div>
+
+              <Button
+                type="submit"
+                className="w-full bg-teal-600 hover:bg-teal-700 text-white"
+                disabled={loading}
+              >
+                {loading ? (
+                  <>
+                    <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                    Creating account...
+                  </>
+                ) : (
+                  "Create Account"
+                )}
+              </Button>
+            </form>
+
+            <div className="mt-6 text-center text-sm text-gray-500">
+              Already have an account?{" "}
+              <Link href="/affiliate/login" className="text-teal-600 hover:text-teal-700 font-medium">
+                Sign in
+              </Link>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/api/admin/affiliates/route.ts b/src/app/api/admin/affiliates/route.ts
new file mode 100644
index 0000000..933c510
--- /dev/null
+++ b/src/app/api/admin/affiliates/route.ts
@@ -0,0 +1,21 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { getAdminSession } from '@/lib/admin-auth'
+import { getAffiliates, updateAffiliateStatus } from '@/lib/db-admin'
+
+export async function GET() {
+  const session = await getAdminSession()
+  if (!session) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+  const affiliates = await getAffiliates()
+  return NextResponse.json({ affiliates })
+}
+
+export async function PUT(request: NextRequest) {
+  const session = await getAdminSession()
+  if (!session) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+
+  const { id, status } = await request.json()
+  if (!id || !status) return NextResponse.json({ error: 'Missing fields' }, { status: 400 })
+
+  await updateAffiliateStatus(id, status)
+  return NextResponse.json({ success: true })
+}
diff --git a/src/app/api/admin/analytics/route.ts b/src/app/api/admin/analytics/route.ts
new file mode 100644
index 0000000..15cdf57
--- /dev/null
+++ b/src/app/api/admin/analytics/route.ts
@@ -0,0 +1,21 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { getAdminSession } from '@/lib/admin-auth'
+import { getSalesByLP, getSalesBySource, getSalesByAffiliate, getRevenueOverTime, getFunnelData } from '@/lib/db-admin'
+
+export async function GET(request: NextRequest) {
+  const session = await getAdminSession()
+  if (!session) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+
+  const url = new URL(request.url)
+  const days = parseInt(url.searchParams.get('days') || '30')
+
+  const [salesByLP, salesBySource, salesByAffiliate, revenueOverTime, funnel] = await Promise.all([
+    getSalesByLP(),
+    getSalesBySource(),
+    getSalesByAffiliate(),
+    getRevenueOverTime(days),
+    getFunnelData(days),
+  ])
+
+  return NextResponse.json({ salesByLP, salesBySource, salesByAffiliate, revenueOverTime, funnel })
+}
diff --git a/src/app/api/admin/auth/login/route.ts b/src/app/api/admin/auth/login/route.ts
new file mode 100644
index 0000000..9864c3c
--- /dev/null
+++ b/src/app/api/admin/auth/login/route.ts
@@ -0,0 +1,25 @@
+import { NextRequest, NextResponse } from 'next/server'
+import pool from '@/lib/db-mysql'
+import { verifyPassword, createAdminToken } from '@/lib/admin-auth'
+
+export async function POST(request: NextRequest) {
+  try {
+    const { email, password } = await request.json()
+    if (!email || !password) return NextResponse.json({ error: 'Email and password required' }, { status: 400 })
+
+    const [rows] = await pool.execute('SELECT * FROM admin_users WHERE email = ? AND status = ?', [email, 'active']) as any[]
+    if (rows.length === 0) return NextResponse.json({ error: 'Invalid credentials' }, { status: 401 })
+
+    const admin = rows[0]
+    const valid = await verifyPassword(password, admin.password_hash)
+    if (!valid) return NextResponse.json({ error: 'Invalid credentials' }, { status: 401 })
+
+    const token = createAdminToken({ id: admin.id, email: admin.email, role: admin.role })
+    const response = NextResponse.json({ success: true, user: { id: admin.id, email: admin.email, fullName: admin.full_name, role: admin.role } })
+    response.cookies.set('admin_token', token, { httpOnly: true, secure: true, sameSite: 'lax', maxAge: 24 * 60 * 60, path: '/' })
+    return response
+  } catch (error) {
+    console.error('Admin login error:', error)
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 })
+  }
+}
diff --git a/src/app/api/admin/auth/me/route.ts b/src/app/api/admin/auth/me/route.ts
new file mode 100644
index 0000000..e0d037c
--- /dev/null
+++ b/src/app/api/admin/auth/me/route.ts
@@ -0,0 +1,8 @@
+import { NextResponse } from 'next/server'
+import { getAdminSession } from '@/lib/admin-auth'
+
+export async function GET() {
+  const session = await getAdminSession()
+  if (!session) return NextResponse.json({ error: 'Not authenticated' }, { status: 401 })
+  return NextResponse.json({ user: session })
+}
diff --git a/src/app/api/admin/leads/route.ts b/src/app/api/admin/leads/route.ts
new file mode 100644
index 0000000..44d2d88
--- /dev/null
+++ b/src/app/api/admin/leads/route.ts
@@ -0,0 +1,17 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { getAdminSession } from '@/lib/admin-auth'
+import { getLeads } from '@/lib/db-admin'
+
+export async function GET(request: NextRequest) {
+  const session = await getAdminSession()
+  if (!session) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+
+  const url = new URL(request.url)
+  const result = await getLeads({
+    page: parseInt(url.searchParams.get('page') || '1'),
+    limit: parseInt(url.searchParams.get('limit') || '25'),
+    search: url.searchParams.get('search') || undefined,
+  })
+
+  return NextResponse.json(result)
+}
diff --git a/src/app/api/admin/payouts/route.ts b/src/app/api/admin/payouts/route.ts
new file mode 100644
index 0000000..a786d46
--- /dev/null
+++ b/src/app/api/admin/payouts/route.ts
@@ -0,0 +1,21 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { getAdminSession } from '@/lib/admin-auth'
+import { getPayouts, createPayout } from '@/lib/db-admin'
+
+export async function GET() {
+  const session = await getAdminSession()
+  if (!session) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+  const payouts = await getPayouts()
+  return NextResponse.json({ payouts })
+}
+
+export async function POST(request: NextRequest) {
+  const session = await getAdminSession()
+  if (!session) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+
+  const { affiliate_id, amount, method, reference } = await request.json()
+  if (!affiliate_id || !amount) return NextResponse.json({ error: 'Missing fields' }, { status: 400 })
+
+  const id = await createPayout(affiliate_id, amount, method || 'paypal', reference || '')
+  return NextResponse.json({ success: true, id })
+}
diff --git a/src/app/api/admin/sales/route.ts b/src/app/api/admin/sales/route.ts
new file mode 100644
index 0000000..45905fa
--- /dev/null
+++ b/src/app/api/admin/sales/route.ts
@@ -0,0 +1,20 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { getAdminSession } from '@/lib/admin-auth'
+import { getSales } from '@/lib/db-admin'
+
+export async function GET(request: NextRequest) {
+  const session = await getAdminSession()
+  if (!session) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+
+  const url = new URL(request.url)
+  const result = await getSales({
+    page: parseInt(url.searchParams.get('page') || '1'),
+    limit: parseInt(url.searchParams.get('limit') || '25'),
+    status: url.searchParams.get('status') || undefined,
+    source_lp: url.searchParams.get('source_lp') || undefined,
+    utm_source: url.searchParams.get('utm_source') || undefined,
+    search: url.searchParams.get('search') || undefined,
+  })
+
+  return NextResponse.json(result)
+}
diff --git a/src/app/api/admin/stats/route.ts b/src/app/api/admin/stats/route.ts
new file mode 100644
index 0000000..27092e1
--- /dev/null
+++ b/src/app/api/admin/stats/route.ts
@@ -0,0 +1,11 @@
+import { NextResponse } from 'next/server'
+import { getAdminSession } from '@/lib/admin-auth'
+import { getKPIStats } from '@/lib/db-admin'
+
+export async function GET() {
+  const session = await getAdminSession()
+  if (!session) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+
+  const stats = await getKPIStats()
+  return NextResponse.json(stats)
+}
diff --git a/src/app/api/affiliate/auth/login/route.ts b/src/app/api/affiliate/auth/login/route.ts
new file mode 100644
index 0000000..89c8e10
--- /dev/null
+++ b/src/app/api/affiliate/auth/login/route.ts
@@ -0,0 +1,27 @@
+import { NextRequest, NextResponse } from 'next/server'
+import pool from '@/lib/db-mysql'
+import { verifyPassword, createAffiliateToken } from '@/lib/admin-auth'
+
+export async function POST(request: NextRequest) {
+  try {
+    const { email, password } = await request.json()
+    if (!email || !password) return NextResponse.json({ error: 'Email and password required' }, { status: 400 })
+
+    const [rows] = await pool.execute('SELECT * FROM affiliates WHERE email = ?', [email]) as any[]
+    if (rows.length === 0) return NextResponse.json({ error: 'Invalid credentials' }, { status: 401 })
+
+    const aff = rows[0]
+    if (aff.status === 'suspended') return NextResponse.json({ error: 'Account suspended' }, { status: 403 })
+
+    const valid = await verifyPassword(password, aff.password_hash)
+    if (!valid) return NextResponse.json({ error: 'Invalid credentials' }, { status: 401 })
+
+    const token = createAffiliateToken({ id: aff.id, email: aff.email, referral_code: aff.referral_code })
+    const response = NextResponse.json({ success: true, referralCode: aff.referral_code })
+    response.cookies.set('affiliate_token', token, { httpOnly: true, secure: true, sameSite: 'lax', maxAge: 7 * 24 * 60 * 60, path: '/' })
+    return response
+  } catch (error) {
+    console.error('Affiliate login error:', error)
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 })
+  }
+}
diff --git a/src/app/api/affiliate/auth/me/route.ts b/src/app/api/affiliate/auth/me/route.ts
new file mode 100644
index 0000000..6b834ff
--- /dev/null
+++ b/src/app/api/affiliate/auth/me/route.ts
@@ -0,0 +1,20 @@
+import { NextResponse } from 'next/server'
+import pool, { ensureAffiliateShortCode } from '@/lib/db-mysql'
+import { getAffiliateSession } from '@/lib/admin-auth'
+
+export async function GET() {
+  const session = await getAffiliateSession()
+  if (!session) return NextResponse.json({ error: 'Not authenticated' }, { status: 401 })
+
+  // Ensure this affiliate has a 2-char short_code for the /pay/XX link
+  let short_code: string | null = null
+  try { short_code = await ensureAffiliateShortCode(session.id) } catch (err) { console.error('short_code provisioning:', err) }
+
+  const [rows] = await pool.execute(
+    'SELECT id, name, email, referral_code, short_code, commission_rate, status, total_earned, total_paid, created_at FROM affiliates WHERE id = ?',
+    [session.id]
+  ) as any[]
+
+  if (rows.length === 0) return NextResponse.json({ error: 'Not found' }, { status: 404 })
+  return NextResponse.json({ affiliate: { ...rows[0], short_code: rows[0].short_code || short_code } })
+}
diff --git a/src/app/api/affiliate/auth/register/route.ts b/src/app/api/affiliate/auth/register/route.ts
new file mode 100644
index 0000000..8f324fe
--- /dev/null
+++ b/src/app/api/affiliate/auth/register/route.ts
@@ -0,0 +1,42 @@
+import { NextRequest, NextResponse } from 'next/server'
+import pool from '@/lib/db-mysql'
+import { hashPassword, createAffiliateToken, generateReferralCode } from '@/lib/admin-auth'
+import { sendAffiliateWelcomeEmail } from '@/lib/email'
+
+export async function POST(request: NextRequest) {
+  try {
+    const { name, email, password } = await request.json()
+    if (!name || !email || !password) return NextResponse.json({ error: 'All fields required' }, { status: 400 })
+    if (password.length < 6) return NextResponse.json({ error: 'Password must be at least 6 characters' }, { status: 400 })
+
+    const [existing] = await pool.execute('SELECT id FROM affiliates WHERE email = ?', [email]) as any[]
+    if (existing.length > 0) return NextResponse.json({ error: 'Email already registered' }, { status: 409 })
+
+    const hash = await hashPassword(password)
+    let referralCode = generateReferralCode(name)
+
+    // Ensure uniqueness
+    for (let i = 0; i < 10; i++) {
+      const [dup] = await pool.execute('SELECT id FROM affiliates WHERE referral_code = ?', [referralCode]) as any[]
+      if (dup.length === 0) break
+      referralCode = generateReferralCode(name)
+    }
+
+    const [result] = await pool.execute(
+      `INSERT INTO affiliates (name, email, password_hash, referral_code, status) VALUES (?, ?, ?, ?, 'active')`,
+      [name, email, hash, referralCode]
+    ) as any[]
+
+    const id = (result as any).insertId
+    const token = createAffiliateToken({ id, email, referral_code: referralCode })
+
+    try { await sendAffiliateWelcomeEmail(email, name, referralCode) } catch (e) { console.error('Affiliate email failed:', e) }
+
+    const response = NextResponse.json({ success: true, referralCode })
+    response.cookies.set('affiliate_token', token, { httpOnly: true, secure: true, sameSite: 'lax', maxAge: 7 * 24 * 60 * 60, path: '/' })
+    return response
+  } catch (error) {
+    console.error('Affiliate register error:', error)
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 })
+  }
+}
diff --git a/src/app/api/affiliate/payouts/route.ts b/src/app/api/affiliate/payouts/route.ts
new file mode 100644
index 0000000..9112faa
--- /dev/null
+++ b/src/app/api/affiliate/payouts/route.ts
@@ -0,0 +1,15 @@
+import { NextResponse } from 'next/server'
+import pool from '@/lib/db-mysql'
+import { getAffiliateSession } from '@/lib/admin-auth'
+
+export async function GET() {
+  const session = await getAffiliateSession()
+  if (!session) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+
+  const [rows] = await pool.execute(
+    'SELECT * FROM affiliate_payouts WHERE affiliate_id = ? ORDER BY created_at DESC',
+    [session.id]
+  ) as any[]
+
+  return NextResponse.json({ payouts: rows })
+}
diff --git a/src/app/api/affiliate/referrals/route.ts b/src/app/api/affiliate/referrals/route.ts
new file mode 100644
index 0000000..98d16d4
--- /dev/null
+++ b/src/app/api/affiliate/referrals/route.ts
@@ -0,0 +1,20 @@
+import { NextResponse } from 'next/server'
+import pool from '@/lib/db-mysql'
+import { getAffiliateSession } from '@/lib/admin-auth'
+
+export async function GET() {
+  const session = await getAffiliateSession()
+  if (!session) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+
+  const [rows] = await pool.execute(
+    `SELECT ar.id, ar.commission_amount, ar.status, ar.created_at, ar.paid_at,
+            CONCAT(LEFT(s.email, 3), '***@***') as customer_email, s.amount as sale_amount
+     FROM affiliate_referrals ar
+     JOIN signups s ON ar.signup_id = s.id
+     WHERE ar.affiliate_id = ?
+     ORDER BY ar.created_at DESC`,
+    [session.id]
+  ) as any[]
+
+  return NextResponse.json({ referrals: rows })
+}
diff --git a/src/app/api/affiliate/stats/route.ts b/src/app/api/affiliate/stats/route.ts
new file mode 100644
index 0000000..8c3563f
--- /dev/null
+++ b/src/app/api/affiliate/stats/route.ts
@@ -0,0 +1,36 @@
+import { NextResponse } from 'next/server'
+import pool from '@/lib/db-mysql'
+import { getAffiliateSession } from '@/lib/admin-auth'
+
+export async function GET() {
+  const session = await getAffiliateSession()
+  if (!session) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+
+  const [clicks] = await pool.execute(
+    'SELECT COUNT(*) as c FROM page_views WHERE referral_code = ?', [session.referral_code]
+  ) as any[]
+
+  const [conversions] = await pool.execute(
+    'SELECT COUNT(*) as c, COALESCE(SUM(commission_amount),0) as total FROM affiliate_referrals WHERE affiliate_id = ?', [session.id]
+  ) as any[]
+
+  const [pending] = await pool.execute(
+    `SELECT COALESCE(SUM(commission_amount),0) as amount FROM affiliate_referrals WHERE affiliate_id = ? AND status = 'pending'`, [session.id]
+  ) as any[]
+
+  const [paid] = await pool.execute(
+    `SELECT COALESCE(SUM(amount),0) as amount FROM affiliate_payouts WHERE affiliate_id = ? AND status = 'completed'`, [session.id]
+  ) as any[]
+
+  const totalClicks = Number(clicks[0]?.c) || 0
+  const totalConversions = Number(conversions[0]?.c) || 0
+
+  return NextResponse.json({
+    clicks: totalClicks,
+    conversions: totalConversions,
+    conversionRate: totalClicks > 0 ? (totalConversions / totalClicks) * 100 : 0,
+    totalEarned: Number(conversions[0]?.total) || 0,
+    pendingAmount: Number(pending[0]?.amount) || 0,
+    paidAmount: Number(paid[0]?.amount) || 0,
+  })
+}
diff --git a/src/app/api/auth/forgot-password/route.ts b/src/app/api/auth/forgot-password/route.ts
new file mode 100644
index 0000000..c678b07
--- /dev/null
+++ b/src/app/api/auth/forgot-password/route.ts
@@ -0,0 +1,40 @@
+import { NextRequest, NextResponse } from 'next/server'
+import pool from '@/lib/db-mysql'
+import { generateResetToken } from '@/lib/auth-utils'
+import { sendPasswordResetEmail } from '@/lib/email'
+
+export async function POST(request: NextRequest) {
+  try {
+    const { email } = await request.json()
+    if (!email) {
+      return NextResponse.json({ error: 'Email required' }, { status: 400 })
+    }
+
+    const [rows] = await pool.execute('SELECT id FROM signups WHERE email = ?', [email]) as any[]
+
+    // Always return success to prevent email enumeration
+    if (rows.length === 0) {
+      return NextResponse.json({ success: true, message: 'If an account exists, a reset email has been sent.' })
+    }
+
+    const token = generateResetToken()
+    const expires = new Date(Date.now() + 60 * 60 * 1000) // 1 hour
+
+    await pool.execute(
+      'UPDATE signups SET reset_token = ?, reset_token_expires = ? WHERE email = ?',
+      [token, expires.toISOString().slice(0, 19).replace('T', ' '), email]
+    )
+
+    try {
+      await sendPasswordResetEmail(email, token)
+    } catch (emailErr) {
+      console.error('Email send failed:', emailErr)
+      // Still return success — don't leak email delivery status
+    }
+
+    return NextResponse.json({ success: true, message: 'If an account exists, a reset email has been sent.' })
+  } catch (error) {
+    console.error('Forgot password error:', error)
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 })
+  }
+}
diff --git a/src/app/api/auth/login/route.ts b/src/app/api/auth/login/route.ts
new file mode 100644
index 0000000..607224c
--- /dev/null
+++ b/src/app/api/auth/login/route.ts
@@ -0,0 +1,47 @@
+import { NextRequest, NextResponse } from 'next/server'
+import pool from '@/lib/db-mysql'
+import { verifyPassword, createToken } from '@/lib/auth-utils'
+
+export async function POST(request: NextRequest) {
+  try {
+    const { email, password } = await request.json()
+    if (!email || !password) {
+      return NextResponse.json({ error: 'Email and password required' }, { status: 400 })
+    }
+
+    const [rows] = await pool.execute('SELECT * FROM signups WHERE email = ?', [email]) as any[]
+    if (rows.length === 0) {
+      return NextResponse.json({ error: 'Invalid email or password' }, { status: 401 })
+    }
+
+    const user = rows[0]
+    if (!user.password_hash) {
+      return NextResponse.json({ error: 'Please set your password first. Check your email or use "Forgot Password".' }, { status: 401 })
+    }
+
+    const valid = await verifyPassword(password, user.password_hash)
+    if (!valid) {
+      return NextResponse.json({ error: 'Invalid email or password' }, { status: 401 })
+    }
+
+    const token = createToken({ id: user.id, email: user.email })
+
+    const response = NextResponse.json({
+      success: true,
+      user: { id: user.id, email: user.email, full_name: user.full_name },
+    })
+
+    response.cookies.set('auth_token', token, {
+      httpOnly: true,
+      secure: true,
+      sameSite: 'lax',
+      maxAge: 7 * 24 * 60 * 60,
+      path: '/',
+    })
+
+    return response
+  } catch (error) {
+    console.error('Login error:', error)
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 })
+  }
+}
diff --git a/src/app/api/auth/me/route.ts b/src/app/api/auth/me/route.ts
new file mode 100644
index 0000000..3b32a84
--- /dev/null
+++ b/src/app/api/auth/me/route.ts
@@ -0,0 +1,50 @@
+import { NextResponse } from 'next/server'
+import pool from '@/lib/db-mysql'
+import { getSessionUser } from '@/lib/auth-utils'
+
+export async function GET() {
+  try {
+    const session = await getSessionUser()
+    if (!session) {
+      return NextResponse.json({ error: 'Not authenticated' }, { status: 401 })
+    }
+
+    const [rows] = await pool.execute(
+      'SELECT id, email, full_name, phone, destination, amount, monthly_payment, payment_plan_months, payment_status, certificate_number, certificate_expires, created_at FROM signups WHERE id = ?',
+      [session.id]
+    ) as any[]
+
+    if (rows.length === 0) {
+      return NextResponse.json({ error: 'User not found' }, { status: 404 })
+    }
+
+    const user = rows[0]
+
+    // Get payments
+    const [payments] = await pool.execute(
+      'SELECT id, amount, currency, payment_type, status, transaction_id, created_at FROM payments WHERE signup_id = ? ORDER BY created_at DESC',
+      [user.id]
+    ) as any[]
+
+    return NextResponse.json({
+      user: {
+        id: user.id,
+        email: user.email,
+        fullName: user.full_name,
+        phone: user.phone,
+        destination: user.destination,
+        totalAmount: user.amount,
+        monthlyPayment: user.monthly_payment,
+        paymentPlanMonths: user.payment_plan_months,
+        paymentStatus: user.payment_status,
+        certificateNumber: user.certificate_number,
+        certificateExpires: user.certificate_expires,
+        createdAt: user.created_at,
+      },
+      payments,
+    })
+  } catch (error) {
+    console.error('Me error:', error)
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 })
+  }
+}
diff --git a/src/app/api/auth/register/route.ts b/src/app/api/auth/register/route.ts
new file mode 100644
index 0000000..e3e58fb
--- /dev/null
+++ b/src/app/api/auth/register/route.ts
@@ -0,0 +1,51 @@
+import { NextRequest, NextResponse } from 'next/server'
+import pool from '@/lib/db-mysql'
+import { hashPassword, createToken, generateCertificateNumber } from '@/lib/auth-utils'
+
+export async function POST(request: NextRequest) {
+  try {
+    const { email, password } = await request.json()
+    if (!email || !password) {
+      return NextResponse.json({ error: 'Email and password required' }, { status: 400 })
+    }
+    if (password.length < 6) {
+      return NextResponse.json({ error: 'Password must be at least 6 characters' }, { status: 400 })
+    }
+
+    const [rows] = await pool.execute('SELECT * FROM signups WHERE email = ?', [email]) as any[]
+    if (rows.length === 0) {
+      return NextResponse.json({ error: 'No account found with this email. Please purchase a certificate first.' }, { status: 404 })
+    }
+
+    const user = rows[0]
+    if (user.password_hash) {
+      return NextResponse.json({ error: 'Password already set. Please log in.' }, { status: 409 })
+    }
+
+    const hash = await hashPassword(password)
+    const certNumber = user.certificate_number || generateCertificateNumber()
+    const certExpires = user.certificate_expires || new Date(Date.now() + 18 * 30 * 24 * 60 * 60 * 1000).toISOString().split('T')[0]
+
+    await pool.execute(
+      'UPDATE signups SET password_hash = ?, certificate_number = ?, certificate_expires = ? WHERE id = ?',
+      [hash, certNumber, certExpires, user.id]
+    )
+
+    const token = createToken({ id: user.id, email: user.email })
+
+    const response = NextResponse.json({
+      success: true,
+      user: { id: user.id, email: user.email, full_name: user.full_name },
+    })
+
+    response.cookies.set('auth_token', token, {
+      httpOnly: true, secure: true, sameSite: 'lax',
+      maxAge: 7 * 24 * 60 * 60, path: '/',
+    })
+
+    return response
+  } catch (error) {
+    console.error('Register error:', error)
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 })
+  }
+}
diff --git a/src/app/api/auth/reset-password/route.ts b/src/app/api/auth/reset-password/route.ts
new file mode 100644
index 0000000..0605229
--- /dev/null
+++ b/src/app/api/auth/reset-password/route.ts
@@ -0,0 +1,35 @@
+import { NextRequest, NextResponse } from 'next/server'
+import pool from '@/lib/db-mysql'
+import { hashPassword } from '@/lib/auth-utils'
+
+export async function POST(request: NextRequest) {
+  try {
+    const { token, password } = await request.json()
+    if (!token || !password) {
+      return NextResponse.json({ error: 'Token and password required' }, { status: 400 })
+    }
+    if (password.length < 6) {
+      return NextResponse.json({ error: 'Password must be at least 6 characters' }, { status: 400 })
+    }
+
+    const [rows] = await pool.execute(
+      'SELECT * FROM signups WHERE reset_token = ? AND reset_token_expires > NOW()',
+      [token]
+    ) as any[]
+
+    if (rows.length === 0) {
+      return NextResponse.json({ error: 'Invalid or expired reset token' }, { status: 400 })
+    }
+
+    const hash = await hashPassword(password)
+    await pool.execute(
+      'UPDATE signups SET password_hash = ?, reset_token = NULL, reset_token_expires = NULL WHERE id = ?',
+      [hash, rows[0].id]
+    )
+
+    return NextResponse.json({ success: true, message: 'Password updated. You can now log in.' })
+  } catch (error) {
+    console.error('Reset password error:', error)
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 })
+  }
+}
diff --git a/src/app/api/claim/route.ts b/src/app/api/claim/route.ts
new file mode 100644
index 0000000..3928232
--- /dev/null
+++ b/src/app/api/claim/route.ts
@@ -0,0 +1,100 @@
+import { NextRequest, NextResponse } from 'next/server'
+import pool, { upsertEarlyLead, createEbookLead } from '@/lib/db-mysql'
+import { sendVerifyEmail, sendAdminNotify } from '@/lib/email'
+import { makeVerifyToken } from '@/lib/verify-token'
+
+/**
+ * Unified "Claim My Certificate" endpoint. Fires on every primary CTA click.
+ *
+ * 1. Persists email + phone + IP to early_leads (confirmed=1 — they clicked)
+ * 2. Creates an ebook_lead so /admin/leads shows them
+ * 3. Sends the PDF guide email (the same one the ebook form has always sent)
+ * 4. Attributes to affiliate if a referral_code is present
+ *
+ * Returns immediately even if the email send is in-flight, so the UI can
+ * keep moving (open the payment modal, etc.).
+ */
+
+const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+const APP_URL = process.env.NEXT_PUBLIC_APP_URL || 'https://hi2b.com'
+
+function clientIp(req: NextRequest): string | null {
+  const fwd = req.headers.get('x-forwarded-for')
+  if (fwd) return fwd.split(',')[0].trim()
+  return req.headers.get('x-real-ip') || req.headers.get('cf-connecting-ip') || null
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json().catch(() => ({}))
+    const {
+      email: rawEmail, phone, name, source_lp,
+      referral_code, utm_source, utm_medium, utm_campaign,
+    } = body
+
+    if (!rawEmail || typeof rawEmail !== 'string' || !EMAIL_RE.test(rawEmail)) {
+      return NextResponse.json({ success: false, error: 'Valid email required' }, { status: 400 })
+    }
+    const email = rawEmail.trim().toLowerCase()
+    const ip = clientIp(request)
+
+    // 1 + 2 — persist lead (run in parallel)
+    await Promise.all([
+      upsertEarlyLead({
+        email,
+        phone: phone || null,
+        name: name || null,
+        ip_address: ip,
+        source_lp: source_lp || null,
+        referral_code: referral_code || null,
+        utm_source: utm_source || null,
+        utm_medium: utm_medium || null,
+        utm_campaign: utm_campaign || null,
+      }),
+      createEbookLead({
+        email, name: name || undefined,
+        source_lp: source_lp || 'claim-cta',
+        utm_source, utm_medium, utm_campaign,
+      }),
+    ])
+
+    // NOTE: lead is added but left non-active (early_leads.confirmed = 0).
+    // It only flips to active when the user clicks the verify link (/api/verify).
+
+    // Notify the team of the new email (fire-and-forget)
+    sendAdminNotify('New email captured — hi2b', {
+      Email: email, Phone: phone, Name: name,
+      'Source LP': source_lp, 'UTM Source': utm_source, 'UTM Campaign': utm_campaign,
+      Referral: referral_code, IP: ip, Status: 'unverified (pending double opt-in)',
+    }).catch(err => console.error('adminNotify claim:', err))
+
+    // Attribute to affiliate if referral_code provided
+    if (referral_code) {
+      pool.execute(
+        'UPDATE ebook_leads SET affiliate_id = (SELECT id FROM affiliates WHERE referral_code = ? AND status = ?) WHERE email = ?',
+        [referral_code, 'active', email]
+      ).catch(err => console.error('Affiliate attribution:', err))
+    }
+
+    // 3 — send the double opt-in verification email (link only; the PDF is
+    // delivered after they click and verify).
+    const verifyUrl = `${APP_URL}/api/verify?e=${encodeURIComponent(email)}&t=${makeVerifyToken(email)}`
+    let emailSent = true
+    try {
+      const result = await sendVerifyEmail(email, name, verifyUrl)
+      if (!result) emailSent = false
+    } catch (err) {
+      console.error('sendVerifyEmail failed:', err)
+      emailSent = false
+    }
+
+    return NextResponse.json({
+      success: true,
+      emailSent,
+      needsVerification: true,
+    })
+  } catch (error) {
+    console.error('claim error:', error)
+    return NextResponse.json({ success: false, error: 'Internal error' }, { status: 500 })
+  }
+}
diff --git a/src/app/api/ebook/route.ts b/src/app/api/ebook/route.ts
new file mode 100644
index 0000000..3ba04c2
--- /dev/null
+++ b/src/app/api/ebook/route.ts
@@ -0,0 +1,42 @@
+import { NextRequest, NextResponse } from 'next/server'
+import pool from '@/lib/db-mysql'
+import { createEbookLead, confirmEarlyLead } from '@/lib/db-mysql'
+import { sendEbookEmail } from '@/lib/email'
+
+export async function POST(request: NextRequest) {
+  try {
+    const { email, name, source_lp, referral_code, utm_source, utm_medium, utm_campaign } = await request.json()
+    if (!email) return NextResponse.json({ error: 'Email is required' }, { status: 400 })
+
+    // Look up affiliate by referral code
+    let affiliateId: number | null = null
+    if (referral_code) {
+      const [aff] = await pool.execute(
+        'SELECT id FROM affiliates WHERE referral_code = ? AND status = ?',
+        [referral_code, 'active']
+      ) as any[]
+      if (aff.length > 0) affiliateId = aff[0].id
+    }
+
+    // Store lead with affiliate tracking
+    await createEbookLead({ email, name, source_lp, utm_source, utm_medium, utm_campaign })
+
+    // Update affiliate_id on the lead (createEbookLead doesn't have it yet)
+    if (affiliateId) {
+      await pool.execute(
+        'UPDATE ebook_leads SET affiliate_id = ? WHERE email = ?',
+        [affiliateId, email]
+      )
+    }
+
+    try { await confirmEarlyLead(email.trim().toLowerCase()) } catch {}
+
+    // Send ebook email
+    try { await sendEbookEmail(email, name) } catch (e) { console.error('Ebook email failed:', e) }
+
+    return NextResponse.json({ success: true, downloadUrl: '/ebooks/budget-luxury-travel.pdf' })
+  } catch (error) {
+    console.error('Ebook API error:', error)
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 })
+  }
+}
diff --git a/src/app/api/payment/create/route.ts b/src/app/api/payment/create/route.ts
index d20d46e..c80a67a 100644
--- a/src/app/api/payment/create/route.ts
+++ b/src/app/api/payment/create/route.ts
@@ -1,86 +1,91 @@
 import { NextRequest, NextResponse } from 'next/server'
-import { supabase } from '@/lib/supabase'
-import { maverickAPI } from '@/lib/maverick'
+import { createPayment, updateSignup, createAffiliateReferral } from '@/lib/db-mysql'
+import { processFullPurchase } from '@/lib/nmi'
+import { generateCertificateNumber } from '@/lib/auth-utils'
+import { sendWelcomeEmail } from '@/lib/email'
 
 export async function POST(request: NextRequest) {
   try {
-    const { email, fullName, amount, signupId } = await request.json()
+    const body = await request.json()
+    const {
+      firstName, lastName, email, phone, zip,
+      cardNumber, cardExp, cardCvv,
+      paymentToken,
+      paymentType = 'monthly',
+      signupId,
+    } = body
 
-    if (!email || !fullName || !amount || !signupId) {
-      return NextResponse.json(
-        { error: 'Missing required fields' },
-        { status: 400 }
-      )
+    if (!email) {
+      return NextResponse.json({ error: 'Missing email' }, { status: 400 })
     }
 
-    // Create payment with Maverick API
-    const paymentResult = await maverickAPI.createPayment({
-      amount: Math.round(amount * 100), // Convert to cents
-      currency: 'USD',
+    if (!cardNumber && !paymentToken) {
+      return NextResponse.json({ error: 'Missing payment information' }, { status: 400 })
+    }
+
+    // Minimal checkout: name isn't collected. Derive a billing name from the
+    // email for the processor / records.
+    const fName = firstName || email.split('@')[0] || 'Guest'
+    const lName = lastName || 'Member'
+
+    const result = await processFullPurchase({
+      paymentToken,
+      cardNumber,
+      cardExp,
+      cardCvv,
+      firstName: fName,
+      lastName: lName,
       email,
-      fullName,
-      description: 'Professional Certification',
-      returnUrl: `${process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3000'}/payment/success`,
-      cancelUrl: `${process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3000'}/payment/cancel`,
+      phone: phone || '',
+      zip: zip || '',
+      paymentType,
     })
 
-    if (!paymentResult.success) {
-      console.error('Payment creation failed:', paymentResult.error)
-      
-      // Update signup status to failed
-      await supabase
-        .from('signups')
-        .update({ payment_status: 'failed' })
-        .eq('id', signupId)
-
-      return NextResponse.json(
-        { error: paymentResult.error || 'Payment creation failed' },
-        { status: 500 }
-      )
+    if (!result.success) {
+      if (signupId) {
+        await updateSignup(signupId, { payment_status: 'failed' })
+      }
+      return NextResponse.json({ error: result.error || 'Payment declined' }, { status: 400 })
     }
 
-    // Create payment record
-    const { data: paymentData, error: paymentError } = await supabase
-      .from('payments')
-      .insert({
+    // Record payment
+    const amount = paymentType === 'monthly' ? 29 : 249
+    if (signupId) {
+      await createPayment({
         signup_id: signupId,
-        payment_method: 'maverick',
         amount,
-        currency: 'USD',
-        status: 'pending',
-        transaction_id: paymentResult.paymentId,
+        payment_type: 'initial',
+        status: 'completed',
+        transaction_id: result.transactionId,
       })
-      .select()
-      .single()
 
-    if (paymentError) {
-      console.error('Payment record creation failed:', paymentError)
-      return NextResponse.json(
-        { error: 'Failed to create payment record' },
-        { status: 500 }
-      )
-    }
+      const certNumber = generateCertificateNumber()
+      const certExpires = new Date(Date.now() + 18 * 30 * 24 * 60 * 60 * 1000).toISOString().split('T')[0]
 
-    // Update signup with payment ID
-    await supabase
-      .from('signups')
-      .update({ 
-        payment_id: paymentResult.paymentId,
-        payment_status: 'processing'
+      await updateSignup(signupId, {
+        payment_status: 'active',
+        certificate_number: certNumber,
+        certificate_expires: certExpires,
+        ...(result.subscriptionId && { subscription_id: result.subscriptionId }),
       })
-      .eq('id', signupId)
+
+      // Create affiliate referral if applicable
+      await createAffiliateReferral(signupId)
+
+      // Send welcome email with certificate
+      try {
+        await sendWelcomeEmail(email, `${fName} ${lName}`, certNumber, paymentType, amount)
+      } catch (emailErr) { console.error('Welcome email failed:', emailErr) }
+    }
 
     return NextResponse.json({
       success: true,
-      paymentId: paymentResult.paymentId,
-      checkoutUrl: paymentResult.checkoutUrl,
+      transactionId: result.transactionId,
+      subscriptionId: result.subscriptionId,
+      paymentType,
     })
-
   } catch (error) {
-    console.error('Payment creation error:', error)
-    return NextResponse.json(
-      { error: 'Internal server error' },
-      { status: 500 }
-    )
+    console.error('Payment error:', error)
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 })
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/api/signup/route.ts b/src/app/api/signup/route.ts
index 302107b..0b2da8b 100644
--- a/src/app/api/signup/route.ts
+++ b/src/app/api/signup/route.ts
@@ -1,70 +1,67 @@
 import { NextRequest, NextResponse } from 'next/server'
-import { supabase } from '@/lib/supabase'
+import pool, { createSignup, confirmEarlyLead } from '@/lib/db-mysql'
+import { sendAdminNotify } from '@/lib/email'
 
 export async function POST(request: NextRequest) {
   try {
-    const { email, full_name, phone, amount, monthly_payment, payment_plan_months } = await request.json()
+    const { email, full_name, phone, amount, monthly_payment, payment_plan_months,
+            source_lp, referral_code, utm_source, utm_medium, utm_campaign } = await request.json()
 
-    if (!email || !full_name || !phone || !amount) {
-      return NextResponse.json(
-        { error: 'Missing required fields' },
-        { status: 400 }
-      )
+    if (!email || !amount) {
+      return NextResponse.json({ error: 'Missing required fields' }, { status: 400 })
     }
+    // Minimal checkout may not collect a name — derive one from the email.
+    const fullName = full_name || email.split('@')[0]
 
-    // Check if email already exists
-    const { data: existingSignup } = await supabase
-      .from('signups')
-      .select('*')
-      .eq('email', email)
-      .single()
+    // Do not overwrite an already-paid signup. If a row with this email exists
+    // and its payment_status is active or completed, short-circuit and return
+    // the existing row instead of letting createSignup reset it to pending.
+    const [existingRows] = await pool.execute(
+      'SELECT id, email, full_name, phone, amount, payment_status FROM signups WHERE email = ?',
+      [email]
+    ) as any[]
 
-    if (existingSignup) {
-      return NextResponse.json(
-        { error: 'Email already registered' },
-        { status: 409 }
-      )
+    if (existingRows.length > 0) {
+      const status = existingRows[0].payment_status
+      if (status === 'active' || status === 'completed') {
+        return NextResponse.json({
+          id: existingRows[0].id,
+          email: existingRows[0].email,
+          full_name: existingRows[0].full_name,
+          phone: existingRows[0].phone,
+          amount: existingRows[0].amount,
+          already_active: true,
+        })
+      }
+      // status is 'pending', NULL, or some other non-finalized state — fall
+      // through to createSignup which will update the existing row.
     }
 
-    // Create signup record
-    const { data, error } = await supabase
-      .from('signups')
-      .insert({
-        email,
-        full_name,
-        phone,
-        amount,
-        monthly_payment: monthly_payment || 39,
-        payment_plan_months: payment_plan_months || 18,
-        payment_status: 'pending',
-      })
-      .select()
-      .single()
+    const { data, error } = await createSignup({
+      email, full_name: fullName, phone: phone || '', amount,
+      monthly_payment: monthly_payment || 29,
+      payment_plan_months: payment_plan_months || 10,
+      source_lp, referral_code, utm_source, utm_medium, utm_campaign,
+    })
 
-    if (error) {
-      console.error('Supabase error:', error)
-      return NextResponse.json(
-        { error: 'Failed to create signup' },
-        { status: 500 }
-      )
-    }
+    if (error) return NextResponse.json({ error }, { status: 409 })
 
-    return NextResponse.json({ 
-      id: data.id,
-      email: data.email,
-      full_name: data.full_name,
-      phone: data.phone,
-      amount: data.amount,
-      monthly_payment: data.monthly_payment,
-      payment_plan_months: data.payment_plan_months,
-      payment_status: data.payment_status
-    })
+    try { await confirmEarlyLead(email.trim().toLowerCase()) } catch {}
 
+    // Notify the team of the new signup (fire-and-forget)
+    sendAdminNotify('New signup — hi2b', {
+      Email: email, Name: fullName, Phone: phone,
+      Amount: `$${amount}`,
+      Plan: payment_plan_months > 1 ? `$${monthly_payment}/mo × ${payment_plan_months}` : 'one-time',
+      'Source LP': source_lp, 'UTM Source': utm_source, Referral: referral_code,
+    }).catch(err => console.error('adminNotify signup:', err))
+
+    return NextResponse.json({
+      id: data.id, email: data.email, full_name: data.full_name,
+      phone: data.phone, amount: data.amount,
+    })
   } catch (error) {
     console.error('Signup error:', error)
-    return NextResponse.json(
-      { error: 'Internal server error' },
-      { status: 500 }
-    )
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 })
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/api/track/lead/route.ts b/src/app/api/track/lead/route.ts
new file mode 100644
index 0000000..64fd6c1
--- /dev/null
+++ b/src/app/api/track/lead/route.ts
@@ -0,0 +1,51 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { upsertEarlyLead, createEbookLead } from '@/lib/db-mysql'
+
+const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+
+function clientIp(request: NextRequest): string | null {
+  const fwd = request.headers.get('x-forwarded-for')
+  if (fwd) return fwd.split(',')[0].trim()
+  return request.headers.get('x-real-ip') || request.headers.get('cf-connecting-ip') || null
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json().catch(() => ({}))
+    const { email, phone, name, source_lp, referral_code, utm_source, utm_medium, utm_campaign } = body
+
+    if (!email || typeof email !== 'string' || !EMAIL_RE.test(email)) {
+      return NextResponse.json({ captured: false, error: 'Invalid email' }, { status: 400 })
+    }
+
+    const cleanEmail = email.trim().toLowerCase()
+    const cleanName = typeof name === 'string' && name.trim() ? name.trim() : undefined
+
+    // Write to early_leads (pre-submit tracking) AND ebook_leads (idempotent) so
+    // the email shows in the admin portal the instant it's entered.
+    await Promise.all([
+      upsertEarlyLead({
+        email: cleanEmail,
+        phone: typeof phone === 'string' && phone.trim() ? phone.trim() : null,
+        name: cleanName || null,
+        ip_address: clientIp(request),
+        source_lp: source_lp || null,
+        referral_code: referral_code || null,
+        utm_source: utm_source || null,
+        utm_medium: utm_medium || null,
+        utm_campaign: utm_campaign || null,
+      }),
+      createEbookLead({
+        email: cleanEmail,
+        name: cleanName,
+        source_lp: source_lp || 'form-entry',
+        utm_source, utm_medium, utm_campaign,
+      }),
+    ])
+
+    return NextResponse.json({ captured: true })
+  } catch (error) {
+    console.error('Lead capture error:', error)
+    return NextResponse.json({ captured: false, error: 'Internal error' }, { status: 500 })
+  }
+}
diff --git a/src/app/api/track/pageview/route.ts b/src/app/api/track/pageview/route.ts
new file mode 100644
index 0000000..9c8c67b
--- /dev/null
+++ b/src/app/api/track/pageview/route.ts
@@ -0,0 +1,20 @@
+import { NextRequest, NextResponse } from 'next/server'
+import pool from '@/lib/db-mysql'
+import crypto from 'crypto'
+
+export async function POST(request: NextRequest) {
+  try {
+    const { page_slug, referral_code, utm_source, utm_medium, utm_campaign } = await request.json()
+    const ip = request.headers.get('x-forwarded-for')?.split(',')[0] || 'unknown'
+    const ipHash = crypto.createHash('sha256').update(ip).digest('hex').substring(0, 16)
+
+    await pool.execute(
+      `INSERT INTO page_views (page_slug, referral_code, utm_source, utm_medium, utm_campaign, ip_hash) VALUES (?, ?, ?, ?, ?, ?)`,
+      [page_slug || null, referral_code || null, utm_source || null, utm_medium || null, utm_campaign || null, ipHash]
+    )
+
+    return NextResponse.json({ ok: true })
+  } catch {
+    return NextResponse.json({ ok: true }) // Never fail pageview tracking
+  }
+}
diff --git a/src/app/api/verify/route.ts b/src/app/api/verify/route.ts
new file mode 100644
index 0000000..4cd562e
--- /dev/null
+++ b/src/app/api/verify/route.ts
@@ -0,0 +1,32 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { confirmEarlyLead } from '@/lib/db-mysql'
+import { checkVerifyToken } from '@/lib/verify-token'
+
+/**
+ * Double opt-in verification. The free-guide email links here.
+ * Validates the signed token, flips the lead to confirmed=1 (active),
+ * then redirects to the PDF guide so the user gets it immediately.
+ */
+
+const APP_URL = process.env.NEXT_PUBLIC_APP_URL || 'https://hi2b.com'
+const PDF_URL = '/ebooks/budget-luxury-travel.pdf'
+
+export async function GET(request: NextRequest) {
+  const { searchParams } = new URL(request.url)
+  const email = (searchParams.get('e') || '').trim().toLowerCase()
+  const token = searchParams.get('t') || ''
+
+  if (!email || !token || !checkVerifyToken(email, token)) {
+    return NextResponse.redirect(`${APP_URL}/?verify=invalid`)
+  }
+
+  // Mark the lead active (verified). Don't fail the redirect on a DB hiccup.
+  try {
+    await confirmEarlyLead(email)
+  } catch (err) {
+    console.error('verify confirmEarlyLead:', err)
+  }
+
+  // Deliver the guide.
+  return NextResponse.redirect(`${APP_URL}${PDF_URL}`)
+}
diff --git a/src/app/api/webhooks/nmi/route.ts b/src/app/api/webhooks/nmi/route.ts
new file mode 100644
index 0000000..6a2abe1
--- /dev/null
+++ b/src/app/api/webhooks/nmi/route.ts
@@ -0,0 +1,137 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { createHmac, timingSafeEqual } from 'crypto'
+import pool, { createPayment, updateSignup } from '@/lib/db-mysql'
+
+/**
+ * NMI Webhook Handler
+ * Configure in NMI/Maverick Dashboard:
+ *   Settings → Webhooks → URL: https://hi2b.com/api/webhooks/nmi
+ *   Events: recurring.subscription.add, recurring.subscription.update, recurring.subscription.delete
+ *   Signing key → same value as NMI_WEBHOOK_SECRET env var on the server.
+ *
+ * Every request MUST carry one of:
+ *   - X-Signature: sha256=<hex hmac of raw body>
+ *   - X-NMI-Signature: <hex hmac of raw body>
+ * Unsigned requests are rejected with 401.
+ */
+
+function verifySignature(rawBody: string, headerValue: string | null, secret: string): boolean {
+  if (!headerValue) return false
+  const provided = headerValue.replace(/^sha256=/i, '').trim().toLowerCase()
+  if (!/^[0-9a-f]+$/.test(provided)) return false
+  const expected = createHmac('sha256', secret).update(rawBody).digest('hex')
+  const a = Buffer.from(provided, 'hex')
+  const b = Buffer.from(expected, 'hex')
+  if (a.length !== b.length) return false
+  return timingSafeEqual(a, b)
+}
+
+export async function POST(request: NextRequest) {
+  const secret = process.env.NMI_WEBHOOK_SECRET
+  if (!secret) {
+    console.error('[NMI Webhook] NMI_WEBHOOK_SECRET not configured; rejecting')
+    return NextResponse.json({ error: 'Webhook not configured' }, { status: 503 })
+  }
+
+  const rawBody = await request.text()
+  const sigHeader = request.headers.get('x-signature') || request.headers.get('x-nmi-signature')
+  if (!verifySignature(rawBody, sigHeader, secret)) {
+    console.warn('[NMI Webhook] Invalid signature — rejecting')
+    return NextResponse.json({ error: 'Invalid signature' }, { status: 401 })
+  }
+
+  let body: any
+  try {
+    body = JSON.parse(rawBody)
+  } catch {
+    return NextResponse.json({ error: 'Invalid JSON' }, { status: 400 })
+  }
+
+  try {
+    const { event_id, event_type, event_body } = body
+    console.log(`[NMI Webhook] ${event_type} | event_id: ${event_id}`)
+
+    if (!event_type || !event_body) {
+      return NextResponse.json({ message: 'Invalid webhook payload' }, { status: 400 })
+    }
+
+    const subscriptionId = event_body.subscription_id
+    const completedPayments = parseInt(event_body.completed_payments || '0')
+    const remainingPayments = event_body.remaining_payments
+    const planAmount = parseFloat(event_body.plan?.amount || '29.00')
+
+    let signupId: number | null = null
+    const [subMatch] = await pool.execute(
+      `SELECT id FROM signups WHERE subscription_id = ? LIMIT 1`,
+      [subscriptionId]
+    ) as any[]
+    if (subMatch.length > 0) signupId = subMatch[0].id
+
+    switch (event_type) {
+      case 'recurring.subscription.add': {
+        console.log(`[NMI Webhook] Subscription created: ${subscriptionId}`)
+        break
+      }
+
+      case 'recurring.subscription.update': {
+        console.log(`[NMI Webhook] Subscription updated: ${subscriptionId} | Completed: ${completedPayments} | Remaining: ${remainingPayments}`)
+        if (signupId) {
+          const [existing] = await pool.execute(
+            `SELECT id FROM payments WHERE signup_id = ? AND payment_type = 'monthly' AND amount = ? AND created_at > DATE_SUB(NOW(), INTERVAL 1 DAY)`,
+            [signupId, planAmount]
+          ) as any[]
+
+          if (existing.length === 0) {
+            await createPayment({
+              signup_id: signupId,
+              amount: planAmount,
+              payment_type: 'monthly',
+              status: 'completed',
+              transaction_id: `sub_${subscriptionId}_${completedPayments}`,
+            })
+            console.log(`[NMI Webhook] Recorded monthly payment #${completedPayments} for signup ${signupId}`)
+          }
+
+          if (remainingPayments === '0' || remainingPayments === 0) {
+            await updateSignup(signupId, { payment_status: 'completed' })
+            console.log(`[NMI Webhook] Subscription completed for signup ${signupId}`)
+          }
+        } else {
+          console.warn(`[NMI Webhook] Could not match subscription ${subscriptionId} to a signup`)
+          console.warn(`[NMI Webhook] Orphan payment: sub=${subscriptionId}, amount=${planAmount}, completed=${completedPayments}`)
+        }
+        break
+      }
+
+      case 'recurring.subscription.delete': {
+        console.log(`[NMI Webhook] Subscription deleted: ${subscriptionId}`)
+        if (signupId) {
+          await updateSignup(signupId, { payment_status: 'cancelled' })
+          console.log(`[NMI Webhook] Marked signup ${signupId} as cancelled`)
+        }
+        break
+      }
+
+      default:
+        console.log(`[NMI Webhook] Unhandled event type: ${event_type}`)
+    }
+
+    return NextResponse.json({ message: 'Webhook received successfully' })
+  } catch (error) {
+    console.error('[NMI Webhook] Error:', error)
+    return NextResponse.json({ message: 'Webhook received with errors' })
+  }
+}
+
+export async function GET() {
+  return NextResponse.json({
+    status: 'ok',
+    endpoint: 'NMI Recurring Payment Webhook',
+    note: 'Signed requests only (HMAC-SHA256 of body, X-Signature header).',
+    events: [
+      'recurring.subscription.add',
+      'recurring.subscription.update',
+      'recurring.subscription.delete',
+    ],
+  })
+}
diff --git a/src/app/dashboard/billing/page.tsx b/src/app/dashboard/billing/page.tsx
new file mode 100644
index 0000000..16086ca
--- /dev/null
+++ b/src/app/dashboard/billing/page.tsx
@@ -0,0 +1,212 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useRouter } from 'next/navigation'
+import Link from 'next/link'
+import { Plane, ArrowLeft, CheckCircle, Clock, XCircle, CreditCard, DollarSign, Calendar } from 'lucide-react'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+
+interface UserData {
+  id: number
+  fullName: string
+  totalAmount: number
+  monthlyPayment: number
+  paymentPlanMonths: number
+  paymentStatus: string
+}
+
+interface PaymentData {
+  id: number
+  amount: string
+  currency: string
+  payment_type: string
+  status: string
+  transaction_id: string
+  created_at: string
+}
+
+export default function BillingPage() {
+  const router = useRouter()
+  const [user, setUser] = useState<UserData | null>(null)
+  const [payments, setPayments] = useState<PaymentData[]>([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    fetch('/api/auth/me')
+      .then(res => {
+        if (!res.ok) throw new Error()
+        return res.json()
+      })
+      .then(data => {
+        setUser(data.user)
+        setPayments(data.payments || [])
+      })
+      .catch(() => router.push('/dashboard/login'))
+      .finally(() => setLoading(false))
+  }, [router])
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
+        <div className="w-10 h-10 border-4 border-orange-500 border-t-transparent rounded-full animate-spin" />
+      </div>
+    )
+  }
+
+  if (!user) return null
+
+  const paidAmount = payments.filter(p => p.status === 'completed').reduce((sum, p) => sum + Number(p.amount), 0)
+  const paidMonths = payments.filter(p => p.status === 'completed').length
+  const remainingMonths = Math.max(0, user.paymentPlanMonths - paidMonths)
+  const remainingAmount = Number(user.totalAmount) - paidAmount
+  const progressPercent = (paidAmount / Number(user.totalAmount)) * 100
+
+  // Generate upcoming payments
+  const upcomingPayments: { date: string; amount: number }[] = []
+  if (remainingMonths > 0) {
+    const lastPaymentDate = payments.length > 0
+      ? new Date(payments[0].created_at)
+      : new Date()
+    for (let i = 1; i <= remainingMonths; i++) {
+      const d = new Date(lastPaymentDate)
+      d.setMonth(d.getMonth() + i)
+      upcomingPayments.push({
+        date: d.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' }),
+        amount: Number(user.monthlyPayment),
+      })
+    }
+  }
+
+  const statusIcon = (status: string) => {
+    switch (status) {
+      case 'completed': return <CheckCircle className="w-4 h-4 text-green-500" />
+      case 'pending': case 'processing': return <Clock className="w-4 h-4 text-yellow-500" />
+      default: return <XCircle className="w-4 h-4 text-red-500" />
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <nav className="bg-white border-b shadow-sm">
+        <div className="max-w-6xl mx-auto px-4 py-3 flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className="w-9 h-9 bg-gradient-to-br from-orange-500 to-red-500 rounded-xl flex items-center justify-center">
+              <Plane className="w-5 h-5 text-white" />
+            </div>
+            <span className="font-bold text-gray-900 hidden sm:inline">Mexico Paradise Vacations</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <Link href="/dashboard" className="text-sm font-medium text-gray-600 hover:text-gray-900 px-3 py-1.5">Dashboard</Link>
+            <Link href="/dashboard/certificate" className="text-sm font-medium text-gray-600 hover:text-gray-900 px-3 py-1.5">Certificate</Link>
+            <Link href="/dashboard/billing" className="text-sm font-medium text-orange-600 px-3 py-1.5 rounded-lg bg-orange-50">Billing</Link>
+          </div>
+        </div>
+      </nav>
+
+      <div className="max-w-4xl mx-auto px-4 py-8">
+        <Link href="/dashboard" className="inline-flex items-center gap-1 text-sm text-gray-500 hover:text-gray-700 mb-6">
+          <ArrowLeft className="w-4 h-4" /> Back to Dashboard
+        </Link>
+
+        <h1 className="text-2xl font-bold text-gray-900 mb-6">Billing History</h1>
+
+        {/* Payment Progress */}
+        <Card className="mb-6">
+          <CardContent className="p-6">
+            <div className="flex items-center justify-between mb-4">
+              <h3 className="font-bold text-gray-900">Payment Progress</h3>
+              <span className="text-sm text-gray-500">{paidMonths} of {user.paymentPlanMonths} payments</span>
+            </div>
+            <div className="w-full bg-gray-200 rounded-full h-3 mb-4">
+              <div
+                className="bg-gradient-to-r from-green-500 to-emerald-400 h-3 rounded-full transition-all duration-500"
+                style={{ width: `${Math.min(100, progressPercent)}%` }}
+              />
+            </div>
+            <div className="grid grid-cols-3 gap-4 text-center">
+              <div>
+                <p className="text-2xl font-bold text-green-600">${paidAmount.toFixed(2)}</p>
+                <p className="text-xs text-gray-500">Paid</p>
+              </div>
+              <div>
+                <p className="text-2xl font-bold text-orange-600">${remainingAmount.toFixed(2)}</p>
+                <p className="text-xs text-gray-500">Remaining</p>
+              </div>
+              <div>
+                <p className="text-2xl font-bold text-gray-900">${Number(user.totalAmount).toFixed(2)}</p>
+                <p className="text-xs text-gray-500">Total</p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Payment History */}
+        <Card className="mb-6">
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2 text-lg">
+              <CreditCard className="w-5 h-5" /> Payment History
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            {payments.length === 0 ? (
+              <p className="text-gray-500 text-center py-8">No payments yet.</p>
+            ) : (
+              <div className="divide-y">
+                {payments.map((p) => (
+                  <div key={p.id} className="flex items-center justify-between py-4">
+                    <div className="flex items-center gap-3">
+                      {statusIcon(p.status)}
+                      <div>
+                        <p className="text-sm font-medium text-gray-900">
+                          {p.payment_type === 'initial' ? 'Initial Payment' : p.payment_type === 'monthly' ? 'Monthly Payment' : 'Refund'}
+                        </p>
+                        <p className="text-xs text-gray-500">
+                          {new Date(p.created_at).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })}
+                        </p>
+                      </div>
+                    </div>
+                    <div className="text-right">
+                      <p className={`font-bold ${p.status === 'completed' ? 'text-green-600' : p.status === 'failed' ? 'text-red-600' : 'text-gray-600'}`}>
+                        {p.payment_type === 'refund' ? '-' : ''}${Number(p.amount).toFixed(2)}
+                      </p>
+                      <p className="text-[10px] text-gray-400 font-mono">{p.transaction_id}</p>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        {/* Upcoming Payments */}
+        {upcomingPayments.length > 0 && (
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2 text-lg">
+                <Calendar className="w-5 h-5" /> Upcoming Payments
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="divide-y">
+                {upcomingPayments.map((p, i) => (
+                  <div key={i} className="flex items-center justify-between py-3">
+                    <div className="flex items-center gap-3">
+                      <Clock className="w-4 h-4 text-gray-300" />
+                      <p className="text-sm text-gray-600">{p.date}</p>
+                    </div>
+                    <p className="text-sm font-medium text-gray-500">${p.amount.toFixed(2)}</p>
+                  </div>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+        )}
+
+        {/* Support */}
+        <div className="text-center mt-8 text-sm text-gray-500">
+          <p>Questions about billing? Call <a href="tel:888-602-2424" className="text-orange-600 font-medium">888-602-2424</a></p>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/app/dashboard/certificate/page.tsx b/src/app/dashboard/certificate/page.tsx
new file mode 100644
index 0000000..b05c81f
--- /dev/null
+++ b/src/app/dashboard/certificate/page.tsx
@@ -0,0 +1,248 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useRouter } from 'next/navigation'
+import Link from 'next/link'
+import { Plane, Award, ArrowLeft, Download, MapPin, Calendar, Users, Star, Phone } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+
+interface UserData {
+  id: number
+  email: string
+  fullName: string
+  phone: string
+  destination: string | null
+  totalAmount: number
+  monthlyPayment: number
+  paymentPlanMonths: number
+  paymentStatus: string
+  certificateNumber: string | null
+  certificateExpires: string | null
+  createdAt: string
+}
+
+export default function CertificatePage() {
+  const router = useRouter()
+  const [user, setUser] = useState<UserData | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    fetch('/api/auth/me')
+      .then(res => {
+        if (!res.ok) throw new Error()
+        return res.json()
+      })
+      .then(data => setUser(data.user))
+      .catch(() => router.push('/dashboard/login'))
+      .finally(() => setLoading(false))
+  }, [router])
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
+        <div className="w-10 h-10 border-4 border-orange-500 border-t-transparent rounded-full animate-spin" />
+      </div>
+    )
+  }
+
+  if (!user) return null
+
+  const expiryDate = user.certificateExpires
+    ? new Date(user.certificateExpires).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })
+    : 'TBD'
+
+  const issueDate = new Date(user.createdAt).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-gray-100 to-gray-200">
+      {/* Nav — hidden on print */}
+      <nav className="bg-white border-b shadow-sm print:hidden">
+        <div className="max-w-6xl mx-auto px-4 py-3 flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className="w-9 h-9 bg-gradient-to-br from-orange-500 to-red-500 rounded-xl flex items-center justify-center">
+              <Plane className="w-5 h-5 text-white" />
+            </div>
+            <span className="font-bold text-gray-900 hidden sm:inline">Mexico Paradise Vacations</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <Link href="/dashboard" className="text-sm font-medium text-gray-600 hover:text-gray-900 px-3 py-1.5">Dashboard</Link>
+            <Link href="/dashboard/certificate" className="text-sm font-medium text-orange-600 px-3 py-1.5 rounded-lg bg-orange-50">Certificate</Link>
+            <Link href="/dashboard/billing" className="text-sm font-medium text-gray-600 hover:text-gray-900 px-3 py-1.5">Billing</Link>
+          </div>
+        </div>
+      </nav>
+
+      <div className="max-w-4xl mx-auto px-4 py-8 print:p-0 print:max-w-none">
+        {/* Back link — hidden on print */}
+        <div className="print:hidden">
+          <Link href="/dashboard" className="inline-flex items-center gap-1 text-sm text-gray-500 hover:text-gray-700 mb-6">
+            <ArrowLeft className="w-4 h-4" /> Back to Dashboard
+          </Link>
+        </div>
+
+        {/* ═══ CERTIFICATE — this is the only thing that prints ═══ */}
+        <div className="relative bg-white rounded-3xl shadow-2xl overflow-hidden print:rounded-none print:shadow-none print:border-4 print:border-amber-400">
+          {/* Gold border effect */}
+          <div className="absolute inset-0 rounded-3xl border-4 border-amber-400/40 pointer-events-none z-10 print:border-amber-400" />
+          <div className="absolute inset-2 rounded-2xl border border-amber-300/30 pointer-events-none z-10 print:rounded-none print:border-amber-300" />
+
+          {/* Header band */}
+          <div className="bg-gradient-to-r from-amber-600 via-yellow-500 to-amber-600 py-5 px-8 text-center relative print:bg-amber-500 print:py-4">
+            <div className="relative">
+              <div className="flex items-center justify-center gap-2 mb-1">
+                <Star className="w-4 h-4 text-amber-100 fill-amber-100" />
+                <Star className="w-5 h-5 text-amber-100 fill-amber-100" />
+                <Star className="w-4 h-4 text-amber-100 fill-amber-100" />
+              </div>
+              <h1 className="text-3xl sm:text-4xl font-bold text-white tracking-wider print:text-3xl" style={{ fontFamily: 'Georgia, serif' }}>
+                VACATION CERTIFICATE
+              </h1>
+              <p className="text-amber-100 text-sm mt-0.5 tracking-widest uppercase">Mexico Paradise Vacations</p>
+            </div>
+          </div>
+
+          {/* Certificate body */}
+          <div className="p-6 sm:p-10 print:p-6">
+            {/* Presented to */}
+            <div className="text-center mb-6 print:mb-4">
+              <p className="text-gray-400 text-xs uppercase tracking-widest mb-1">This certificate is presented to</p>
+              <h2 className="text-3xl sm:text-4xl font-bold text-gray-900 border-b-2 border-amber-400 inline-block pb-2 px-4 print:text-3xl" style={{ fontFamily: 'Georgia, serif' }}>
+                {user.fullName}
+              </h2>
+            </div>
+
+            {/* Description */}
+            <div className="text-center mb-6 print:mb-4">
+              <p className="text-gray-600 leading-relaxed max-w-xl mx-auto text-sm print:text-xs">
+                This certifies the bearer is entitled to a <strong>5-Day, 4-Night All-Inclusive Vacation</strong> for two guests at a participating luxury resort in Mexico, including all meals, beverages, and resort amenities.
+              </p>
+            </div>
+
+            {/* Certificate number and dates */}
+            <div className="grid grid-cols-3 gap-4 mb-6 print:mb-4 print:gap-2">
+              <div className="text-center p-3 bg-amber-50 rounded-xl border border-amber-200 print:p-2 print:rounded-lg">
+                <Award className="w-5 h-5 text-amber-600 mx-auto mb-1" />
+                <p className="text-[10px] text-gray-500 uppercase tracking-wider">Certificate No.</p>
+                <p className="text-sm font-bold text-amber-700 font-mono tracking-wider print:text-xs">{user.certificateNumber || 'PENDING'}</p>
+              </div>
+              <div className="text-center p-3 bg-blue-50 rounded-xl border border-blue-200 print:p-2 print:rounded-lg">
+                <Calendar className="w-5 h-5 text-blue-600 mx-auto mb-1" />
+                <p className="text-[10px] text-gray-500 uppercase tracking-wider">Issued</p>
+                <p className="text-xs font-bold text-blue-700">{issueDate}</p>
+              </div>
+              <div className="text-center p-3 bg-red-50 rounded-xl border border-red-200 print:p-2 print:rounded-lg">
+                <Calendar className="w-5 h-5 text-red-600 mx-auto mb-1" />
+                <p className="text-[10px] text-gray-500 uppercase tracking-wider">Expires</p>
+                <p className="text-xs font-bold text-red-700">{expiryDate}</p>
+              </div>
+            </div>
+
+            {/* Destinations */}
+            <div className="text-center mb-5 print:mb-3">
+              <p className="text-[10px] text-gray-400 uppercase tracking-widest mb-2">Valid at participating resorts in</p>
+              <div className="flex flex-wrap items-center justify-center gap-3 text-sm text-gray-600 print:gap-2 print:text-xs">
+                {['Cancun', 'Cabo San Lucas', 'Riviera Maya', 'Puerto Vallarta'].map(d => (
+                  <span key={d} className="flex items-center gap-1 bg-gray-50 px-3 py-1 rounded-full border print:px-2 print:py-0.5">
+                    <MapPin className="w-3 h-3 text-orange-500" /> {d}
+                  </span>
+                ))}
+              </div>
+            </div>
+
+            {/* Includes */}
+            <div className="bg-gradient-to-r from-gray-50 to-amber-50/30 rounded-xl p-4 mb-5 border print:p-3 print:mb-3 print:rounded-lg">
+              <h3 className="font-bold text-gray-900 mb-2 text-center text-sm">Certificate Includes</h3>
+              <div className="grid grid-cols-3 sm:grid-cols-3 gap-2 text-sm text-gray-600 print:text-xs">
+                {[
+                  '5 Days / 4 Nights',
+                  'All-Inclusive Resort',
+                  'Unlimited Meals & Drinks',
+                  'Resort Amenities',
+                  'Beach & Pool Access',
+                  '2 Guest Capacity',
+                ].map(item => (
+                  <div key={item} className="flex items-center gap-1.5">
+                    <div className="w-4 h-4 bg-green-500 rounded-full flex items-center justify-center shrink-0 print:w-3 print:h-3">
+                      <svg className="w-2.5 h-2.5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
+                        <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+                      </svg>
+                    </div>
+                    {item}
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* ═══ CALL TO BOOK — BIG TOLL FREE NUMBER ═══ */}
+            <div className="bg-gradient-to-r from-blue-600 to-blue-700 rounded-2xl p-6 mb-5 text-center text-white print:p-4 print:rounded-lg print:bg-blue-600">
+              <Phone className="w-8 h-8 mx-auto mb-2 print:w-6 print:h-6" />
+              <p className="text-sm uppercase tracking-widest mb-1 text-blue-200 print:text-xs">To Book Your Vacation, Call</p>
+              <a href="tel:888-602-2424" className="block">
+                <p className="text-4xl sm:text-5xl font-black tracking-wider print:text-4xl" style={{ fontFamily: 'Georgia, serif' }}>
+                  888-602-2424
+                </p>
+              </a>
+              <p className="text-blue-200 text-sm mt-2 print:text-xs">
+                Toll-Free &bull; Mon-Fri 9am-8pm &bull; Sat 10am-4pm EST
+              </p>
+              <p className="text-blue-300 text-xs mt-1 print:text-[10px]">
+                Have your certificate number ready: <strong className="text-white">{user.certificateNumber || 'PENDING'}</strong>
+              </p>
+            </div>
+
+            {/* Status bar */}
+            <div className="flex items-center justify-between p-3 bg-green-50 rounded-xl border border-green-200 print:p-2 print:rounded-lg">
+              <div className="flex items-center gap-2">
+                <div className="w-3 h-3 bg-green-500 rounded-full animate-pulse print:animate-none" />
+                <span className="text-sm font-bold text-green-700 print:text-xs">
+                  {user.paymentStatus === 'active' ? 'CERTIFICATE ACTIVE' : (user.paymentStatus || 'PENDING').toString().toUpperCase()}
+                </span>
+              </div>
+              <div className="flex items-center gap-2">
+                <Users className="w-4 h-4 text-green-600" />
+                <span className="text-sm text-green-600 print:text-xs">2 Guests</span>
+              </div>
+            </div>
+          </div>
+
+          {/* Footer band */}
+          <div className="bg-gradient-to-r from-amber-600 via-yellow-500 to-amber-600 py-2.5 px-8 text-center print:bg-amber-500 print:py-2">
+            <p className="text-amber-100 text-xs tracking-wider">
+              hi2b.com &bull; 724vacation.com &bull; 888-602-2424
+            </p>
+          </div>
+        </div>
+
+        {/* Actions — hidden on print */}
+        <div className="flex justify-center gap-3 mt-6 print:hidden">
+          <Button onClick={() => window.print()} variant="outline" className="gap-2">
+            <Download className="w-4 h-4" /> Print Certificate
+          </Button>
+          <Link href="/dashboard/billing">
+            <Button className="bg-orange-500 hover:bg-orange-600 text-white gap-2">
+              View Billing <ArrowLeft className="w-4 h-4 rotate-180" />
+            </Button>
+          </Link>
+        </div>
+      </div>
+
+      {/* Print styles */}
+      <style jsx global>{`
+        @media print {
+          body {
+            background: white !important;
+            -webkit-print-color-adjust: exact;
+            print-color-adjust: exact;
+          }
+          nav, .print\\:hidden {
+            display: none !important;
+          }
+          @page {
+            margin: 0.5in;
+            size: letter;
+          }
+        }
+      `}</style>
+    </div>
+  )
+}
diff --git a/src/app/dashboard/forgot-password/page.tsx b/src/app/dashboard/forgot-password/page.tsx
new file mode 100644
index 0000000..b695fc4
--- /dev/null
+++ b/src/app/dashboard/forgot-password/page.tsx
@@ -0,0 +1,71 @@
+'use client'
+
+import { useState } from 'react'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Loader2, Plane, Mail, ArrowLeft } from 'lucide-react'
+import Link from 'next/link'
+
+export default function ForgotPasswordPage() {
+  const [email, setEmail] = useState('')
+  const [isLoading, setIsLoading] = useState(false)
+  const [sent, setSent] = useState(false)
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setIsLoading(true)
+    await fetch('/api/auth/forgot-password', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ email }),
+    })
+    setSent(true)
+    setIsLoading(false)
+  }
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-orange-50 via-white to-blue-50 flex items-center justify-center p-4">
+      <div className="w-full max-w-md">
+        <div className="text-center mb-8">
+          <div className="w-14 h-14 bg-gradient-to-br from-orange-500 to-red-500 rounded-2xl flex items-center justify-center mx-auto mb-3 shadow-lg">
+            <Plane className="w-7 h-7 text-white" />
+          </div>
+        </div>
+
+        <Card className="shadow-xl border-0">
+          <CardHeader className="text-center">
+            <CardTitle>{sent ? 'Check Your Email' : 'Reset Password'}</CardTitle>
+          </CardHeader>
+          <CardContent>
+            {sent ? (
+              <div className="text-center py-4">
+                <Mail className="w-12 h-12 text-orange-500 mx-auto mb-4" />
+                <p className="text-gray-600 mb-4">If an account with <strong>{email}</strong> exists, we&apos;ve sent a password reset link.</p>
+                <Link href="/dashboard/login">
+                  <Button variant="outline" className="w-full">
+                    <ArrowLeft className="w-4 h-4 mr-2" /> Back to Login
+                  </Button>
+                </Link>
+              </div>
+            ) : (
+              <form onSubmit={handleSubmit} className="space-y-4">
+                <div className="space-y-2">
+                  <Label>Email Address</Label>
+                  <Input type="email" placeholder="you@example.com" value={email} onChange={(e) => setEmail(e.target.value)} className="h-11 bg-white" required />
+                </div>
+                <Button type="submit" disabled={isLoading} className="w-full h-11 bg-orange-500 hover:bg-orange-600 text-white">
+                  {isLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : 'Send Reset Link'}
+                </Button>
+                <div className="text-center">
+                  <Link href="/dashboard/login" className="text-sm text-gray-500 hover:text-gray-700">Back to login</Link>
+                </div>
+              </form>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}
diff --git a/src/app/dashboard/layout.tsx b/src/app/dashboard/layout.tsx
new file mode 100644
index 0000000..642e33c
--- /dev/null
+++ b/src/app/dashboard/layout.tsx
@@ -0,0 +1,10 @@
+import type { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Dashboard — Mexico Paradise Vacations',
+  description: 'View your vacation certificate and billing history.',
+}
+
+export default function DashboardLayout({ children }: { children: React.ReactNode }) {
+  return <>{children}</>
+}
diff --git a/src/app/dashboard/login/page.tsx b/src/app/dashboard/login/page.tsx
new file mode 100644
index 0000000..271f54b
--- /dev/null
+++ b/src/app/dashboard/login/page.tsx
@@ -0,0 +1,159 @@
+'use client'
+
+import { useState } from 'react'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'
+import { Loader2, Plane, Eye, EyeOff } from 'lucide-react'
+import Link from 'next/link'
+
+export default function LoginPage() {
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [showPassword, setShowPassword] = useState(false)
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState('')
+  const [mode, setMode] = useState<'login' | 'register'>('login')
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setError('')
+    setIsLoading(true)
+
+    try {
+      const endpoint = mode === 'login' ? '/api/auth/login' : '/api/auth/register'
+      const res = await fetch(endpoint, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email, password }),
+      })
+
+      const data = await res.json()
+      if (!res.ok) {
+        setError(data.error || 'Something went wrong')
+        return
+      }
+
+      window.location.href = '/dashboard'
+    } catch {
+      setError('Network error. Please try again.')
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-orange-50 via-white to-blue-50 flex items-center justify-center p-4">
+      <div className="w-full max-w-md">
+        {/* Logo */}
+        <div className="text-center mb-8">
+          <div className="w-14 h-14 bg-gradient-to-br from-orange-500 to-red-500 rounded-2xl flex items-center justify-center mx-auto mb-3 shadow-lg">
+            <Plane className="w-7 h-7 text-white" />
+          </div>
+          <h1 className="text-2xl font-bold text-gray-900">Mexico Paradise Vacations</h1>
+          <p className="text-gray-500 text-sm mt-1">Client Dashboard</p>
+        </div>
+
+        <Card className="shadow-xl border-0">
+          <CardHeader className="text-center pb-2">
+            <CardTitle className="text-xl">
+              {mode === 'login' ? 'Welcome Back' : 'Set Up Your Account'}
+            </CardTitle>
+            <CardDescription>
+              {mode === 'login'
+                ? 'Log in to view your certificate and billing'
+                : 'Create a password for your account'}
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            {/* Tab toggle */}
+            <div className="flex rounded-lg overflow-hidden border mb-6">
+              <button
+                type="button"
+                onClick={() => { setMode('login'); setError('') }}
+                className={`flex-1 py-2.5 text-sm font-semibold transition-colors ${
+                  mode === 'login' ? 'bg-orange-500 text-white' : 'bg-gray-50 text-gray-600'
+                }`}
+              >
+                Log In
+              </button>
+              <button
+                type="button"
+                onClick={() => { setMode('register'); setError('') }}
+                className={`flex-1 py-2.5 text-sm font-semibold transition-colors ${
+                  mode === 'register' ? 'bg-orange-500 text-white' : 'bg-gray-50 text-gray-600'
+                }`}
+              >
+                Set Password
+              </button>
+            </div>
+
+            {error && (
+              <div className="bg-red-50 border border-red-200 rounded-lg p-3 mb-4 text-sm text-red-700">
+                {error}
+              </div>
+            )}
+
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <div className="space-y-2">
+                <Label>Email</Label>
+                <Input
+                  type="email"
+                  placeholder="you@example.com"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  className="h-11 bg-white"
+                  required
+                />
+              </div>
+              <div className="space-y-2">
+                <Label>Password {mode === 'register' && <span className="text-gray-400 font-normal">(min 6 chars)</span>}</Label>
+                <div className="relative">
+                  <Input
+                    type={showPassword ? 'text' : 'password'}
+                    placeholder={mode === 'register' ? 'Create a password' : 'Enter your password'}
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    className="h-11 bg-white pr-10"
+                    required
+                    minLength={6}
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowPassword(!showPassword)}
+                    className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
+                  >
+                    {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                  </button>
+                </div>
+              </div>
+
+              <Button
+                type="submit"
+                disabled={isLoading}
+                className="w-full h-11 bg-orange-500 hover:bg-orange-600 text-white font-semibold"
+              >
+                {isLoading ? (
+                  <><Loader2 className="w-4 h-4 mr-2 animate-spin" /> Processing...</>
+                ) : mode === 'login' ? 'Log In' : 'Set Password & Continue'}
+              </Button>
+            </form>
+
+            {mode === 'login' && (
+              <div className="text-center mt-4">
+                <Link href="/dashboard/forgot-password" className="text-sm text-orange-600 hover:text-orange-700">
+                  Forgot your password?
+                </Link>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        <p className="text-center text-xs text-gray-400 mt-6">
+          <Link href="/" className="hover:text-gray-600">Back to Home</Link>
+        </p>
+      </div>
+    </div>
+  )
+}
diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
new file mode 100644
index 0000000..cba298e
--- /dev/null
+++ b/src/app/dashboard/page.tsx
@@ -0,0 +1,210 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useRouter } from 'next/navigation'
+import Link from 'next/link'
+import { Plane, CreditCard, Award, LogOut, User, Calendar, DollarSign, Shield, MapPin } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent } from '@/components/ui/card'
+
+interface UserData {
+  id: number
+  email: string
+  fullName: string
+  phone: string
+  destination: string | null
+  totalAmount: number
+  monthlyPayment: number
+  paymentPlanMonths: number
+  paymentStatus: string
+  certificateNumber: string | null
+  certificateExpires: string | null
+  createdAt: string
+}
+
+interface PaymentData {
+  id: number
+  amount: number
+  currency: string
+  payment_type: string
+  status: string
+  transaction_id: string
+  created_at: string
+}
+
+export default function DashboardPage() {
+  const router = useRouter()
+  const [user, setUser] = useState<UserData | null>(null)
+  const [payments, setPayments] = useState<PaymentData[]>([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    fetch('/api/auth/me')
+      .then(res => {
+        if (!res.ok) throw new Error('Not authenticated')
+        return res.json()
+      })
+      .then(data => {
+        setUser(data.user)
+        setPayments(data.payments || [])
+      })
+      .catch(() => router.push('/dashboard/login'))
+      .finally(() => setLoading(false))
+  }, [router])
+
+  const handleLogout = () => {
+    document.cookie = 'auth_token=; path=/; max-age=0'
+    router.push('/dashboard/login')
+  }
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
+        <div className="w-10 h-10 border-4 border-orange-500 border-t-transparent rounded-full animate-spin" />
+      </div>
+    )
+  }
+
+  if (!user) return null
+
+  const paidAmount = payments.filter(p => p.status === 'completed').reduce((sum, p) => sum + Number(p.amount), 0)
+  const totalAmount = Number(user.totalAmount) || 0
+  const remainingAmount = totalAmount - paidAmount
+  const paidMonths = payments.filter(p => p.status === 'completed').length
+  const remainingMonths = (user.paymentPlanMonths || 0) - paidMonths
+  const firstName = (user.fullName || user.email || 'Traveler').split(' ')[0]
+  const paymentStatus = (user.paymentStatus || 'pending').toString()
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      {/* Top Nav */}
+      <nav className="bg-white border-b shadow-sm">
+        <div className="max-w-6xl mx-auto px-4 py-3 flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className="w-9 h-9 bg-gradient-to-br from-orange-500 to-red-500 rounded-xl flex items-center justify-center">
+              <Plane className="w-5 h-5 text-white" />
+            </div>
+            <span className="font-bold text-gray-900 hidden sm:inline">Mexico Paradise Vacations</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <Link href="/dashboard" className="text-sm font-medium text-orange-600 px-3 py-1.5 rounded-lg bg-orange-50">Dashboard</Link>
+            <Link href="/dashboard/certificate" className="text-sm font-medium text-gray-600 hover:text-gray-900 px-3 py-1.5">Certificate</Link>
+            <Link href="/dashboard/billing" className="text-sm font-medium text-gray-600 hover:text-gray-900 px-3 py-1.5">Billing</Link>
+            <button onClick={handleLogout} className="text-sm text-gray-400 hover:text-red-500 ml-2 p-1.5">
+              <LogOut className="w-4 h-4" />
+            </button>
+          </div>
+        </div>
+      </nav>
+
+      <div className="max-w-6xl mx-auto px-4 py-8">
+        {/* Welcome */}
+        <div className="mb-8">
+          <h1 className="text-2xl font-bold text-gray-900">Welcome back, {firstName}!</h1>
+          <p className="text-gray-500">Here&apos;s your vacation certificate overview.</p>
+        </div>
+
+        {/* Status Cards */}
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
+          <Card>
+            <CardContent className="p-4">
+              <div className="flex items-center gap-3">
+                <div className="w-10 h-10 rounded-xl bg-green-100 flex items-center justify-center">
+                  <Shield className="w-5 h-5 text-green-600" />
+                </div>
+                <div>
+                  <p className="text-xs text-gray-500">Status</p>
+                  <p className={`text-sm font-bold ${paymentStatus === 'active' ? 'text-green-600' : 'text-yellow-600'}`}>
+                    {paymentStatus.toUpperCase()}
+                  </p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+          <Card>
+            <CardContent className="p-4">
+              <div className="flex items-center gap-3">
+                <div className="w-10 h-10 rounded-xl bg-blue-100 flex items-center justify-center">
+                  <DollarSign className="w-5 h-5 text-blue-600" />
+                </div>
+                <div>
+                  <p className="text-xs text-gray-500">Paid</p>
+                  <p className="text-sm font-bold text-gray-900">${paidAmount.toFixed(2)}</p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+          <Card>
+            <CardContent className="p-4">
+              <div className="flex items-center gap-3">
+                <div className="w-10 h-10 rounded-xl bg-orange-100 flex items-center justify-center">
+                  <Calendar className="w-5 h-5 text-orange-600" />
+                </div>
+                <div>
+                  <p className="text-xs text-gray-500">Remaining</p>
+                  <p className="text-sm font-bold text-gray-900">{remainingMonths} payments</p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+          <Card>
+            <CardContent className="p-4">
+              <div className="flex items-center gap-3">
+                <div className="w-10 h-10 rounded-xl bg-purple-100 flex items-center justify-center">
+                  <Award className="w-5 h-5 text-purple-600" />
+                </div>
+                <div>
+                  <p className="text-xs text-gray-500">Certificate</p>
+                  <p className="text-sm font-bold text-gray-900">{user.certificateNumber || 'Pending'}</p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* Quick Links */}
+        <div className="grid md:grid-cols-2 gap-6">
+          <Link href="/dashboard/certificate">
+            <Card className="hover:shadow-lg transition-shadow cursor-pointer border-2 hover:border-orange-300">
+              <CardContent className="p-6 flex items-center gap-4">
+                <div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-orange-500 to-red-500 flex items-center justify-center shrink-0">
+                  <Award className="w-7 h-7 text-white" />
+                </div>
+                <div>
+                  <h3 className="font-bold text-gray-900">View Certificate</h3>
+                  <p className="text-sm text-gray-500">See your vacation certificate with details and expiration date</p>
+                </div>
+              </CardContent>
+            </Card>
+          </Link>
+          <Link href="/dashboard/billing">
+            <Card className="hover:shadow-lg transition-shadow cursor-pointer border-2 hover:border-blue-300">
+              <CardContent className="p-6 flex items-center gap-4">
+                <div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-blue-500 to-indigo-500 flex items-center justify-center shrink-0">
+                  <CreditCard className="w-7 h-7 text-white" />
+                </div>
+                <div>
+                  <h3 className="font-bold text-gray-900">Billing History</h3>
+                  <p className="text-sm text-gray-500">View all payments, upcoming charges, and invoices</p>
+                </div>
+              </CardContent>
+            </Card>
+          </Link>
+        </div>
+
+        {/* Account Info */}
+        <Card className="mt-6">
+          <CardContent className="p-6">
+            <h3 className="font-bold text-gray-900 mb-4 flex items-center gap-2"><User className="w-4 h-4" /> Account Details</h3>
+            <div className="grid sm:grid-cols-2 gap-4 text-sm">
+              <div><span className="text-gray-500">Name:</span> <span className="font-medium ml-1">{user.fullName || 'Not set'}</span></div>
+              <div><span className="text-gray-500">Email:</span> <span className="font-medium ml-1">{user.email}</span></div>
+              <div><span className="text-gray-500">Phone:</span> <span className="font-medium ml-1">{user.phone || 'Not set'}</span></div>
+              <div><span className="text-gray-500">Member since:</span> <span className="font-medium ml-1">{user.createdAt ? new Date(user.createdAt).toLocaleDateString() : '—'}</span></div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}
diff --git a/src/app/dashboard/reset-password/page.tsx b/src/app/dashboard/reset-password/page.tsx
new file mode 100644
index 0000000..fe0998e
--- /dev/null
+++ b/src/app/dashboard/reset-password/page.tsx
@@ -0,0 +1,88 @@
+'use client'
+
+import { useState, Suspense } from 'react'
+import { useSearchParams } from 'next/navigation'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Loader2, Plane, CheckCircle } from 'lucide-react'
+import Link from 'next/link'
+
+function ResetPasswordForm() {
+  const searchParams = useSearchParams()
+  const token = searchParams.get('token') || ''
+  const [password, setPassword] = useState('')
+  const [confirm, setConfirm] = useState('')
+  const [isLoading, setIsLoading] = useState(false)
+  const [done, setDone] = useState(false)
+  const [error, setError] = useState('')
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (password !== confirm) { setError('Passwords do not match'); return }
+    setError('')
+    setIsLoading(true)
+
+    const res = await fetch('/api/auth/reset-password', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ token, password }),
+    })
+    const data = await res.json()
+    if (!res.ok) { setError(data.error); setIsLoading(false); return }
+    setDone(true)
+    setIsLoading(false)
+  }
+
+  return (
+    <Card className="shadow-xl border-0">
+      <CardHeader className="text-center">
+        <CardTitle>{done ? 'Password Updated!' : 'Create New Password'}</CardTitle>
+      </CardHeader>
+      <CardContent>
+        {done ? (
+          <div className="text-center py-4">
+            <CheckCircle className="w-12 h-12 text-green-500 mx-auto mb-4" />
+            <p className="text-gray-600 mb-4">Your password has been updated.</p>
+            <Link href="/dashboard/login">
+              <Button className="w-full bg-orange-500 hover:bg-orange-600 text-white">Go to Login</Button>
+            </Link>
+          </div>
+        ) : (
+          <form onSubmit={handleSubmit} className="space-y-4">
+            {error && <div className="bg-red-50 border border-red-200 rounded-lg p-3 text-sm text-red-700">{error}</div>}
+            <div className="space-y-2">
+              <Label>New Password</Label>
+              <Input type="password" placeholder="Min 6 characters" value={password} onChange={(e) => setPassword(e.target.value)} className="h-11 bg-white" required minLength={6} />
+            </div>
+            <div className="space-y-2">
+              <Label>Confirm Password</Label>
+              <Input type="password" placeholder="Confirm password" value={confirm} onChange={(e) => setConfirm(e.target.value)} className="h-11 bg-white" required minLength={6} />
+            </div>
+            <Button type="submit" disabled={isLoading} className="w-full h-11 bg-orange-500 hover:bg-orange-600 text-white">
+              {isLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : 'Update Password'}
+            </Button>
+          </form>
+        )}
+      </CardContent>
+    </Card>
+  )
+}
+
+export default function ResetPasswordPage() {
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-orange-50 via-white to-blue-50 flex items-center justify-center p-4">
+      <div className="w-full max-w-md">
+        <div className="text-center mb-8">
+          <div className="w-14 h-14 bg-gradient-to-br from-orange-500 to-red-500 rounded-2xl flex items-center justify-center mx-auto mb-3 shadow-lg">
+            <Plane className="w-7 h-7 text-white" />
+          </div>
+        </div>
+        <Suspense fallback={<div className="text-center text-gray-400">Loading...</div>}>
+          <ResetPasswordForm />
+        </Suspense>
+      </div>
+    </div>
+  )
+}
diff --git a/src/app/faq/page.tsx b/src/app/faq/page.tsx
new file mode 100644
index 0000000..ad2bf6d
--- /dev/null
+++ b/src/app/faq/page.tsx
@@ -0,0 +1,88 @@
+import { Plane } from 'lucide-react'
+import Link from 'next/link'
+import type { Metadata } from 'next'
+import { PAYMENT_CONFIG } from '@/app/lp/_config/types'
+
+export const metadata: Metadata = {
+  title: 'FAQ — Mexico Paradise Vacations',
+  description: 'Common questions about Mexico Paradise Vacations all-inclusive certificates: what is included, how to book, refunds, kids, destinations, payment.',
+}
+
+interface QA { q: string; a: React.ReactNode }
+
+const FAQ: QA[] = [
+  { q: 'What is a vacation certificate?',
+    a: <>A pre-paid voucher for a 5-day, 4-night all-inclusive stay at one of our partner beachfront resorts in Mexico. After purchase, you pick your travel dates and destination from available inventory; we send you the confirmation.</> },
+  { q: 'What does &ldquo;all-inclusive&rdquo; actually include?',
+    a: <>All meals at the resort restaurants, all drinks (alcoholic and non-alcoholic), pool and beach access, daily activities, evening entertainment, in-room amenities, and 24-hour room service. You do not run a tab — you just enjoy the resort.</> },
+  { q: 'Where can I go?',
+    a: <>Four destinations: <b>Cancun, Cabo San Lucas, Riviera Maya, and Puerto Vallarta</b>. You pick when you redeem the certificate.</> },
+  { q: 'How much does it cost?',
+    a: <>${PAYMENT_CONFIG.monthlyPrice}/month for {PAYMENT_CONFIG.totalMonths} months (total ${PAYMENT_CONFIG.totalPrice}), or ${PAYMENT_CONFIG.oneTimePrice} as a single payment. Both include the full trip for two adults plus kids under 12.</> },
+  { q: 'Who&apos;s covered? Can I bring my kids?',
+    a: <>The certificate covers <b>two adults plus children under 12, free</b>. Children 12 and older count as additional adults at the resort&apos;s prevailing rate.</> },
+  { q: 'When can I travel? Are dates restricted?',
+    a: <>You can book any available date within <b>18 months</b> of purchase. Like any resort, the most popular weeks (Christmas, spring break, July 4) book up fast and may carry a small high-season fee paid at the resort. We&apos;ll show available dates when you log into your portal.</> },
+  { q: 'Do I have to attend a timeshare presentation?',
+    a: <>Our standard certificate may include a brief resort presentation as part of the discounted pricing — this is normal for vacation-certificate offers and we&apos;re upfront about it. The presentation is optional to act on; many guests simply attend, decline, and continue enjoying their stay. <b>Details and any exemptions for your specific certificate are listed on your booking confirmation.</b></> },
+  { q: 'Is the resort I stay at a real five-star resort?',
+    a: <>Yes — the same beachfront properties listed on Booking, Expedia, and resort sites at full price. We&apos;ll show you the resort name and link to its full reviews when you select your dates.</> },
+  { q: 'Why is this so much cheaper than booking direct?',
+    a: <>Resorts make their margin on food, drinks, and excursions — not the room. Filling rooms in advance through partners like us is more profitable to them than leaving rooms empty, so they discount the room rate aggressively. <Link href="/about" className="text-orange-600 underline">More on how this works</Link>.</> },
+  { q: 'Is there a money-back guarantee?',
+    a: <>Yes — full refund within <b>30 days</b> of purchase, no questions asked.</> },
+  { q: 'How do I book my trip after I buy?',
+    a: <>After your first payment you get login credentials to the client portal. Inside, you pick your destination, dates, and resort from available inventory. We confirm by email and you arrive at the resort with your reservation in your name.</> },
+  { q: 'How do I pay?',
+    a: <>Any major credit or debit card (Visa, Mastercard, AmEx, Discover). Monthly plan: card is charged automatically each month for {PAYMENT_CONFIG.totalMonths} months. One-time plan: charged once at signup. Card information is encrypted and not stored on our servers.</> },
+  { q: 'Can I gift a certificate?',
+    a: <>Yes. Buy a certificate in your name, then transfer it to the recipient through your client portal. Travel dates can be picked by either of you.</> },
+  { q: 'What if I want to cancel the monthly payments after I&apos;ve traveled?',
+    a: <>The monthly plan is a {PAYMENT_CONFIG.totalMonths}-payment commitment for the certificate (total ${PAYMENT_CONFIG.totalPrice}). To avoid the remaining payments, pick the one-time ${PAYMENT_CONFIG.oneTimePrice} option at signup.</> },
+  { q: 'Where can I see real reviews?',
+    a: <><Link href="/reviews" className="text-orange-600 underline">Our reviews page</Link> has testimonials from real travelers. We also share TikTok and Instagram videos of travelers at our resorts on the landing pages.</> },
+  { q: 'Who do I contact with questions?',
+    a: <>Email <a href="mailto:support@hi2b.com" className="text-orange-600 underline">support@hi2b.com</a> or call <a href="tel:8886022424" className="text-orange-600 underline">888-602-2424</a> during US business hours.</> },
+]
+
+export default function FAQPage() {
+  return (
+    <div className="min-h-screen bg-white">
+      <header className="border-b">
+        <div className="max-w-4xl mx-auto px-4 py-4 flex items-center justify-between">
+          <Link href="/" className="flex items-center gap-2">
+            <div className="w-8 h-8 bg-gradient-to-br from-orange-500 to-red-500 rounded-lg flex items-center justify-center">
+              <Plane className="w-4 h-4 text-white" />
+            </div>
+            <span className="font-bold text-gray-900">Mexico Paradise Vacations</span>
+          </Link>
+          <Link href="/" className="text-sm text-orange-600 hover:text-orange-700">Back to Home</Link>
+        </div>
+      </header>
+
+      <main className="max-w-4xl mx-auto px-4 py-12">
+        <h1 className="text-3xl font-bold text-gray-900 mb-2">Frequently Asked Questions</h1>
+        <p className="text-gray-500 mb-8">Real answers to what people actually ask before booking.</p>
+
+        <div className="space-y-5">
+          {FAQ.map((item, i) => (
+            <details key={i} className="group border border-gray-200 rounded-lg overflow-hidden">
+              <summary className="cursor-pointer list-none flex items-center justify-between px-5 py-4 hover:bg-gray-50">
+                <span className="font-semibold text-gray-900 text-[15px] pr-4" dangerouslySetInnerHTML={{ __html: item.q }} />
+                <span className="text-orange-500 text-xl leading-none group-open:rotate-45 transition-transform" aria-hidden>+</span>
+              </summary>
+              <div className="px-5 pb-5 text-[15px] leading-relaxed text-gray-700">{item.a}</div>
+            </details>
+          ))}
+        </div>
+
+        <div className="mt-12 p-6 bg-orange-50 border border-orange-200 rounded-lg text-center">
+          <p className="text-sm text-gray-700 mb-3">Ready to claim your certificate?</p>
+          <Link href="/lp/golden-hour" className="inline-block bg-orange-600 hover:bg-orange-700 text-white font-bold px-6 py-3 rounded-lg">
+            Get Started — From ${PAYMENT_CONFIG.monthlyPrice}/mo
+          </Link>
+        </div>
+      </main>
+    </div>
+  )
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index e9179cf..bc61741 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
+import Script from "next/script";
 import "./globals.css";
 import { Toaster } from "@/components/ui/toaster";
 
@@ -14,24 +15,24 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Z.ai Code Scaffold - AI-Powered Development",
-  description: "Modern Next.js scaffold optimized for AI-powered development with Z.ai. Built with TypeScript, Tailwind CSS, and shadcn/ui.",
-  keywords: ["Z.ai", "Next.js", "TypeScript", "Tailwind CSS", "shadcn/ui", "AI development", "React"],
-  authors: [{ name: "Z.ai Team" }],
+  title: "Mexico Paradise Vacations — All-Inclusive Vacation Certificates",
+  description: "5 days, 4 nights all-inclusive Mexico vacation for just $29/month. Cancun, Cabo, Riviera Maya, Puerto Vallarta. 100% money-back guarantee.",
+  keywords: ["Mexico vacation", "all-inclusive", "Cancun", "Cabo", "vacation certificate", "budget travel"],
+  authors: [{ name: "Mexico Paradise Vacations" }],
   icons: {
-    icon: "https://z-cdn.chatglm.cn/z-ai/static/logo.svg",
+    icon: "/favicon.svg",
   },
   openGraph: {
-    title: "Z.ai Code Scaffold",
-    description: "AI-powered development with modern React stack",
-    url: "https://chat.z.ai",
-    siteName: "Z.ai",
+    title: "Mexico Paradise Vacations — $29/mo All-Inclusive",
+    description: "5 days, 4 nights all-inclusive Mexico vacation. Cancun, Cabo, Riviera Maya, Puerto Vallarta. Book after first payment.",
+    url: "https://hi2b.com",
+    siteName: "Mexico Paradise Vacations",
     type: "website",
   },
   twitter: {
     card: "summary_large_image",
-    title: "Z.ai Code Scaffold",
-    description: "AI-powered development with modern React stack",
+    title: "Mexico Paradise Vacations — $29/mo All-Inclusive",
+    description: "5 days, 4 nights all-inclusive Mexico vacation. 100% money-back guarantee.",
   },
 };
 
@@ -42,6 +43,20 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" suppressHydrationWarning>
+      <head>
+        <Script
+          src="https://www.googletagmanager.com/gtag/js?id=G-Q8TPF405Z1"
+          strategy="afterInteractive"
+        />
+        <Script id="google-analytics" strategy="afterInteractive">
+          {`
+            window.dataLayer = window.dataLayer || [];
+            function gtag(){dataLayer.push(arguments);}
+            gtag('js', new Date());
+            gtag('config', 'G-Q8TPF405Z1');
+          `}
+        </Script>
+      </head>
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased bg-background text-foreground`}
       >
diff --git a/src/app/lp/[slug]/page.tsx b/src/app/lp/[slug]/page.tsx
new file mode 100644
index 0000000..509d317
--- /dev/null
+++ b/src/app/lp/[slug]/page.tsx
@@ -0,0 +1,83 @@
+import dynamic from 'next/dynamic'
+import { notFound } from 'next/navigation'
+import { getLPConfigBySlug, LP_CONFIGS } from '../_config/pages'
+
+// Dynamic imports for each LP component
+const LP_COMPONENTS: Record<string, ReturnType<typeof dynamic>> = {
+  LP01GoldenHour: dynamic(() => import('@/components/lp/pages/LP01GoldenHour')),
+  LP02MidnightTropical: dynamic(() => import('@/components/lp/pages/LP02MidnightTropical')),
+  LP03PassportStamp: dynamic(() => import('@/components/lp/pages/LP03PassportStamp')),
+  LP04CrystalClear: dynamic(() => import('@/components/lp/pages/LP04CrystalClear')),
+  LP05Fiesta: dynamic(() => import('@/components/lp/pages/LP05Fiesta')),
+  LP06TheCloser: dynamic(() => import('@/components/lp/pages/LP06TheCloser')),
+  LP07ResortPreview: dynamic(() => import('@/components/lp/pages/LP07ResortPreview')),
+  LP08SplitDecision: dynamic(() => import('@/components/lp/pages/LP08SplitDecision')),
+  LP09Calculator: dynamic(() => import('@/components/lp/pages/LP09Calculator')),
+  LP10Countdown: dynamic(() => import('@/components/lp/pages/LP10Countdown')),
+  LP11TheGuide: dynamic(() => import('@/components/lp/pages/LP11TheGuide')),
+  LP12Dreamboard: dynamic(() => import('@/components/lp/pages/LP12Dreamboard')),
+  LP13QuizFunnel: dynamic(() => import('@/components/lp/pages/LP13QuizFunnel')),
+  LP14SocialWall: dynamic(() => import('@/components/lp/pages/LP14SocialWall')),
+  LP15SavingsJournal: dynamic(() => import('@/components/lp/pages/LP15SavingsJournal')),
+  LP16CouplesRetreat: dynamic(() => import('@/components/lp/pages/LP16CouplesRetreat')),
+  LP17Postcards: dynamic(() => import('@/components/lp/pages/LP17Postcards')),
+  LP18StressRelief: dynamic(() => import('@/components/lp/pages/LP18StressRelief')),
+  LP19FoodieParadise: dynamic(() => import('@/components/lp/pages/LP19FoodieParadise')),
+  LP20FamilyEscape: dynamic(() => import('@/components/lp/pages/LP20FamilyEscape')),
+  // V2 Pages (21-40)
+  LP21LastChance: dynamic(() => import('@/components/lp/pages/LP21LastChance')),
+  LP22TheProof: dynamic(() => import('@/components/lp/pages/LP22TheProof')),
+  LP23VIPAccess: dynamic(() => import('@/components/lp/pages/LP23VIPAccess')),
+  LP24OneTap: dynamic(() => import('@/components/lp/pages/LP24OneTap')),
+  LP25FOMOFeed: dynamic(() => import('@/components/lp/pages/LP25FOMOFeed')),
+  LP26PriceLock: dynamic(() => import('@/components/lp/pages/LP26PriceLock')),
+  LP27BeforeAfter: dynamic(() => import('@/components/lp/pages/LP27BeforeAfter')),
+  LP28RiskFree: dynamic(() => import('@/components/lp/pages/LP28RiskFree')),
+  LP29SpeedDeal: dynamic(() => import('@/components/lp/pages/LP29SpeedDeal')),
+  LP30Influencer: dynamic(() => import('@/components/lp/pages/LP30Influencer')),
+  LP31BucketList: dynamic(() => import('@/components/lp/pages/LP31BucketList')),
+  LP32DealBreaker: dynamic(() => import('@/components/lp/pages/LP32DealBreaker')),
+  LP33EscapePlan: dynamic(() => import('@/components/lp/pages/LP33EscapePlan')),
+  LP34TikTokVibes: dynamic(() => import('@/components/lp/pages/LP34TikTokVibes')),
+  LP35NoBrainer: dynamic(() => import('@/components/lp/pages/LP35NoBrainer')),
+  LP36WeekendEscape: dynamic(() => import('@/components/lp/pages/LP36WeekendEscape')),
+  LP37TrustFall: dynamic(() => import('@/components/lp/pages/LP37TrustFall')),
+  LP38Sunrise: dynamic(() => import('@/components/lp/pages/LP38Sunrise')),
+  LP39Adrenaline: dynamic(() => import('@/components/lp/pages/LP39Adrenaline')),
+  LP40GoldenTicket: dynamic(() => import('@/components/lp/pages/LP40GoldenTicket')),
+  // V3 Pages (41-42)
+  LP41SeatReserved: dynamic(() => import('@/components/lp/pages/LP41SeatReserved')),
+  LP42VIPPass: dynamic(() => import('@/components/lp/pages/LP42VIPPass')),
+  // V4 (43)
+  LP43RealTraveler: dynamic(() => import('@/components/lp/pages/LP43RealTraveler')),
+}
+
+export function generateStaticParams() {
+  const params: { slug: string }[] = []
+  for (const lp of LP_CONFIGS) {
+    params.push({ slug: lp.slug })
+    params.push({ slug: lp.id.toString() })
+  }
+  return params
+}
+
+export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }) {
+  const { slug } = await params
+  const config = getLPConfigBySlug(slug)
+  if (!config) return {}
+  return {
+    title: config.metadata.title,
+    description: config.metadata.description,
+  }
+}
+
+export default async function LPPage({ params }: { params: Promise<{ slug: string }> }) {
+  const { slug } = await params
+  const config = getLPConfigBySlug(slug)
+  if (!config) notFound()
+
+  const Component = LP_COMPONENTS[config.component]
+  if (!Component) notFound()
+
+  return <Component />
+}
diff --git a/src/app/lp/_config/fonts.ts b/src/app/lp/_config/fonts.ts
new file mode 100644
index 0000000..6ea0d8b
--- /dev/null
+++ b/src/app/lp/_config/fonts.ts
@@ -0,0 +1,132 @@
+import {
+  Playfair_Display,
+  Source_Sans_3,
+  Outfit,
+  Inter,
+  Libre_Baskerville,
+  Lato,
+  Caveat,
+  DM_Sans,
+  Archivo_Black,
+  Nunito,
+  Oswald,
+  Roboto,
+  Cormorant_Garamond,
+  Raleway,
+  Space_Grotesk,
+  Work_Sans,
+  IBM_Plex_Sans,
+  Bebas_Neue,
+  Barlow,
+  Merriweather,
+  Open_Sans,
+  Poppins,
+  Quicksand,
+  Manrope,
+  Bitter,
+  Lora,
+  Karla,
+  Josefin_Sans,
+  Nunito_Sans,
+  Dancing_Script,
+  Crimson_Pro,
+  Jost,
+  Fira_Sans,
+  Lexend,
+} from 'next/font/google'
+
+// LP1: Golden Hour
+export const playfairDisplay = Playfair_Display({ subsets: ['latin'], variable: '--font-playfair', display: 'swap' })
+export const sourceSans3 = Source_Sans_3({ subsets: ['latin'], variable: '--font-source-sans', display: 'swap' })
+
+// LP2: Midnight Tropical
+export const outfit = Outfit({ subsets: ['latin'], variable: '--font-outfit', display: 'swap' })
+export const inter = Inter({ subsets: ['latin'], variable: '--font-inter', display: 'swap' })
+
+// LP3: Passport Stamp
+export const libreBaskerville = Libre_Baskerville({ subsets: ['latin'], weight: ['400', '700'], variable: '--font-libre', display: 'swap' })
+export const lato = Lato({ subsets: ['latin'], weight: ['400', '700'], variable: '--font-lato', display: 'swap' })
+export const caveat = Caveat({ subsets: ['latin'], variable: '--font-caveat', display: 'swap' })
+
+// LP4: Crystal Clear
+export const dmSans = DM_Sans({ subsets: ['latin'], variable: '--font-dm-sans', display: 'swap' })
+
+// LP5: Fiesta
+export const archivoBlack = Archivo_Black({ subsets: ['latin'], weight: '400', variable: '--font-archivo', display: 'swap' })
+export const nunito = Nunito({ subsets: ['latin'], variable: '--font-nunito', display: 'swap' })
+
+// LP6: The Closer
+export const oswald = Oswald({ subsets: ['latin'], variable: '--font-oswald', display: 'swap' })
+export const roboto = Roboto({ subsets: ['latin'], variable: '--font-roboto', display: 'swap' })
+
+// LP7: Resort Preview
+export const cormorantGaramond = Cormorant_Garamond({ subsets: ['latin'], weight: ['400', '600', '700'], variable: '--font-cormorant', display: 'swap' })
+export const raleway = Raleway({ subsets: ['latin'], variable: '--font-raleway', display: 'swap' })
+
+// LP8: Split Decision
+export const spaceGrotesk = Space_Grotesk({ subsets: ['latin'], variable: '--font-space-grotesk', display: 'swap' })
+export const workSans = Work_Sans({ subsets: ['latin'], variable: '--font-work-sans', display: 'swap' })
+
+// LP9: Calculator
+export const ibmPlexSans = IBM_Plex_Sans({ subsets: ['latin'], weight: ['400', '600', '700'], variable: '--font-ibm-plex', display: 'swap' })
+
+// LP10: Countdown
+export const bebasNeue = Bebas_Neue({ subsets: ['latin'], weight: '400', variable: '--font-bebas', display: 'swap' })
+export const barlow = Barlow({ subsets: ['latin'], weight: ['400', '600', '700'], variable: '--font-barlow', display: 'swap' })
+
+// LP11: The Guide
+export const merriweather = Merriweather({ subsets: ['latin'], weight: ['400', '700'], variable: '--font-merriweather', display: 'swap' })
+export const openSans = Open_Sans({ subsets: ['latin'], variable: '--font-open-sans', display: 'swap' })
+
+// LP12: Dreamboard
+export const poppins = Poppins({ subsets: ['latin'], weight: ['400', '600', '700'], variable: '--font-poppins', display: 'swap' })
+export const quicksand = Quicksand({ subsets: ['latin'], variable: '--font-quicksand', display: 'swap' })
+
+// LP13: Quiz Funnel
+export const manrope = Manrope({ subsets: ['latin'], variable: '--font-manrope', display: 'swap' })
+
+// LP15: Savings Journal
+export const bitter = Bitter({ subsets: ['latin'], variable: '--font-bitter', display: 'swap' })
+
+// LP16: Couples Retreat
+export const lora = Lora({ subsets: ['latin'], variable: '--font-lora', display: 'swap' })
+export const karla = Karla({ subsets: ['latin'], variable: '--font-karla', display: 'swap' })
+
+// LP17: Postcards
+export const josefinSans = Josefin_Sans({ subsets: ['latin'], variable: '--font-josefin', display: 'swap' })
+export const nunitoSans = Nunito_Sans({ subsets: ['latin'], variable: '--font-nunito-sans', display: 'swap' })
+export const dancingScript = Dancing_Script({ subsets: ['latin'], variable: '--font-dancing', display: 'swap' })
+
+// LP18: Stress Relief
+export const crimsonPro = Crimson_Pro({ subsets: ['latin'], variable: '--font-crimson', display: 'swap' })
+export const jost = Jost({ subsets: ['latin'], variable: '--font-jost', display: 'swap' })
+
+// LP19: Foodie Paradise (reuses playfairDisplay)
+export const firaSans = Fira_Sans({ subsets: ['latin'], weight: ['400', '600', '700'], variable: '--font-fira', display: 'swap' })
+
+// LP20: Family Escape
+export const lexend = Lexend({ subsets: ['latin'], variable: '--font-lexend', display: 'swap' })
+
+// Font groupings by LP for the layout to load only needed fonts
+export const LP_FONTS: Record<string, string[]> = {
+  'golden-hour': ['--font-playfair', '--font-source-sans'],
+  'midnight-tropical': ['--font-outfit', '--font-inter'],
+  'passport-stamp': ['--font-libre', '--font-lato', '--font-caveat'],
+  'crystal-clear': ['--font-dm-sans'],
+  'fiesta': ['--font-archivo', '--font-nunito'],
+  'the-closer': ['--font-oswald', '--font-roboto'],
+  'resort-preview': ['--font-cormorant', '--font-raleway'],
+  'split-decision': ['--font-space-grotesk', '--font-work-sans'],
+  'calculator': ['--font-ibm-plex'],
+  'countdown': ['--font-bebas', '--font-barlow'],
+  'the-guide': ['--font-merriweather', '--font-open-sans'],
+  'dreamboard': ['--font-poppins', '--font-quicksand'],
+  'quiz-funnel': ['--font-manrope', '--font-inter'],
+  'social-wall': ['--font-dm-sans'],
+  'savings-journal': ['--font-bitter', '--font-source-sans'],
+  'couples-retreat': ['--font-lora', '--font-karla'],
+  'postcards': ['--font-josefin', '--font-nunito-sans', '--font-dancing'],
+  'stress-relief': ['--font-crimson', '--font-jost'],
+  'foodie-paradise': ['--font-playfair', '--font-fira'],
+  'family-escape': ['--font-lexend'],
+}
diff --git a/src/app/lp/_config/pages.ts b/src/app/lp/_config/pages.ts
new file mode 100644
index 0000000..0eb07b7
--- /dev/null
+++ b/src/app/lp/_config/pages.ts
@@ -0,0 +1,59 @@
+import type { LPConfig } from './types'
+
+export const LP_CONFIGS: LPConfig[] = [
+  { id: 1, slug: 'golden-hour', name: 'Golden Hour', component: 'LP01GoldenHour', ctaFocus: 'pay-now', metadata: { title: 'Golden Hour — Mexico Paradise Vacations', description: 'Escape to paradise. 5 days, 4 nights all-inclusive Mexico vacation for just $29/month.' } },
+  { id: 2, slug: 'midnight-tropical', name: 'Midnight Tropical', component: 'LP02MidnightTropical', ctaFocus: 'pay-now', metadata: { title: 'Exclusive Access — Mexico Paradise Vacations', description: 'Limited spots remaining. Claim your all-inclusive Mexico getaway.' } },
+  { id: 3, slug: 'passport-stamp', name: 'Passport Stamp', component: 'LP03PassportStamp', ctaFocus: 'pay-now', metadata: { title: 'Your Next Stamp — Mexico Paradise Vacations', description: 'Adventure awaits. All-inclusive Mexico vacation certificates from $29/month.' } },
+  { id: 4, slug: 'crystal-clear', name: 'Crystal Clear', component: 'LP04CrystalClear', ctaFocus: 'pay-now', metadata: { title: '5 Days. 4 Nights. $29/month. — Mexico Paradise', description: 'All-inclusive Mexico vacation. Simple pricing. Incredible value.' } },
+  { id: 5, slug: 'fiesta', name: 'Fiesta', component: 'LP05Fiesta', ctaFocus: 'pay-now', metadata: { title: 'Fiesta! — Mexico Paradise Vacations', description: 'Celebrate life with an all-inclusive Mexico vacation from $29/month.' } },
+  { id: 6, slug: 'the-closer', name: 'The Closer', component: 'LP06TheCloser', ctaFocus: 'pay-now', metadata: { title: '$3,000 Value for $1.30/day — Mexico Paradise', description: 'The math doesn\'t lie. All-inclusive Mexico vacation for less than your daily coffee.' } },
+  { id: 7, slug: 'resort-preview', name: 'Resort Preview', component: 'LP07ResortPreview', ctaFocus: 'pay-now', metadata: { title: 'Tour Your Paradise — Mexico Paradise Vacations', description: 'Preview luxury resorts in Cancun, Cabo, Riviera Maya & Puerto Vallarta.' } },
+  { id: 8, slug: 'split-decision', name: 'Split Decision', component: 'LP08SplitDecision', ctaFocus: 'pay-now', metadata: { title: 'Choose Your Paradise — Mexico Paradise Vacations', description: 'Cancun or Cabo? Pick your dream destination. All-inclusive from $29/month.' } },
+  { id: 9, slug: 'calculator', name: 'Calculator', component: 'LP09Calculator', ctaFocus: 'pay-now', metadata: { title: 'The Savings Calculator — Mexico Paradise', description: 'See exactly how much you save vs. booking direct. The math speaks for itself.' } },
+  { id: 10, slug: 'countdown', name: 'Countdown', component: 'LP10Countdown', ctaFocus: 'pay-now', metadata: { title: 'Time Is Running Out — Mexico Paradise Vacations', description: 'Limited time offer. Claim your all-inclusive Mexico vacation before it\'s gone.' } },
+  { id: 11, slug: 'the-guide', name: 'The Guide', component: 'LP11TheGuide', ctaFocus: 'ebook', metadata: { title: 'Budget Luxury Travel Guide — Mexico Paradise', description: 'Free guide: 5 secrets to luxury Mexico vacations on a budget.' } },
+  { id: 12, slug: 'dreamboard', name: 'Dreamboard', component: 'LP12Dreamboard', ctaFocus: 'ebook', metadata: { title: 'Build Your Dream Vacation — Mexico Paradise', description: 'Visualize your perfect Mexico getaway. Get the free planning guide.' } },
+  { id: 13, slug: 'quiz-funnel', name: 'Quiz Funnel', component: 'LP13QuizFunnel', ctaFocus: 'ebook', metadata: { title: 'Find Your Perfect Destination — Mexico Paradise', description: 'Take the quiz to find your ideal Mexico vacation destination.' } },
+  { id: 14, slug: 'social-wall', name: 'Social Wall', component: 'LP14SocialWall', ctaFocus: 'ebook', metadata: { title: 'Join 2,847 Happy Travelers — Mexico Paradise', description: 'See what real travelers are saying about Mexico Paradise Vacations.' } },
+  { id: 15, slug: 'savings-journal', name: 'Savings Journal', component: 'LP15SavingsJournal', ctaFocus: 'ebook', metadata: { title: 'Your Vacation Savings Plan — Mexico Paradise', description: '$1.30/day is less than your latte. Start saving for paradise.' } },
+  { id: 16, slug: 'couples-retreat', name: 'Couples Retreat', component: 'LP16CouplesRetreat', ctaFocus: 'ebook', metadata: { title: 'You Both Deserve This — Mexico Paradise', description: 'Plan the romantic Mexico getaway you\'ve been dreaming about.' } },
+  { id: 17, slug: 'postcards', name: 'Postcards', component: 'LP17Postcards', ctaFocus: 'ebook', metadata: { title: 'Wish You Were Here — Mexico Paradise Vacations', description: 'Send yourself a postcard from the future. Mexico awaits.' } },
+  { id: 18, slug: 'stress-relief', name: 'Stress Relief', component: 'LP18StressRelief', ctaFocus: 'ebook', metadata: { title: 'Your Mind Needs a Beach — Mexico Paradise', description: 'Escape the stress. All-inclusive Mexico vacation for your wellbeing.' } },
+  { id: 19, slug: 'foodie-paradise', name: 'Foodie Paradise', component: 'LP19FoodieParadise', ctaFocus: 'ebook', metadata: { title: 'Unlimited Everything — Mexico Paradise', description: 'All-inclusive dining at world-class Mexico resorts. From $29/month.' } },
+  { id: 20, slug: 'family-escape', name: 'Family Escape', component: 'LP20FamilyEscape', ctaFocus: 'ebook', metadata: { title: 'Give Them the Vacation They Deserve — Mexico Paradise', description: 'Family-friendly all-inclusive Mexico vacations from $29/month.' } },
+  // V2 Landing Pages (21-40) — improved with urgency psychology, TikTok embeds, stronger CTAs
+  { id: 21, slug: 'last-chance', name: 'Last Chance', component: 'LP21LastChance', ctaFocus: 'pay-now', metadata: { title: 'LAST CHANCE — Lock In $29/mo Before Midnight', description: 'This price disappears in minutes. All-inclusive Mexico vacation.' } },
+  { id: 22, slug: 'proof', name: 'The Proof', component: 'LP22TheProof', ctaFocus: 'pay-now', metadata: { title: '2,847 Happy Travelers Can\'t Be Wrong', description: 'Watch real TikTok videos from travelers at our resorts.' } },
+  { id: 23, slug: 'vip-access', name: 'VIP Access', component: 'LP23VIPAccess', ctaFocus: 'pay-now', metadata: { title: 'VIP ACCESS — Invitation Only Pricing', description: 'You\'ve been selected for exclusive resort pricing. Don\'t let this expire.' } },
+  { id: 24, slug: 'one-tap', name: 'One Tap', component: 'LP24OneTap', ctaFocus: 'pay-now', metadata: { title: 'One Tap Away From Paradise', description: 'The simplest way to book your dream Mexico vacation. $29/mo.' } },
+  { id: 25, slug: 'fomo-feed', name: 'FOMO Feed', component: 'LP25FOMOFeed', ctaFocus: 'pay-now', metadata: { title: 'Everyone\'s Going to Mexico — Why Aren\'t You?', description: 'See what you\'re missing. Real travelers, real paradise, real cheap.' } },
+  { id: 26, slug: 'price-lock', name: 'Price Lock', component: 'LP26PriceLock', ctaFocus: 'pay-now', metadata: { title: 'PRICE LOCK — $29/mo Guaranteed for 30 Minutes', description: 'After this timer expires, the price goes up. Lock it in now.' } },
+  { id: 27, slug: 'before-after', name: 'Before & After', component: 'LP27BeforeAfter', ctaFocus: 'pay-now', metadata: { title: 'Your Life Before & After Mexico', description: 'See the transformation. Desk to beach in one payment.' } },
+  { id: 28, slug: 'risk-free', name: 'Risk Free', component: 'LP28RiskFree', ctaFocus: 'pay-now', metadata: { title: 'Zero Risk, All Reward — 30-Day Money-Back', description: 'Try it risk-free. If you\'re not amazed, get every penny back.' } },
+  { id: 29, slug: 'speed-deal', name: 'Speed Deal', component: 'LP29SpeedDeal', ctaFocus: 'pay-now', metadata: { title: '⚡ FLASH DEAL — 30 Minutes Only', description: 'This deal self-destructs. All-inclusive Mexico from $1.30/day.' } },
+  { id: 30, slug: 'influencer', name: 'Influencer', component: 'LP30Influencer', ctaFocus: 'pay-now', metadata: { title: 'As Seen on TikTok — Mexico Paradise', description: 'The vacation deal going viral. Watch the videos, book the trip.' } },
+  { id: 31, slug: 'bucket-list', name: 'Bucket List', component: 'LP31BucketList', ctaFocus: 'ebook', metadata: { title: 'Check Mexico Off Your Bucket List', description: 'Life\'s too short for "someday." Get the free planning guide.' } },
+  { id: 32, slug: 'deal-breaker', name: 'Deal Breaker', component: 'LP32DealBreaker', ctaFocus: 'ebook', metadata: { title: 'The Deal That Breaks All Other Deals', description: 'Compare us to any travel site. We win every time.' } },
+  { id: 33, slug: 'escape-plan', name: 'Escape Plan', component: 'LP33EscapePlan', ctaFocus: 'ebook', metadata: { title: 'Your Escape Plan Starts Here', description: 'Download your free Mexico vacation planning guide.' } },
+  { id: 34, slug: 'tiktok-vibes', name: 'TikTok Vibes', component: 'LP34TikTokVibes', ctaFocus: 'ebook', metadata: { title: 'The TikTok-Famous Mexico Vacation', description: 'See why this deal is going viral. Get the free insider guide.' } },
+  { id: 35, slug: 'no-brainer', name: 'No Brainer', component: 'LP35NoBrainer', ctaFocus: 'ebook', metadata: { title: 'This Is a No-Brainer — Here\'s Why', description: '$1.30/day for luxury. We\'ll prove it. Get the free breakdown.' } },
+  { id: 36, slug: 'weekend-escape', name: 'Weekend Escape', component: 'LP36WeekendEscape', ctaFocus: 'ebook', metadata: { title: 'Turn Any Week Into Paradise', description: '5 days that will change how you think about vacations.' } },
+  { id: 37, slug: 'trust-fall', name: 'Trust Fall', component: 'LP37TrustFall', ctaFocus: 'ebook', metadata: { title: 'Don\'t Trust Us — Trust 2,847 Travelers', description: 'Real reviews, real videos, real people. See for yourself.' } },
+  { id: 38, slug: 'sunrise', name: 'Sunrise', component: 'LP38Sunrise', ctaFocus: 'ebook', metadata: { title: 'Wake Up to Paradise — Mexico Awaits', description: 'Imagine waking up to ocean views. Get the free travel guide.' } },
+  { id: 39, slug: 'adrenaline', name: 'Adrenaline', component: 'LP39Adrenaline', ctaFocus: 'ebook', metadata: { title: 'Adventure Awaits in Mexico', description: 'Ziplines, cenotes, ruins — plus all-inclusive luxury. From $29/mo.' } },
+  { id: 40, slug: 'golden-ticket', name: 'Golden Ticket', component: 'LP40GoldenTicket', ctaFocus: 'ebook', metadata: { title: 'You Found the Golden Ticket', description: 'This exclusive offer won\'t last. Claim your all-inclusive paradise.' } },
+  // V3 Landing Pages (41-42) — inspired by challenge-style order pages with transformation stories + tier pricing
+  { id: 41, slug: 'seat-reserved', name: 'Seat Reserved', component: 'LP41SeatReserved', ctaFocus: 'pay-now', metadata: { title: 'Your Seat Is Reserved — Mexico Paradise Vacations', description: 'Your paradise seat is confirmed. Lock in $29/mo before the countdown ends.' } },
+  { id: 42, slug: 'vip-pass', name: 'VIP Pass', component: 'LP42VIPPass', ctaFocus: 'pay-now', metadata: { title: 'VIP Platinum Access — Mexico Paradise Vacations', description: 'Private concierge, lifetime rebooking, guest upgrades. VIP cohort closes at midnight.' } },
+  // V4 — Real-traveler UGC video lead, 7-section blueprint
+  { id: 43, slug: 'real-traveler', name: 'Real Traveler', component: 'LP43RealTraveler', ctaFocus: 'pay-now', metadata: { title: 'She Paid $290 for a 5-Star Mexico Vacation — Watch', description: 'Real traveler · Day 4 in Mexico · Same resort her friends paid $2,800 for. See her 20-second story.' } },
+]
+
+export function getLPConfigBySlug(slug: string): LPConfig | undefined {
+  return LP_CONFIGS.find(lp => lp.slug === slug || lp.id.toString() === slug)
+}
+
+export function getRandomLPSlug(): string {
+  const idx = Math.floor(Math.random() * LP_CONFIGS.length)
+  return LP_CONFIGS[idx].slug
+}
diff --git a/src/app/lp/_config/types.ts b/src/app/lp/_config/types.ts
new file mode 100644
index 0000000..2bb8307
--- /dev/null
+++ b/src/app/lp/_config/types.ts
@@ -0,0 +1,155 @@
+export interface LPConfig {
+  id: number
+  slug: string
+  name: string
+  component: string // path for dynamic import
+  ctaFocus: 'pay-now' | 'ebook' | 'both'
+  metadata: {
+    title: string
+    description: string
+  }
+}
+
+export interface FormData {
+  email: string
+  fullName: string
+  phone: string
+}
+
+export interface EbookFormData {
+  email: string
+  name?: string
+  source_lp: string
+}
+
+export interface PaymentConfig {
+  monthlyPrice: number
+  totalMonths: number
+  totalPrice: number
+  oneTimePrice: number
+}
+
+export const PAYMENT_CONFIG: PaymentConfig = {
+  monthlyPrice: 29,
+  totalMonths: 10,
+  totalPrice: 290,
+  oneTimePrice: 249,
+}
+
+export interface TestimonialData {
+  quote: string
+  name: string
+  location: string
+  photo?: string
+}
+
+export const TESTIMONIALS: TestimonialData[] = [
+  {
+    quote: "This was the best vacation we've ever had! The all-inclusive resort in Cancun was amazing, and the price was unbeatable.",
+    name: "Sarah & Mike",
+    location: "Chicago, IL",
+    photo: "/images/cdn/photo-1522529599102-193c0d76b5b6.jpg",
+  },
+  {
+    quote: "I was skeptical at first, but the process was so simple and the vacation exceeded all our expectations. Cabo is breathtaking!",
+    name: "Jennifer & Tom",
+    location: "New York, NY",
+    photo: "/images/cdn/photo-1494790108377-be9c29b29330.jpg",
+  },
+  {
+    quote: "We paid less than $400 total for a vacation that would normally cost $3,000+. The resort was 5-star quality!",
+    name: "Maria G.",
+    location: "Houston, TX",
+    photo: "/images/cdn/photo-1438761681033-6461ffad8d80.jpg",
+  },
+  {
+    quote: "The Riviera Maya resort blew our minds. Crystal clear cenotes, amazing food, and world-class service.",
+    name: "David & Lisa",
+    location: "Denver, CO",
+    photo: "/images/cdn/photo-1472099645785-5658abf4ff4e.jpg",
+  },
+  {
+    quote: "Puerto Vallarta was paradise. We extended our stay an extra 3 nights because we didn't want to leave!",
+    name: "Rachel T.",
+    location: "Phoenix, AZ",
+    photo: "/images/cdn/photo-1544005313-94ddf0286df2.jpg",
+  },
+  {
+    quote: "Best money I ever spent. The sunset views from our room in Cabo were worth ten times what we paid.",
+    name: "James & Patricia",
+    location: "Miami, FL",
+    photo: "/images/cdn/photo-1500648767791-00dcc994a43e.jpg",
+  },
+]
+
+export interface DestinationData {
+  name: string
+  tagline: string
+  images: string[]
+}
+
+export const DESTINATIONS: DestinationData[] = [
+  {
+    name: "Cancun",
+    tagline: "Pristine beaches & vibrant nightlife",
+    images: [
+      "/images/cdn/photo-1510097467424-192d713fd8b2.jpg",
+      "/images/cdn/photo-1552074284-5e88ef1aef18.jpg",
+      "/images/cdn/photo-1510097467424-192d713fd8b2.jpg",
+    ],
+  },
+  {
+    name: "Cabo San Lucas",
+    tagline: "Dramatic cliffs & luxury resorts",
+    images: [
+      "/images/cdn/photo-1593655600619-a88c11180241.jpg",
+      "/images/cdn/photo-1580846629083-02669741360a.jpg",
+      "/images/cdn/photo-1527734055665-8def83921139.jpg",
+    ],
+  },
+  {
+    name: "Riviera Maya",
+    tagline: "Ancient ruins & turquoise waters",
+    images: [
+      "/images/cdn/photo-1581710862235-eb6e05d8783f.jpg",
+      "/images/cdn/photo-1581710862235-eb6e05d8783f.jpg",
+      "/images/cdn/photo-1581710862235-eb6e05d8783f.jpg",
+    ],
+  },
+  {
+    name: "Puerto Vallarta",
+    tagline: "Stunning sunsets & rich culture",
+    images: [
+      "/images/cdn/photo-1585793753011-397e6e4668d6.jpg",
+      "/images/cdn/photo-1575762568427-4b23bf947729.jpg",
+      "/images/cdn/photo-1585793753011-397e6e4668d6.jpg",
+    ],
+  },
+]
+
+export const FAQ_ITEMS = [
+  {
+    question: "When can I travel?",
+    answer: "You can book your vacation for any available dates within 18 months of your first payment. Some blackout dates may apply during peak holiday seasons.",
+  },
+  {
+    question: "What's included in 'all-inclusive'?",
+    answer: "Your all-inclusive package includes accommodation, all meals, drinks (including alcoholic beverages), resort amenities, and access to beaches and pools.",
+  },
+  {
+    question: "Can I bring my partner?",
+    answer: "Yes! Each certificate covers a family of four — 2 adults and 2 kids under 12. Additional guests can be added at a discounted rate.",
+  },
+  {
+    question: "Is there a catch?",
+    answer: "This special offer is part of our 'Hour to Paradise' program. To receive this deeply discounted vacation rate, we ask that you attend a 90-minute resort tour and presentation about Vacation ownership benefits. There is no obligation to purchase.",
+  },
+  {
+    question: "Can I get a refund?",
+    answer: "Yes, we offer a full refund within 30 days of purchase if you haven't booked your travel dates yet.",
+  },
+  {
+    question: "Can I extend my stay?",
+    answer: "Yes, you can extend your stay at the same resort for additional nights at a special discounted rate available only to certificate holders.",
+  },
+]
diff --git a/src/app/lp/layout.tsx b/src/app/lp/layout.tsx
new file mode 100644
index 0000000..918c8da
--- /dev/null
+++ b/src/app/lp/layout.tsx
@@ -0,0 +1,18 @@
+import type { Metadata } from 'next'
+import FloatingPhoneButton from '@/components/lp/shared/FloatingPhoneButton'
+import TopPhoneBar from '@/components/lp/shared/TopPhoneBar'
+
+export const metadata: Metadata = {
+  title: 'Mexico Paradise Vacations — All-Inclusive Vacation Certificates',
+  description: '5 days, 4 nights all-inclusive Mexico vacation for just $29/month. Cancun, Cabo, Riviera Maya, Puerto Vallarta.',
+}
+
+export default function LPLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="min-h-screen">
+      <TopPhoneBar />
+      {children}
+      <FloatingPhoneButton />
+    </div>
+  )
+}
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
new file mode 100644
index 0000000..8bc0127
--- /dev/null
+++ b/src/app/not-found.tsx
@@ -0,0 +1,8 @@
+import { redirect } from 'next/navigation'
+
+// Catch-all 404 handler — any unmatched route (typos, removed pages, old
+// links, /lp/<unknown-slug>, bot probes) redirects to the prime landing
+// page instead of showing the default 404, so no ad traffic is lost.
+export default function NotFound() {
+  redirect('/lp/golden-hour')
+}
diff --git a/src/app/page.random.tsx.bak b/src/app/page.random.tsx.bak
new file mode 100644
index 0000000..7015230
--- /dev/null
+++ b/src/app/page.random.tsx.bak
@@ -0,0 +1,27 @@
+// BACKUP of the original random-redirect homepage (replaced 2026-06-22).
+// Root cause of the 2,000-visits / 0-sales funnel break: client-side redirect to
+// a RANDOM LP destroyed message-match and bounced TikTok's in-app browser.
+// Restore this only if intentionally A/B testing random assignment again.
+'use client'
+
+import { useEffect } from 'react'
+import { useRouter } from 'next/navigation'
+import { LP_CONFIGS } from '@/app/lp/_config/pages'
+
+export default function Home() {
+  const router = useRouter()
+
+  useEffect(() => {
+    const randomLP = LP_CONFIGS[Math.floor(Math.random() * LP_CONFIGS.length)]
+    router.replace(`/lp/${randomLP.slug}`)
+  }, [router])
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-cyan-50">
+      <div className="animate-pulse text-center">
+        <div className="w-12 h-12 border-4 border-blue-500 border-t-transparent rounded-full animate-spin mx-auto mb-4" />
+        <p className="text-gray-500">Loading your paradise...</p>
+      </div>
+    </div>
+  )
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 91a3f48..d93a1e5 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,441 +1,23 @@
-'use client'
-
-import { useState } from 'react'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
-import { Alert, AlertDescription } from '@/components/ui/alert'
-import { Loader2, CheckCircle, LogIn, Plane, Calendar, Hotel, Coffee, Utensils, Umbrella, HelpCircle } from 'lucide-react'
-import { toast } from 'sonner'
-import { LoginModal } from '@/components/login-modal'
+// hi2b.com homepage — server-rendered, message-matched.
+// Replaces the previous client-side random-redirect (backup in page.random.tsx.bak),
+// which broke message-match and bounced TikTok's in-app browser → 2,000 visits / 0 sales.
+import type { Metadata } from 'next'
+import LP00HonestHour from '@/components/lp/pages/LP00HonestHour'
+
+export const metadata: Metadata = {
+  title: 'Mexico in 5 Days for $249 — The Only Catch Is One Honest Hour',
+  description:
+    'All-inclusive Mexico vacation: 5 days, 4 nights, 2 adults + 2 kids (kids free). $249 one-time. The only catch is one ~60-minute resort presentation — no obligation. Travel anytime within 18 months.',
+  openGraph: {
+    title: 'Mexico in 5 Days for $249 — One Honest Hour',
+    description:
+      '5 days / 4 nights all-inclusive Mexico, kids free, $249 one-time. One honest ~60-min presentation, no obligation. Travel within 18 months.',
+    url: 'https://hi2b.com',
+    siteName: 'Mexico Paradise Vacations',
+    type: 'website',
+  },
+}
 
 export default function Home() {
-  const [email, setEmail] = useState('')
-  const [fullName, setFullName] = useState('')
-  const [phone, setPhone] = useState('')
-  const [isLoading, setIsLoading] = useState(false)
-  const [isSuccess, setIsSuccess] = useState(false)
-  const [isLoginModalOpen, setIsLoginModalOpen] = useState(false)
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault()
-    
-    if (!email || !fullName || !phone) {
-      toast.error('Please fill in all fields')
-      return
-    }
-
-    setIsLoading(true)
-
-    try {
-      // Create signup record
-      const signupResponse = await fetch('/api/signup', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          email,
-          full_name: fullName,
-          phone,
-          amount: 702, // Total value: $39/month x 18 months
-          monthly_payment: 39,
-          payment_plan_months: 18
-        }),
-      })
-
-      const signupData = await signupResponse.json()
-
-      if (!signupResponse.ok) {
-        throw new Error(signupData.error || 'Failed to create signup')
-      }
-
-      // Create payment for first month
-      const paymentResponse = await fetch('/api/payment/create', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          email,
-          fullName,
-          amount: 39, // First month payment
-          signupId: signupData.id,
-          isSubscription: true,
-        }),
-      })
-
-      const paymentData = await paymentResponse.json()
-
-      if (!paymentResponse.ok) {
-        throw new Error(paymentData.error || 'Failed to create payment')
-      }
-
-      // Redirect to payment checkout
-      if (paymentData.checkoutUrl) {
-        window.location.href = paymentData.checkoutUrl
-      } else {
-        throw new Error('No checkout URL provided')
-      }
-
-    } catch (error) {
-      console.error('Error:', error)
-      toast.error(error instanceof Error ? error.message : 'An error occurred')
-      setIsLoading(false)
-    }
-  }
-
-  if (isSuccess) {
-    return (
-      <div className="min-h-screen bg-gradient-to-br from-blue-50 to-cyan-50 flex items-center justify-center p-4">
-        <Card className="w-full max-w-md text-center">
-          <CardContent className="pt-6">
-            <CheckCircle className="w-16 h-16 text-green-500 mx-auto mb-4" />
-            <h2 className="text-2xl font-bold text-slate-900 mb-2">Welcome to Paradise!</h2>
-            <p className="text-slate-600">Check your email for your vacation certificate details.</p>
-          </CardContent>
-        </Card>
-      </div>
-    )
-  }
-
-  return (
-    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-cyan-50">
-      {/* Header */}
-      <header className="border-b border-slate-200 bg-white/50 backdrop-blur-sm">
-        <div className="container mx-auto px-4 py-4">
-          <div className="flex items-center justify-between">
-            <div className="flex items-center space-x-2">
-              <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
-                <Plane className="w-5 h-5 text-white" />
-              </div>
-              <span className="font-semibold text-slate-900">Mexico Paradise Vacations</span>
-            </div>
-            <nav className="hidden md:flex space-x-6">
-              <a href="#destinations" className="text-slate-600 hover:text-slate-900 transition-colors">Destinations</a>
-              <a href="#pricing" className="text-slate-600 hover:text-slate-900 transition-colors">Pricing</a>
-              <a href="#faq" className="text-slate-600 hover:text-slate-900 transition-colors">FAQ</a>
-              <Button 
-                variant="outline" 
-                size="sm"
-                onClick={() => setIsLoginModalOpen(true)}
-              >
-                <LogIn className="w-4 h-4 mr-2" />
-                Login
-              </Button>
-            </nav>
-          </div>
-        </div>
-      </header>
-
-      {/* Hero Section */}
-      <main className="container mx-auto px-4 py-16">
-        {/* Hero Banner */}
-        <div className="relative rounded-2xl overflow-hidden mb-12 bg-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)) bg-cover bg-center" 
-             style={{backgroundImage: 'url(https://sfile.chatglm.cn/images-ppt/84a95dbb3dc6.jpg)'}}>
-          <div className="px-8 py-20 text-center text-white">
-            <h1 className="text-4xl lg:text-6xl font-bold mb-6 leading-tight">
-              Escape to Paradise: 5 Days, 4 Nights All-Inclusive Mexico Vacation for Just $39/Month
-            </h1>
-            <p className="text-xl mb-8 max-w-3xl mx-auto">
-              Luxury resorts in Cancun, Cabo, Rivera Maya, or Puerto Vallarta await you and your partner
-            </p>
-            <Button 
-              size="lg" 
-              className="bg-gradient-to-r from-red-500 to-orange-500 hover:from-red-600 hover:to-orange-600 text-white px-8 py-4 text-lg font-semibold"
-              onClick={() => document.getElementById('signup-form')?.scrollIntoView({ behavior: 'smooth' })}
-            >
-              Claim Your Vacation Certificate
-            </Button>
-          </div>
-        </div>
-
-        <div className="grid lg:grid-cols-2 gap-12 items-start">
-          {/* Left Content */}
-          <div className="space-y-8">
-            {/* What's Included */}
-            <Card className="shadow-lg">
-              <CardHeader>
-                <CardTitle className="text-2xl text-blue-700">Your All-Inclusive Paradise Package Includes:</CardTitle>
-              </CardHeader>
-              <CardContent className="space-y-4">
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                  <div className="flex items-center space-x-3">
-                    <Hotel className="w-5 h-5 text-teal-600" />
-                    <span className="text-slate-700">5 Days & 4 Nights Accommodation</span>
-                  </div>
-                  <div className="flex items-center space-x-3">
-                    <Utensils className="w-5 h-5 text-teal-600" />
-                    <span className="text-slate-700">All Meals & Drinks</span>
-                  </div>
-                  <div className="flex items-center space-x-3">
-                    <Coffee className="w-5 h-5 text-teal-600" />
-                    <span className="text-slate-700">Premium Resort Amenities</span>
-                  </div>
-                  <div className="flex items-center space-x-3">
-                    <Umbrella className="w-5 h-5 text-teal-600" />
-                    <span className="text-slate-700">Access to Beaches & Pools</span>
-                  </div>
-                </div>
-                <div className="flex items-center justify-center space-x-3 pt-2">
-                  <Calendar className="w-5 h-5 text-teal-600" />
-                  <span className="text-slate-700 font-medium">Flexible Booking Dates</span>
-                </div>
-                <div className="bg-orange-50 p-4 rounded-lg text-sm text-slate-600">
-                  <p className="font-medium mb-1">(18-month payment plan at $39/month = $702 total value)</p>
-                  <p className="text-xs italic">
-                    *This special offer is part of our "Hour to Paradise" program. The discounted rate is available because the resort would like to give you a quick tour of facilities and explain benefits of Vacation ownership (90-minute presentation required).
-                  </p>
-                </div>
-              </CardContent>
-            </Card>
-
-            {/* Destinations */}
-            <Card className="shadow-lg">
-              <CardHeader>
-                <CardTitle className="text-2xl text-blue-700">Choose Your Perfect Mexican Paradise</CardTitle>
-              </CardHeader>
-              <CardContent>
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                  <div className="relative rounded-lg overflow-hidden h-40 group">
-                    <img 
-                      src="https://sfile.chatglm.cn/images-ppt/4170fa72a420.jpg" 
-                      alt="Cancun" 
-                      className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
-                    />
-                    <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-3">
-                      <p className="text-white font-medium text-sm">Cancun: Pristine beaches & vibrant nightlife</p>
-                    </div>
-                  </div>
-                  <div className="relative rounded-lg overflow-hidden h-40 group">
-                    <img 
-                      src="https://sfile.chatglm.cn/images-ppt/fb4e3d107002.jpg" 
-                      alt="Cabo San Lucas" 
-                      className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
-                    />
-                    <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-3">
-                      <p className="text-white font-medium text-sm">Cabo: Dramatic cliffs & luxury resorts</p>
-                    </div>
-                  </div>
-                  <div className="relative rounded-lg overflow-hidden h-40 group">
-                    <img 
-                      src="https://sfile.chatglm.cn/images-ppt/34b755665443.jpg" 
-                      alt="Rivera Maya" 
-                      className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
-                    />
-                    <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-3">
-                      <p className="text-white font-medium text-sm">Rivera Maya: Ancient ruins & turquoise waters</p>
-                    </div>
-                  </div>
-                  <div className="relative rounded-lg overflow-hidden h-40 group">
-                    <img 
-                      src="https://sfile.chatglm.cn/images-ppt/b919ab0ea769.jpg" 
-                      alt="Puerto Vallarta" 
-                      className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
-                    />
-                    <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-3">
-                      <p className="text-white font-medium text-sm">Puerto Vallarta: Stunning sunsets & culture</p>
-                    </div>
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
-
-            {/* How It Works */}
-            <Card className="shadow-lg">
-              <CardHeader>
-                <CardTitle className="text-2xl text-blue-700">How It Works</CardTitle>
-              </CardHeader>
-              <CardContent>
-                <div className="flex justify-between items-center">
-                  <div className="flex flex-col items-center text-center w-1/3">
-                    <div className="w-12 h-12 bg-teal-600 text-white rounded-full flex items-center justify-center text-xl font-bold mb-3">1</div>
-                    <p className="text-sm text-slate-700">Sign Up & Pay First $39</p>
-                  </div>
-                  <div className="flex flex-col items-center text-center w-1/3">
-                    <div className="w-12 h-12 bg-teal-600 text-white rounded-full flex items-center justify-center text-xl font-bold mb-3">2</div>
-                    <p className="text-sm text-slate-700">Receive Your Certificate</p>
-                  </div>
-                  <div className="flex flex-col items-center text-center w-1/3">
-                    <div className="w-12 h-12 bg-teal-600 text-white rounded-full flex items-center justify-center text-xl font-bold mb-3">3</div>
-                    <p className="text-sm text-slate-700">Book Your Dream Vacation</p>
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
-          </div>
-
-          {/* Right Content - Signup Form */}
-          <div className="lg:pl-8">
-            <Card className="shadow-xl border-slate-200" id="signup-form">
-              <CardHeader className="text-center pb-6">
-                <div className="inline-block bg-orange-100 text-orange-700 px-4 py-2 rounded-full text-sm font-semibold mb-4">
-                  Limited Time Offer
-                </div>
-                <CardTitle className="text-2xl font-bold text-slate-900">
-                  Ready for Your Mexican Paradise?
-                </CardTitle>
-                <CardDescription className="text-slate-600">
-                  Get your all-inclusive vacation certificate today
-                </CardDescription>
-              </CardHeader>
-              <CardContent>
-                <form onSubmit={handleSubmit} className="space-y-4">
-                  <div className="space-y-2">
-                    <Label htmlFor="fullName" className="text-sm font-medium text-slate-700">
-                      Full Name
-                    </Label>
-                    <Input
-                      id="fullName"
-                      type="text"
-                      placeholder="Enter your full name"
-                      value={fullName}
-                      onChange={(e) => setFullName(e.target.value)}
-                      className="h-11"
-                      required
-                    />
-                  </div>
-                  
-                  <div className="space-y-2">
-                    <Label htmlFor="email" className="text-sm font-medium text-slate-700">
-                      Email Address
-                    </Label>
-                    <Input
-                      id="email"
-                      type="email"
-                      placeholder="Enter your email"
-                      value={email}
-                      onChange={(e) => setEmail(e.target.value)}
-                      className="h-11"
-                      required
-                    />
-                  </div>
-
-                  <div className="space-y-2">
-                    <Label htmlFor="phone" className="text-sm font-medium text-slate-700">
-                      Phone Number
-                    </Label>
-                    <Input
-                      id="phone"
-                      type="tel"
-                      placeholder="Enter your phone number"
-                      value={phone}
-                      onChange={(e) => setPhone(e.target.value)}
-                      className="h-11"
-                      required
-                    />
-                  </div>
-
-                  <div className="bg-blue-50 rounded-lg p-4 text-center">
-                    <div className="text-3xl font-bold text-red-500 mb-2">$39/month</div>
-                    <div className="text-lg text-slate-700 mb-2">for 18 months</div>
-                    <div className="flex items-center justify-center space-x-3 mb-2">
-                      <span className="text-slate-500 line-through">Regular price: $1,500+</span>
-                      <span className="bg-green-100 text-green-700 px-3 py-1 rounded-full text-sm font-semibold">Save over $800!</span>
-                    </div>
-                    <p className="text-sm text-slate-600">Book immediately after your first payment</p>
-                  </div>
-
-                  <Button 
-                    type="submit" 
-                    className="w-full h-11 bg-gradient-to-r from-red-500 to-orange-500 hover:from-red-600 hover:to-orange-600 text-white font-medium"
-                    disabled={isLoading}
-                  >
-                    {isLoading ? (
-                      <>
-                        <Loader2 className="w-4 h-4 mr-2 animate-spin" />
-                        Processing...
-                      </>
-                    ) : (
-                      'Get My Vacation Certificate Now!'
-                    )}
-                  </Button>
-
-                  <p className="text-xs text-slate-500 text-center">
-                    By signing up, you agree to our payment plan terms and conditions
-                    <br />
-                    Secure payment powered by Maverick Payments.
-                  </p>
-                </form>
-              </CardContent>
-            </Card>
-
-            {/* Testimonials */}
-            <Card className="shadow-lg mt-6">
-              <CardHeader>
-                <CardTitle className="text-xl text-blue-700">Happy Travelers Love Our Vacation Certificates</CardTitle>
-              </CardHeader>
-              <CardContent className="space-y-4">
-                <div className="bg-slate-50 p-4 rounded-lg relative">
-                  <div className="text-2xl text-blue-200 absolute top-2 left-2">"</div>
-                  <p className="text-slate-700 italic mb-3 ml-6">
-                    This was the best vacation we've ever had! The all-inclusive resort in Cancun was amazing, and the price was unbeatable. We're already planning our next trip!
-                  </p>
-                  <p className="text-right text-blue-700 font-medium">- Sarah & Mike, Chicago</p>
-                </div>
-                <div className="bg-slate-50 p-4 rounded-lg relative">
-                  <div className="text-2xl text-blue-200 absolute top-2 left-2">"</div>
-                  <p className="text-slate-700 italic mb-3 ml-6">
-                    I was skeptical at first, but the process was so simple and the vacation exceeded all our expectations. Cabo San Lucas is absolutely breathtaking!
-                  </p>
-                  <p className="text-right text-blue-700 font-medium">- Jennifer & Tom, New York</p>
-                </div>
-              </CardContent>
-            </Card>
-          </div>
-        </div>
-
-        {/* FAQ Section */}
-        <Card className="shadow-lg mt-12" id="faq">
-          <CardHeader>
-            <CardTitle className="text-2xl text-blue-700 text-center">Frequently Asked Questions</CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-6">
-            <div className="space-y-3">
-              <div className="flex items-center space-x-2">
-                <HelpCircle className="w-5 h-5 text-blue-700" />
-                <h4 className="font-semibold text-blue-700">When can I travel?</h4>
-              </div>
-              <p className="text-slate-600 ml-7">
-                You can book your vacation for any available dates within 18 months of your first payment. Some blackout dates may apply during peak holiday seasons.
-              </p>
-            </div>
-            <div className="space-y-3">
-              <div className="flex items-center space-x-2">
-                <HelpCircle className="w-5 h-5 text-blue-700" />
-                <h4 className="font-semibold text-blue-700">What's included in 'all-inclusive'?</h4>
-              </div>
-              <p className="text-slate-600 ml-7">
-                Your all-inclusive package includes accommodation, all meals, drinks (including alcoholic beverages), resort amenities, and access to beaches and pools.
-              </p>
-            </div>
-            <div className="space-y-3">
-              <div className="flex items-center space-x-2">
-                <HelpCircle className="w-5 h-5 text-blue-700" />
-                <h4 className="font-semibold text-blue-700">Can I extend my stay?</h4>
-              </div>
-              <p className="text-slate-600 ml-7">
-                Yes, you can extend your stay at the same resort for additional nights at a special discounted rate available only to certificate holders.
-              </p>
-            </div>
-            <div className="space-y-3">
-              <div className="flex items-center space-x-2">
-                <HelpCircle className="w-5 h-5 text-blue-700" />
-                <h4 className="font-semibold text-blue-700">What is the "Hour to Paradise" requirement?</h4>
-              </div>
-              <p className="text-slate-600 ml-7">
-                This special offer is part of our "Hour to Paradise" program. To receive this deeply discounted vacation rate, we ask that you attend a 90-minute resort tour and presentation about Vacation ownership benefits. There is no obligation to purchase.
-              </p>
-            </div>
-          </CardContent>
-        </Card>
-      </main>
-      
-      <LoginModal 
-        isOpen={isLoginModalOpen} 
-        onClose={() => setIsLoginModalOpen(false)} 
-      />
-    </div>
-  )
-}
\ No newline at end of file
+  return <LP00HonestHour />
+}
diff --git a/src/app/pay/BenefitsSection.tsx b/src/app/pay/BenefitsSection.tsx
new file mode 100644
index 0000000..e2e7415
--- /dev/null
+++ b/src/app/pay/BenefitsSection.tsx
@@ -0,0 +1,150 @@
+'use client'
+
+import { Sun, Heart, Brain, Waves, Moon, Smile, Eye, Users, Sparkles, Sandwich, Wind, Coffee } from 'lucide-react'
+
+interface Bullet {
+  icon: React.ReactNode
+  title: string
+  body: string
+}
+
+const WHAT_YOU_GET: Bullet[] = [
+  { icon: <Sparkles className="w-5 h-5" />, title: '5 days / 4 nights', body: 'in a luxury all-inclusive resort' },
+  { icon: <Users className="w-5 h-5" />, title: 'Family of 4', body: '2 adults + 2 kids under 12 — all covered' },
+  { icon: <Coffee className="w-5 h-5" />, title: 'Unlimited everything', body: 'food, drinks, premium liquor, swim-up bar' },
+  { icon: <Waves className="w-5 h-5" />, title: '4 destinations', body: 'Cancun, Cabo, Riviera Maya, Puerto Vallarta' },
+]
+
+const FOR_YOUR_BODY: Bullet[] = [
+  { icon: <Sun className="w-5 h-5" />, title: 'Vitamin D + circadian reset', body: '5 days of real sunshine resets your sleep and mood chemistry' },
+  { icon: <Waves className="w-5 h-5" />, title: 'Ocean swims that don\'t feel like exercise', body: 'salt water, full-body, zero gym energy required' },
+  { icon: <Sandwich className="w-5 h-5" />, title: 'Fresh food, no inflammation', body: 'grilled fish, fresh fruit, real meals — inflammation drops, energy climbs' },
+  { icon: <Moon className="w-5 h-5" />, title: 'Sleep without alarms', body: 'no Sunday-night dread. No 6am ping. Just sunrise.' },
+]
+
+const FOR_YOUR_MIND: Bullet[] = [
+  { icon: <Wind className="w-5 h-5" />, title: 'Off the grid', body: 'work email locked in a vault. You\'ll come back sharper than 6 months of "productivity hacks."' },
+  { icon: <Eye className="w-5 h-5" />, title: 'Perspective', body: 'looking at the horizon for 5 days makes problems look small. Because they are.' },
+  { icon: <Heart className="w-5 h-5" />, title: 'Reconnect', body: 'no phones at dinner. The person across from you remembers what your voice sounds like.' },
+  { icon: <Smile className="w-5 h-5" />, title: 'Memories on tap', body: 'the kind you\'ll replay on your worst Tuesdays for the rest of your life' },
+]
+
+export default function BenefitsSection() {
+  return (
+    <section className="bg-white">
+      <div className="max-w-7xl mx-auto px-4 py-16">
+        <div className="text-center mb-10 max-w-3xl mx-auto">
+          <p className="text-orange-600 font-bold text-xs uppercase tracking-[0.2em] mb-3">What You Actually Get</p>
+          <h2 className="text-3xl sm:text-4xl font-black text-slate-900 mb-3 leading-tight">
+            This isn&apos;t just a vacation.<br/>
+            <span className="text-orange-600">It&apos;s a reset for your body and your mind.</span>
+          </h2>
+          <p className="text-slate-600 text-base sm:text-lg leading-relaxed">
+            Most people don&apos;t need another productivity app. They need 5 uninterrupted days where their phone doesn&apos;t buzz, the food is fresh, and they remember what their own laugh sounds like.
+          </p>
+        </div>
+
+        <div className="grid lg:grid-cols-3 gap-5">
+          <BenefitCard
+            tone="warm"
+            tag="The deliverable"
+            title="What you get"
+            subtitle="Tangible, no fine print"
+            icon={<Sparkles className="w-6 h-6" />}
+            items={WHAT_YOU_GET}
+          />
+          <BenefitCard
+            tone="emerald"
+            tag="The physical reset"
+            title="What it does for your body"
+            subtitle="By day 3, you feel it"
+            icon={<Heart className="w-6 h-6" />}
+            items={FOR_YOUR_BODY}
+          />
+          <BenefitCard
+            tone="indigo"
+            tag="The mental reset"
+            title="What it does for your mind"
+            subtitle="The version of you that comes back"
+            icon={<Brain className="w-6 h-6" />}
+            items={FOR_YOUR_MIND}
+          />
+        </div>
+
+        <div className="mt-12 max-w-3xl mx-auto bg-slate-900 text-white rounded-2xl p-8 sm:p-10 text-center relative overflow-hidden">
+          <div className="absolute inset-0 bg-gradient-to-br from-orange-600/20 via-transparent to-pink-600/10 pointer-events-none" />
+          <p className="relative text-xs font-bold uppercase tracking-[0.2em] text-orange-400 mb-3">The honest truth</p>
+          <p className="relative text-xl sm:text-2xl font-bold leading-snug mb-4">
+            You&apos;re not really buying a vacation.<br/>
+            You&apos;re buying the version of yourself that comes back from it.
+          </p>
+          <p className="relative text-slate-300 text-sm sm:text-base leading-relaxed">
+            Calmer. Lighter. With photos of people you love laughing on a beach.<br/>
+            For less than what most people spend on Saturday-night dinners in a month.
+          </p>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+interface CardProps {
+  tone: 'warm' | 'emerald' | 'indigo'
+  tag: string
+  title: string
+  subtitle: string
+  icon: React.ReactNode
+  items: Bullet[]
+}
+
+const TONES = {
+  warm: {
+    border: 'border-orange-200',
+    head: 'bg-gradient-to-br from-orange-500 to-amber-500 text-white',
+    iconBg: 'bg-white/20',
+    bullet: 'text-orange-600 bg-orange-50',
+  },
+  emerald: {
+    border: 'border-emerald-200',
+    head: 'bg-gradient-to-br from-emerald-600 to-teal-600 text-white',
+    iconBg: 'bg-white/20',
+    bullet: 'text-emerald-700 bg-emerald-50',
+  },
+  indigo: {
+    border: 'border-indigo-200',
+    head: 'bg-gradient-to-br from-indigo-600 to-violet-600 text-white',
+    iconBg: 'bg-white/20',
+    bullet: 'text-indigo-700 bg-indigo-50',
+  },
+}
+
+function BenefitCard({ tone, tag, title, subtitle, icon, items }: CardProps) {
+  const t = TONES[tone]
+  return (
+    <div className={`rounded-2xl border-2 ${t.border} bg-white overflow-hidden shadow-sm hover:shadow-lg transition-shadow`}>
+      <div className={`${t.head} p-6`}>
+        <div className="flex items-center gap-3 mb-2">
+          <div className={`w-11 h-11 rounded-full ${t.iconBg} backdrop-blur-sm flex items-center justify-center`}>
+            {icon}
+          </div>
+          <span className="text-[10px] font-black uppercase tracking-[0.15em] opacity-80">{tag}</span>
+        </div>
+        <h3 className="text-2xl font-black mb-1">{title}</h3>
+        <p className="text-sm opacity-90">{subtitle}</p>
+      </div>
+      <ul className="p-5 space-y-4">
+        {items.map((b, i) => (
+          <li key={i} className="flex gap-3">
+            <div className={`shrink-0 w-9 h-9 rounded-lg ${t.bullet} flex items-center justify-center`}>
+              {b.icon}
+            </div>
+            <div>
+              <p className="font-bold text-slate-900 text-sm leading-tight mb-0.5">{b.title}</p>
+              <p className="text-slate-600 text-sm leading-snug">{b.body}</p>
+            </div>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
diff --git a/src/app/pay/PayPageClient.tsx b/src/app/pay/PayPageClient.tsx
new file mode 100644
index 0000000..205bcc8
--- /dev/null
+++ b/src/app/pay/PayPageClient.tsx
@@ -0,0 +1,557 @@
+'use client'
+
+import { useEffect, useMemo, useState } from 'react'
+import { useSearchParams } from 'next/navigation'
+import Image from 'next/image'
+import {
+  Loader2, Lock, ShieldCheck, CreditCard, CheckCircle, Star,
+  Plane, Phone, Mail, Check, Headset, Sparkles, X, Undo2, ArrowRight,
+} from 'lucide-react'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Button } from '@/components/ui/button'
+import { PAYMENT_CONFIG, TESTIMONIALS } from '@/app/lp/_config/types'
+import { useEarlyLead } from '@/hooks/useEarlyLead'
+import { useTrackingParams } from '@/hooks/useTrackingParams'
+import ShowcaseCarousel from './ShowcaseCarousel'
+import BenefitsSection from './BenefitsSection'
+
+const RECENT_BUYERS = [
+  { name: 'Sarah from Chicago, IL', when: '2 minutes ago' },
+  { name: 'Michael from Austin, TX', when: '7 minutes ago' },
+  { name: 'Jennifer from Tampa, FL', when: '12 minutes ago' },
+  { name: 'David from Denver, CO', when: '18 minutes ago' },
+  { name: 'Maria from Phoenix, AZ', when: '24 minutes ago' },
+  { name: 'James from Miami, FL', when: '31 minutes ago' },
+  { name: 'Rachel from Seattle, WA', when: '38 minutes ago' },
+]
+
+const INCLUDED = [
+  '5 Days / 4 Nights',
+  'All-Inclusive Resort',
+  'Unlimited Meals & Drinks',
+  'Premium Accommodations',
+  '4 Destination Choices',
+  'Flexible Travel Dates',
+]
+
+const SUPPORT_PHONE = '888-602-2424'
+
+function formatCardNumber(value: string) {
+  const digits = value.replace(/\D/g, '').slice(0, 16)
+  return digits.replace(/(\d{4})(?=\d)/g, '$1 ')
+}
+function formatExp(value: string) {
+  const digits = value.replace(/\D/g, '').slice(0, 4)
+  if (digits.length >= 3) return `${digits.slice(0, 2)}/${digits.slice(2)}`
+  return digits
+}
+
+export default function PayPageClient() {
+  const search = useSearchParams()
+  const repName = search.get('rep') || ''
+  const initialPlan = (search.get('plan') === 'one-time' ? 'one-time' : 'monthly') as 'monthly' | 'one-time'
+  const tracking = useTrackingParams('pay-page')
+
+  const [paymentType, setPaymentType] = useState<'monthly' | 'one-time'>(initialPlan)
+  const [email, setEmail] = useState('')
+  const [phone, setPhone] = useState('')
+  const [firstName, setFirstName] = useState('')
+  const [lastName, setLastName] = useState('')
+  const [cardNumber, setCardNumber] = useState('')
+  const [cardExp, setCardExp] = useState('')
+  const [cardCvv, setCardCvv] = useState('')
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [success, setSuccess] = useState<{ cert?: string } | null>(null)
+
+  const [tickerIdx, setTickerIdx] = useState(0)
+  useEffect(() => {
+    const t = setInterval(() => setTickerIdx(i => (i + 1) % RECENT_BUYERS.length), 4500)
+    return () => clearInterval(t)
+  }, [])
+
+  const amount = paymentType === 'monthly' ? PAYMENT_CONFIG.monthlyPrice : PAYMENT_CONFIG.oneTimePrice
+  const planLabel = paymentType === 'monthly'
+    ? `$${PAYMENT_CONFIG.monthlyPrice}/mo × ${PAYMENT_CONFIG.totalMonths}`
+    : `One-time $${PAYMENT_CONFIG.oneTimePrice}`
+
+  const { captured, capture } = useEarlyLead({
+    email, phone, name: `${firstName} ${lastName}`.trim() || undefined,
+    source_lp: 'pay-page',
+    referral_code: tracking.ref,
+    utm_source: tracking.utm_source || (repName ? `rep-${repName}` : 'phone-sales'),
+    utm_medium: tracking.utm_medium,
+    utm_campaign: tracking.utm_campaign,
+  })
+
+  const ticker = useMemo(() => RECENT_BUYERS[tickerIdx], [tickerIdx])
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    setError(null)
+
+    if (!email || !phone || !firstName || !lastName || !cardNumber || !cardExp || !cardCvv) {
+      setError('Please fill in every field — we need this to issue your certificate.')
+      return
+    }
+
+    setIsLoading(true)
+    try {
+      const signupRes = await fetch('/api/signup', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          email,
+          full_name: `${firstName} ${lastName}`,
+          phone,
+          amount: paymentType === 'monthly' ? PAYMENT_CONFIG.totalPrice : PAYMENT_CONFIG.oneTimePrice,
+          monthly_payment: PAYMENT_CONFIG.monthlyPrice,
+          payment_plan_months: paymentType === 'monthly' ? PAYMENT_CONFIG.totalMonths : 1,
+          source_lp: 'pay-page',
+          referral_code: tracking.ref,
+          utm_source: tracking.utm_source || (repName ? `rep-${repName}` : 'phone-sales'),
+          utm_medium: tracking.utm_medium,
+          utm_campaign: tracking.utm_campaign,
+        }),
+      })
+      const signupData = await signupRes.json()
+      if (!signupRes.ok) throw new Error(signupData.error || 'Could not create your account.')
+
+      const payRes = await fetch('/api/payment/create', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          firstName, lastName, email, phone,
+          cardNumber: cardNumber.replace(/\s/g, ''),
+          cardExp: cardExp.replace('/', ''),
+          cardCvv,
+          paymentType,
+          signupId: signupData.id,
+        }),
+      })
+      const payData = await payRes.json()
+      if (!payRes.ok) {
+        setError(payData.error || 'Payment was declined. Please check your card details or call us at ' + SUPPORT_PHONE + '.')
+        return
+      }
+      setSuccess({ cert: payData.certificateNumber })
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Something went wrong. Please call us at ' + SUPPORT_PHONE + '.')
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  if (success) return <SuccessPanel email={email} />
+
+  return (
+    <div className="min-h-screen bg-gradient-to-b from-slate-50 to-white">
+      {/* Top trust bar */}
+      <div className="bg-slate-900 text-white">
+        <div className="max-w-6xl mx-auto px-4 py-2 flex items-center justify-between text-xs">
+          <div className="flex items-center gap-2">
+            <Lock className="w-3.5 h-3.5 text-green-400" />
+            <span className="font-medium">Secure 256-bit SSL checkout</span>
+          </div>
+          <a href={`tel:${SUPPORT_PHONE.replace(/-/g, '')}`} className="flex items-center gap-1.5 hover:text-orange-300 transition-colors">
+            <Phone className="w-3.5 h-3.5" />
+            <span className="font-semibold">{SUPPORT_PHONE}</span>
+          </a>
+        </div>
+      </div>
+
+      {/* Header */}
+      <header className="border-b bg-white">
+        <div className="max-w-6xl mx-auto px-4 py-4 flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <Plane className="w-6 h-6 text-orange-600" />
+            <span className="font-bold text-lg text-slate-900">Mexico Paradise Vacations</span>
+          </div>
+          <div className="hidden sm:flex items-center gap-1">
+            {[1, 2, 3, 4, 5].map(i => <Star key={i} className="w-4 h-4 fill-amber-400 text-amber-400" />)}
+            <span className="text-sm text-slate-700 ml-1.5 font-semibold">4.9</span>
+            <span className="text-xs text-slate-500 ml-1">/ 2,847 reviews</span>
+          </div>
+        </div>
+      </header>
+
+      {/* Live ticker */}
+      <div className="bg-emerald-50 border-b border-emerald-200">
+        <div className="max-w-6xl mx-auto px-4 py-2 text-xs text-emerald-800 flex items-center gap-2">
+          <span className="relative flex h-2 w-2">
+            <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75" />
+            <span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-500" />
+          </span>
+          <span className="font-medium truncate">
+            <strong>{ticker.name}</strong> just secured a vacation certificate — {ticker.when}
+          </span>
+        </div>
+      </div>
+
+      {/* Hero */}
+      <section className="max-w-6xl mx-auto px-4 pt-8 pb-4 text-center">
+        {repName && (
+          <div className="inline-flex items-center gap-1.5 bg-orange-100 text-orange-800 rounded-full px-3 py-1 text-xs font-semibold mb-3">
+            <Headset className="w-3.5 h-3.5" />
+            Prepared for you by {repName}
+          </div>
+        )}
+        {!repName && tracking.ref && (
+          <div className="inline-flex items-center gap-1.5 bg-emerald-100 text-emerald-800 rounded-full px-3 py-1 text-xs font-semibold mb-3">
+            <Sparkles className="w-3.5 h-3.5" />
+            Referred by <span className="font-mono">{tracking.ref}</span>
+          </div>
+        )}
+        <h1 className="text-3xl sm:text-4xl font-bold text-slate-900 mb-2">
+          Complete Your Vacation Booking
+        </h1>
+        <p className="text-slate-600 max-w-2xl mx-auto">
+          5 days, 4 nights, all-inclusive — choose from Cancun, Cabo, Riviera Maya, or Puerto Vallarta.
+          Your certificate is issued instantly after payment.
+        </p>
+      </section>
+
+      {/* Showcase carousel */}
+      <ShowcaseCarousel />
+
+      {/* Benefits — body + mind */}
+      <BenefitsSection />
+
+      {/* Two-column layout */}
+      <div id="checkout" className="max-w-6xl mx-auto px-4 py-6 grid lg:grid-cols-[1fr_400px] gap-8">
+
+        {/* LEFT — form */}
+        <main>
+          <form onSubmit={handleSubmit} className="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
+
+            {/* Plan toggle */}
+            <div className="p-6 border-b border-slate-100">
+              <p className="text-xs font-bold text-slate-500 uppercase tracking-wide mb-3">Choose your plan</p>
+              <div className="grid grid-cols-2 gap-2">
+                <button type="button" onClick={() => setPaymentType('monthly')}
+                  className={`relative rounded-xl border-2 p-4 text-left transition-all ${
+                    paymentType === 'monthly' ? 'border-orange-500 bg-orange-50' : 'border-slate-200 hover:border-slate-300'
+                  }`}>
+                  {paymentType === 'monthly' && (
+                    <span className="absolute -top-2.5 left-4 bg-red-500 text-white text-[10px] font-black px-2 py-0.5 rounded-full">MOST POPULAR</span>
+                  )}
+                  <p className="text-xs text-slate-400 line-through">Reg. $59/mo</p>
+                  <p className="text-2xl font-black text-slate-900">
+                    ${PAYMENT_CONFIG.monthlyPrice}<span className="text-xs font-normal text-slate-500">/mo</span>
+                  </p>
+                  <p className="text-[11px] text-slate-500">× {PAYMENT_CONFIG.totalMonths} payments</p>
+                </button>
+                <button type="button" onClick={() => setPaymentType('one-time')}
+                  className={`relative rounded-xl border-2 p-4 text-left transition-all ${
+                    paymentType === 'one-time' ? 'border-green-500 bg-green-50' : 'border-slate-200 hover:border-slate-300'
+                  }`}>
+                  {paymentType === 'one-time' && (
+                    <span className="absolute -top-2.5 left-4 bg-green-500 text-white text-[10px] font-black px-2 py-0.5 rounded-full">BEST VALUE</span>
+                  )}
+                  <p className="text-xs text-slate-400 line-through">Reg. $599</p>
+                  <p className="text-2xl font-black text-slate-900">
+                    ${PAYMENT_CONFIG.oneTimePrice}
+                  </p>
+                  <p className="text-[11px] text-green-700 font-bold">Save ${PAYMENT_CONFIG.totalPrice - PAYMENT_CONFIG.oneTimePrice}</p>
+                </button>
+              </div>
+            </div>
+
+            {/* Contact info */}
+            <div className="p-6 border-b border-slate-100">
+              <p className="text-xs font-bold text-slate-500 uppercase tracking-wide mb-3">Your contact info</p>
+              <div className="grid sm:grid-cols-2 gap-3">
+                <div>
+                  <Label htmlFor="firstName" className="text-xs text-slate-600 mb-1.5 block">First Name</Label>
+                  <Input id="firstName" value={firstName} onChange={e => setFirstName(e.target.value)} required className="h-11" />
+                </div>
+                <div>
+                  <Label htmlFor="lastName" className="text-xs text-slate-600 mb-1.5 block">Last Name</Label>
+                  <Input id="lastName" value={lastName} onChange={e => setLastName(e.target.value)} required className="h-11" />
+                </div>
+                <div className="sm:col-span-2">
+                  <Label htmlFor="email" className="text-xs text-slate-600 mb-1.5 block">Email Address (where your certificate will be sent)</Label>
+                  <div className="relative">
+                    <Input id="email" type="email" value={email} onChange={e => setEmail(e.target.value)} onBlur={capture}
+                      required className={`h-11 ${captured ? 'pr-9' : ''}`} />
+                    {captured && <Check className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-green-600" aria-label="Saved" />}
+                  </div>
+                </div>
+                <div className="sm:col-span-2">
+                  <Label htmlFor="phone" className="text-xs text-slate-600 mb-1.5 block">Phone Number</Label>
+                  <Input id="phone" type="tel" value={phone} onChange={e => setPhone(e.target.value)} onBlur={capture}
+                    placeholder="(555) 123-4567" required className="h-11" />
+                </div>
+              </div>
+            </div>
+
+            {/* Card details */}
+            <div className="p-6 border-b border-slate-100">
+              <div className="flex items-center justify-between mb-3">
+                <p className="text-xs font-bold text-slate-500 uppercase tracking-wide">Payment information</p>
+                <div className="flex items-center gap-1.5 text-[11px] text-slate-500">
+                  <Lock className="w-3 h-3 text-green-600" />
+                  Encrypted &amp; secure
+                </div>
+              </div>
+              <div className="space-y-3">
+                <div>
+                  <Label className="text-xs text-slate-600 mb-1.5 block">Card Number</Label>
+                  <div className="relative">
+                    <Input value={cardNumber} onChange={e => setCardNumber(formatCardNumber(e.target.value))}
+                      placeholder="1234 5678 9012 3456" inputMode="numeric" maxLength={19} required
+                      className="h-11 font-mono pr-24" />
+                    <div className="absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-1 text-slate-300">
+                      <CreditCard className="w-5 h-5" />
+                    </div>
+                  </div>
+                </div>
+                <div className="grid grid-cols-2 gap-3">
+                  <div>
+                    <Label className="text-xs text-slate-600 mb-1.5 block">Expiration</Label>
+                    <Input value={cardExp} onChange={e => setCardExp(formatExp(e.target.value))}
+                      placeholder="MM/YY" inputMode="numeric" maxLength={5} required className="h-11 font-mono" />
+                  </div>
+                  <div>
+                    <Label className="text-xs text-slate-600 mb-1.5 block">CVV</Label>
+                    <Input value={cardCvv} onChange={e => setCardCvv(e.target.value.replace(/\D/g, '').slice(0, 4))}
+                      placeholder="123" inputMode="numeric" maxLength={4} required className="h-11 font-mono" />
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Charge summary + submit */}
+            <div className="p-6 bg-slate-50">
+              <div className="bg-white rounded-xl border border-slate-200 p-4 mb-4">
+                <div className="flex items-center justify-between mb-2">
+                  <span className="text-sm text-slate-600">Today&apos;s charge</span>
+                  <span className="text-2xl font-black text-slate-900">${amount.toFixed(2)}</span>
+                </div>
+                <p className="text-xs text-slate-500">{planLabel}</p>
+                {paymentType === 'monthly' && (
+                  <p className="text-[11px] text-slate-400 mt-1">
+                    Then ${PAYMENT_CONFIG.monthlyPrice}/mo × {PAYMENT_CONFIG.totalMonths - 1} more. Cancel anytime.
+                  </p>
+                )}
+                <div className="mt-3 pt-3 border-t border-slate-100 flex items-center gap-1.5 text-[11px] text-emerald-700 font-medium">
+                  <Undo2 className="w-3.5 h-3.5" /> 100% refund within 30 days, no questions asked
+                </div>
+              </div>
+
+              {error && (
+                <div className="rounded-xl bg-red-50 border border-red-300 p-3 mb-4 flex items-start gap-2">
+                  <X className="w-5 h-5 text-red-500 shrink-0 mt-0.5" />
+                  <div className="text-sm">
+                    <p className="font-bold text-red-700 mb-0.5">Payment couldn&apos;t go through</p>
+                    <p className="text-red-600 text-xs">{error}</p>
+                  </div>
+                </div>
+              )}
+
+              <Button type="submit" disabled={isLoading}
+                className="w-full h-14 text-base font-black text-white rounded-xl shadow-md bg-orange-600 hover:bg-orange-700">
+                {isLoading ? (
+                  <><Loader2 className="w-5 h-5 mr-2 animate-spin" /> Processing your payment...</>
+                ) : (
+                  <><Lock className="w-4 h-4 mr-2" /> Complete Secure Payment — ${amount} <ArrowRight className="w-4 h-4 ml-1.5" /></>
+                )}
+              </Button>
+
+              <p className="text-[11px] text-center text-slate-400 mt-3 leading-relaxed">
+                By clicking above you authorize {paymentType === 'monthly'
+                  ? `today's $${PAYMENT_CONFIG.monthlyPrice} payment and ${PAYMENT_CONFIG.totalMonths - 1} future monthly charges of $${PAYMENT_CONFIG.monthlyPrice}.`
+                  : `a one-time charge of $${PAYMENT_CONFIG.oneTimePrice}.`} Cancel anytime. 30-day money-back guarantee.
+              </p>
+
+              {/* Card brand strip */}
+              <div className="flex items-center justify-center gap-3 mt-4 opacity-60">
+                <span className="text-[10px] uppercase tracking-wider text-slate-500 font-semibold">We accept</span>
+                <CardBrand label="VISA" />
+                <CardBrand label="MC" />
+                <CardBrand label="AMEX" />
+                <CardBrand label="DISC" />
+              </div>
+            </div>
+          </form>
+
+          {/* Testimonials */}
+          <section className="mt-10">
+            <h2 className="text-xl font-bold text-slate-900 text-center mb-1">What real travelers say</h2>
+            <div className="flex items-center justify-center gap-1 mb-6">
+              {[1, 2, 3, 4, 5].map(i => <Star key={i} className="w-4 h-4 fill-amber-400 text-amber-400" />)}
+              <span className="text-sm text-slate-600 ml-1">4.9 from 2,847 verified reviews</span>
+            </div>
+            <div className="grid sm:grid-cols-3 gap-4">
+              {TESTIMONIALS.slice(0, 3).map((t, i) => (
+                <div key={i} className="bg-white rounded-xl border border-slate-200 p-4">
+                  <div className="flex items-center gap-3 mb-3">
+                    {t.photo && (
+                      <Image src={t.photo} alt={t.name} width={40} height={40} className="rounded-full object-cover" />
+                    )}
+                    <div>
+                      <p className="text-sm font-semibold text-slate-900">{t.name}</p>
+                      <p className="text-xs text-slate-500">{t.location}</p>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-0.5 mb-2">
+                    {[1, 2, 3, 4, 5].map(i => <Star key={i} className="w-3 h-3 fill-amber-400 text-amber-400" />)}
+                  </div>
+                  <p className="text-sm text-slate-600 leading-relaxed">&ldquo;{t.quote}&rdquo;</p>
+                </div>
+              ))}
+            </div>
+          </section>
+
+          {/* FAQ */}
+          <section className="mt-10">
+            <h2 className="text-xl font-bold text-slate-900 text-center mb-6">Frequently asked questions</h2>
+            <div className="space-y-3">
+              <FAQItem q="When can I travel?" a="You can book your vacation for any available dates within 18 months of your first payment. Some blackout dates may apply during major holidays." />
+              <FAQItem q="What if I change my mind?" a="No problem. We offer a 100% refund within 30 days of purchase, no questions asked. Just call us at 888-602-2424." />
+              <FAQItem q="Is my card information safe?" a="Yes. Payments are processed by NMI, a Level-1 PCI-compliant payment gateway. We never see or store your full card number." />
+              <FAQItem q="When will I get my certificate?" a="Instantly. The moment your payment is approved, you'll receive a welcome email with your unique certificate number and a link to your customer portal." />
+            </div>
+          </section>
+        </main>
+
+        {/* RIGHT — sticky sidebar */}
+        <aside className="lg:sticky lg:top-6 self-start space-y-4">
+
+          {/* What's included */}
+          <div className="bg-white rounded-2xl border border-slate-200 shadow-sm p-5">
+            <div className="flex items-center gap-2 mb-3">
+              <Sparkles className="w-5 h-5 text-orange-500" />
+              <h3 className="font-bold text-slate-900">What&apos;s included</h3>
+            </div>
+            <ul className="space-y-2">
+              {INCLUDED.map(item => (
+                <li key={item} className="flex items-start gap-2 text-sm text-slate-700">
+                  <CheckCircle className="w-4 h-4 text-emerald-500 shrink-0 mt-0.5" />
+                  <span>{item}</span>
+                </li>
+              ))}
+            </ul>
+            <div className="mt-4 pt-4 border-t border-slate-100">
+              <p className="text-xs font-bold text-slate-500 uppercase tracking-wide mb-2">Choose from</p>
+              <div className="grid grid-cols-2 gap-1.5 text-xs text-slate-700">
+                <span className="flex items-center gap-1"><Plane className="w-3 h-3 text-slate-400" />Cancun</span>
+                <span className="flex items-center gap-1"><Plane className="w-3 h-3 text-slate-400" />Cabo San Lucas</span>
+                <span className="flex items-center gap-1"><Plane className="w-3 h-3 text-slate-400" />Riviera Maya</span>
+                <span className="flex items-center gap-1"><Plane className="w-3 h-3 text-slate-400" />Puerto Vallarta</span>
+              </div>
+            </div>
+          </div>
+
+          {/* Money-back guarantee */}
+          <div className="bg-gradient-to-br from-emerald-50 to-green-50 border border-emerald-200 rounded-2xl p-5 text-center">
+            <ShieldCheck className="w-10 h-10 text-emerald-600 mx-auto mb-2" />
+            <h3 className="font-black text-emerald-800 text-base mb-1">30-Day Money-Back Guarantee</h3>
+            <p className="text-xs text-emerald-700 leading-relaxed">
+              If you&apos;re not 100% satisfied within 30 days, we&apos;ll refund every penny. No fine print.
+            </p>
+          </div>
+
+          {/* Trust badges */}
+          <div className="bg-white rounded-2xl border border-slate-200 p-5">
+            <p className="text-xs font-bold text-slate-500 uppercase tracking-wide mb-3 text-center">Trusted &amp; secure</p>
+            <div className="grid grid-cols-2 gap-2 text-xs">
+              <TrustBadge icon={<Lock className="w-4 h-4 text-emerald-600" />} label="256-bit SSL" />
+              <TrustBadge icon={<ShieldCheck className="w-4 h-4 text-emerald-600" />} label="PCI Level 1" />
+              <TrustBadge icon={<CheckCircle className="w-4 h-4 text-emerald-600" />} label="NMI Verified" />
+              <TrustBadge icon={<Undo2 className="w-4 h-4 text-emerald-600" />} label="30-Day Refund" />
+            </div>
+          </div>
+
+          {/* Talk to a human */}
+          <div className="bg-slate-900 text-white rounded-2xl p-5 text-center">
+            <Headset className="w-8 h-8 text-orange-400 mx-auto mb-2" />
+            <p className="text-xs text-slate-300 mb-1">Questions before paying?</p>
+            <a href={`tel:${SUPPORT_PHONE.replace(/-/g, '')}`} className="block text-xl font-black text-white hover:text-orange-300 transition-colors">
+              {SUPPORT_PHONE}
+            </a>
+            <p className="text-[11px] text-slate-400 mt-1">Mon–Sun, 8am–10pm CT</p>
+          </div>
+        </aside>
+      </div>
+
+      {/* Footer */}
+      <footer className="border-t bg-slate-50 mt-12">
+        <div className="max-w-6xl mx-auto px-4 py-6 text-center text-xs text-slate-500">
+          <p className="mb-1">© {new Date().getFullYear()} Mexico Paradise Vacations · hi2b.com</p>
+          <p>
+            <a href="/terms" className="hover:text-slate-700">Terms</a>
+            <span className="mx-2">·</span>
+            <a href="/privacy" className="hover:text-slate-700">Privacy</a>
+            <span className="mx-2">·</span>
+            <a href={`mailto:support@724vacation.com`} className="hover:text-slate-700 inline-flex items-center gap-1">
+              <Mail className="w-3 h-3" /> support@724vacation.com
+            </a>
+          </p>
+        </div>
+      </footer>
+    </div>
+  )
+}
+
+function CardBrand({ label }: { label: string }) {
+  return (
+    <div className="w-10 h-6 rounded border border-slate-300 bg-white flex items-center justify-center text-[9px] font-black text-slate-600 tracking-tight">
+      {label}
+    </div>
+  )
+}
+
+function TrustBadge({ icon, label }: { icon: React.ReactNode; label: string }) {
+  return (
+    <div className="flex items-center gap-1.5 bg-slate-50 rounded-lg px-2 py-1.5">
+      {icon}
+      <span className="text-slate-700 font-medium">{label}</span>
+    </div>
+  )
+}
+
+function FAQItem({ q, a }: { q: string; a: string }) {
+  const [open, setOpen] = useState(false)
+  return (
+    <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
+      <button type="button" onClick={() => setOpen(o => !o)}
+        className="w-full text-left p-4 flex items-center justify-between gap-3 hover:bg-slate-50">
+        <span className="font-semibold text-sm text-slate-900">{q}</span>
+        <span className={`text-slate-400 transition-transform ${open ? 'rotate-45' : ''}`}>+</span>
+      </button>
+      {open && <div className="px-4 pb-4 text-sm text-slate-600 leading-relaxed">{a}</div>}
+    </div>
+  )
+}
+
+function SuccessPanel({ email }: { email: string }) {
+  return (
+    <div className="min-h-screen bg-gradient-to-b from-emerald-50 to-white flex items-center justify-center px-4 py-12">
+      <div className="bg-white rounded-3xl border border-emerald-200 shadow-lg max-w-lg w-full p-8 text-center">
+        <div className="w-16 h-16 rounded-full bg-emerald-100 flex items-center justify-center mx-auto mb-4">
+          <Check className="w-9 h-9 text-emerald-600" />
+        </div>
+        <h1 className="text-2xl font-black text-slate-900 mb-2">You&apos;re going to Mexico!</h1>
+        <p className="text-slate-600 mb-6">
+          Your vacation certificate has been activated. We just sent your welcome email and certificate details to:
+        </p>
+        <div className="bg-slate-50 rounded-xl px-4 py-3 mb-6">
+          <p className="font-mono text-sm font-bold text-slate-900">{email}</p>
+        </div>
+        <p className="text-xs text-slate-500 mb-6">
+          Check your inbox in the next 1–2 minutes (and your spam folder, just in case).
+          Your email includes your certificate number and a link to your customer portal where you can choose your destination and book travel dates.
+        </p>
+        <a href="/dashboard/login"
+          className="inline-flex items-center justify-center gap-2 bg-orange-600 hover:bg-orange-700 text-white font-bold rounded-xl px-6 py-3 transition-colors">
+          Go to Customer Portal <ArrowRight className="w-4 h-4" />
+        </a>
+        <p className="mt-6 text-xs text-slate-400">
+          Need help? Call <a className="text-orange-600 font-semibold" href={`tel:${SUPPORT_PHONE.replace(/-/g, '')}`}>{SUPPORT_PHONE}</a>
+        </p>
+      </div>
+    </div>
+  )
+}
diff --git a/src/app/pay/ShowcaseCarousel.tsx b/src/app/pay/ShowcaseCarousel.tsx
new file mode 100644
index 0000000..d055426
--- /dev/null
+++ b/src/app/pay/ShowcaseCarousel.tsx
@@ -0,0 +1,139 @@
+'use client'
+
+import { useCallback, useEffect, useState } from 'react'
+import Image from 'next/image'
+import useEmblaCarousel from 'embla-carousel-react'
+import { ChevronLeft, ChevronRight } from 'lucide-react'
+
+interface Slide {
+  src: string
+  badge: string
+  headline: string
+  body: string
+}
+
+const SLIDES: Slide[] = [
+  {
+    src: '/images/showcase/resort-beachfront.jpg',
+    badge: '5-Star All-Inclusive',
+    headline: 'World-class beachfront resorts',
+    body: 'Stay at curated 5-star properties on the Mexican Caribbean and Pacific coasts — chosen for sand, service, and stars.',
+  },
+  {
+    src: '/images/showcase/infinity-pool-sunset.jpg',
+    badge: 'Endless Paradise',
+    headline: 'Watch the sunset from your infinity pool',
+    body: 'Cocktail in hand, ocean to the horizon. This is what 18 months of "I deserve this" looks like.',
+  },
+  {
+    src: '/images/showcase/dashboard-screen.jpg',
+    badge: 'Your Private Dashboard',
+    headline: 'Login, see everything, book in 2 clicks',
+    body: 'Manage your certificate, view billing history, choose your dates, and book your resort — all from one beautiful portal.',
+  },
+  {
+    src: '/images/showcase/certificate-design.jpg',
+    badge: 'Instant Certificate',
+    headline: 'Your golden ticket, delivered the moment you pay',
+    body: 'A unique certificate number is generated and emailed to you the second your payment clears. Frame it, screenshot it — it\'s yours.',
+  },
+  {
+    src: '/images/showcase/family-vacation-joy.jpg',
+    badge: 'Whole Family Covered',
+    headline: 'Bring the family. We\'ll handle the rest.',
+    body: 'One certificate covers 2 adults and 2 kids under 12 — all-inclusive meals, drinks, and resort amenities for everyone.',
+  },
+]
+
+export default function ShowcaseCarousel() {
+  const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true, align: 'center' })
+  const [selected, setSelected] = useState(0)
+
+  useEffect(() => {
+    if (!emblaApi) return
+    const onSelect = () => setSelected(emblaApi.selectedScrollSnap())
+    emblaApi.on('select', onSelect)
+    emblaApi.on('reInit', onSelect)
+    onSelect()
+    return () => { emblaApi.off('select', onSelect); emblaApi.off('reInit', onSelect) }
+  }, [emblaApi])
+
+  useEffect(() => {
+    if (!emblaApi) return
+    const t = setInterval(() => emblaApi.scrollNext(), 5500)
+    return () => clearInterval(t)
+  }, [emblaApi])
+
+  const scrollTo = useCallback((idx: number) => emblaApi?.scrollTo(idx), [emblaApi])
+
+  return (
+    <section className="bg-slate-950 text-white">
+      <div className="max-w-7xl mx-auto px-4 py-10">
+        <div className="text-center mb-6">
+          <p className="text-orange-400 font-bold text-xs uppercase tracking-[0.2em] mb-2">A Peek Inside</p>
+          <h2 className="text-2xl sm:text-3xl font-bold">Login. See your certificate. Book your dates.</h2>
+          <p className="text-slate-400 text-sm mt-1">Here&apos;s exactly what you&apos;re getting.</p>
+        </div>
+
+        <div className="relative">
+          <div className="overflow-hidden rounded-2xl" ref={emblaRef}>
+            <div className="flex">
+              {SLIDES.map((s, i) => (
+                <div key={i} className="flex-[0_0_100%] min-w-0 relative">
+                  <div className="relative aspect-[16/9] sm:aspect-[21/9] w-full">
+                    <Image
+                      src={s.src}
+                      alt={s.headline}
+                      fill
+                      sizes="(max-width: 1280px) 100vw, 1280px"
+                      className="object-cover"
+                      priority={i === 0}
+                    />
+                    <div className="absolute inset-0 bg-gradient-to-r from-black/85 via-black/40 to-transparent" />
+                    <div className="absolute inset-0 flex items-end sm:items-center">
+                      <div className="p-5 sm:p-10 sm:max-w-xl">
+                        <span className="inline-block bg-orange-500 text-white text-[10px] sm:text-xs font-black uppercase tracking-wider px-2.5 py-1 rounded-full mb-3">
+                          {s.badge}
+                        </span>
+                        <h3 className="text-xl sm:text-3xl font-black leading-tight mb-2">{s.headline}</h3>
+                        <p className="text-sm sm:text-base text-slate-200 leading-relaxed">{s.body}</p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <button
+            onClick={() => emblaApi?.scrollPrev()}
+            aria-label="Previous"
+            className="absolute left-2 sm:left-3 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-white/15 backdrop-blur hover:bg-white/30 flex items-center justify-center transition-colors"
+          >
+            <ChevronLeft className="w-5 h-5" />
+          </button>
+          <button
+            onClick={() => emblaApi?.scrollNext()}
+            aria-label="Next"
+            className="absolute right-2 sm:right-3 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-white/15 backdrop-blur hover:bg-white/30 flex items-center justify-center transition-colors"
+          >
+            <ChevronRight className="w-5 h-5" />
+          </button>
+        </div>
+
+        <div className="flex items-center justify-center gap-2 mt-5">
+          {SLIDES.map((_, i) => (
+            <button
+              key={i}
+              onClick={() => scrollTo(i)}
+              aria-label={`Slide ${i + 1}`}
+              className={`h-1.5 rounded-full transition-all ${
+                i === selected ? 'w-8 bg-orange-500' : 'w-2.5 bg-white/30 hover:bg-white/50'
+              }`}
+            />
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}
diff --git a/src/app/pay/[code]/page.tsx b/src/app/pay/[code]/page.tsx
new file mode 100644
index 0000000..10be69a
--- /dev/null
+++ b/src/app/pay/[code]/page.tsx
@@ -0,0 +1,28 @@
+import { redirect, notFound } from 'next/navigation'
+import { getAffiliateByShortCode } from '@/lib/db-mysql'
+
+interface PageProps {
+  params: Promise<{ code: string }>
+  searchParams: Promise<Record<string, string | string[] | undefined>>
+}
+
+export default async function PayByShortCode({ params, searchParams }: PageProps) {
+  const { code } = await params
+  const sp = await searchParams
+
+  // 2-char shortcuts only; anything else is a typo / bot probe
+  if (!code || code.length < 2 || code.length > 8) notFound()
+
+  const affiliate = await getAffiliateByShortCode(code).catch(() => null)
+  if (!affiliate) notFound()
+
+  // Forward any extra params (utm_*, plan, etc.) — only inject ref
+  const qs = new URLSearchParams()
+  qs.set('ref', affiliate.referral_code)
+  for (const [k, v] of Object.entries(sp)) {
+    if (k === 'ref') continue
+    if (typeof v === 'string') qs.set(k, v)
+    else if (Array.isArray(v) && v[0]) qs.set(k, v[0])
+  }
+  redirect(`/pay?${qs.toString()}`)
+}
diff --git a/src/app/pay/page.tsx b/src/app/pay/page.tsx
new file mode 100644
index 0000000..7b5b5e7
--- /dev/null
+++ b/src/app/pay/page.tsx
@@ -0,0 +1,17 @@
+import type { Metadata } from 'next'
+import { Suspense } from 'react'
+import PayPageClient from './PayPageClient'
+
+export const metadata: Metadata = {
+  title: 'Secure Checkout — Mexico Paradise Vacations',
+  description: 'Complete your vacation certificate purchase securely. 5 days / 4 nights all-inclusive in Cancun, Cabo, Riviera Maya, or Puerto Vallarta.',
+  robots: { index: false, follow: false },
+}
+
+export default function PayPage() {
+  return (
+    <Suspense fallback={<div className="min-h-screen bg-slate-50" />}>
+      <PayPageClient />
+    </Suspense>
+  )
+}
diff --git a/src/app/payment/success/page.tsx b/src/app/payment/success/page.tsx
index f78fb17..e55e46e 100644
--- a/src/app/payment/success/page.tsx
+++ b/src/app/payment/success/page.tsx
@@ -1,13 +1,13 @@
 'use client'
 
-import { useEffect, useState } from 'react'
+import { useEffect, useState, Suspense } from 'react'
 import { useSearchParams } from 'next/navigation'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
 import { CheckCircle, Download, Calendar, ExternalLink } from 'lucide-react'
 import Link from 'next/link'
 
-export default function PaymentSuccess() {
+function PaymentSuccessContent() {
   const searchParams = useSearchParams()
   const [isLoading, setIsLoading] = useState(true)
   const [paymentData, setPaymentData] = useState<any>(null)
@@ -159,4 +159,19 @@ export default function PaymentSuccess() {
       </div>
     </div>
   )
+}
+
+export default function PaymentSuccess() {
+  return (
+    <Suspense fallback={
+      <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 flex items-center justify-center">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-slate-900 mx-auto mb-4" />
+          <p className="text-slate-600">Loading...</p>
+        </div>
+      </div>
+    }>
+      <PaymentSuccessContent />
+    </Suspense>
+  )
 }
\ No newline at end of file
diff --git a/src/app/privacy/page.tsx b/src/app/privacy/page.tsx
new file mode 100644
index 0000000..7b04a62
--- /dev/null
+++ b/src/app/privacy/page.tsx
@@ -0,0 +1,91 @@
+import { Plane } from 'lucide-react'
+import Link from 'next/link'
+import type { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Privacy Policy — Mexico Paradise Vacations',
+  description: 'Privacy policy for Mexico Paradise Vacations.',
+}
+
+export default function PrivacyPage() {
+  return (
+    <div className="min-h-screen bg-white">
+      <header className="border-b">
+        <div className="max-w-4xl mx-auto px-4 py-4 flex items-center justify-between">
+          <Link href="/" className="flex items-center gap-2">
+            <div className="w-8 h-8 bg-gradient-to-br from-orange-500 to-red-500 rounded-lg flex items-center justify-center">
+              <Plane className="w-4 h-4 text-white" />
+            </div>
+            <span className="font-bold text-gray-900">Mexico Paradise Vacations</span>
+          </Link>
+          <Link href="/" className="text-sm text-orange-600 hover:text-orange-700">Back to Home</Link>
+        </div>
+      </header>
+
+      <main className="max-w-4xl mx-auto px-4 py-12">
+        <h1 className="text-3xl font-bold text-gray-900 mb-2">Privacy Policy</h1>
+        <p className="text-gray-500 mb-8">Last updated: March 21, 2026</p>
+
+        <div className="prose prose-gray max-w-none space-y-6 text-[15px] leading-relaxed">
+          <section>
+            <h2 className="text-xl font-bold text-gray-900">Information We Collect</h2>
+            <p>We collect information you provide directly when purchasing a vacation certificate or downloading our free travel guide, including: name, email address, phone number, and payment information (processed securely through our payment processor — we do not store credit card numbers on our servers).</p>
+          </section>
+
+          <section>
+            <h2 className="text-xl font-bold text-gray-900">How We Use Your Information</h2>
+            <ul className="list-disc pl-6 space-y-1">
+              <li>To process your vacation certificate purchase and recurring payments</li>
+              <li>To send your vacation certificate and booking confirmations</li>
+              <li>To communicate important updates about your vacation booking</li>
+              <li>To send promotional offers and travel content (you may opt out at any time)</li>
+              <li>To improve our website and services</li>
+            </ul>
+          </section>
+
+          <section>
+            <h2 className="text-xl font-bold text-gray-900">Payment Security</h2>
+            <p>All payment transactions are processed through NMI, a PCI-DSS Level 1 certified payment gateway. Credit card information is encrypted using 256-bit SSL technology and is never stored on our servers. Recurring payments are managed securely through tokenized payment methods.</p>
+          </section>
+
+          <section>
+            <h2 className="text-xl font-bold text-gray-900">Information Sharing</h2>
+            <p>We do not sell, trade, or rent your personal information to third parties. We may share your information only with:</p>
+            <ul className="list-disc pl-6 space-y-1">
+              <li>Participating resort partners to fulfill your vacation booking</li>
+              <li>Payment processors to complete transactions</li>
+              <li>Service providers who assist in operating our website</li>
+              <li>Law enforcement when required by law</li>
+            </ul>
+          </section>
+
+          <section>
+            <h2 className="text-xl font-bold text-gray-900">Cookies & Analytics</h2>
+            <p>We use Google Analytics to understand how visitors interact with our website. We use cookies to maintain your session and preferences. You may disable cookies in your browser settings, though some features may not function properly.</p>
+          </section>
+
+          <section>
+            <h2 className="text-xl font-bold text-gray-900">Your Rights</h2>
+            <p>You may request access to, correction of, or deletion of your personal data by contacting us at <strong>888-602-2424</strong> or emailing us. We will respond to your request within 30 days.</p>
+          </section>
+
+          <section>
+            <h2 className="text-xl font-bold text-gray-900">Contact</h2>
+            <p>Mexico Paradise Vacations (DBA: 724vacation.com)<br />
+            Toll-Free: <a href="tel:888-602-2424" className="text-orange-600">888-602-2424</a><br />
+            Website: <a href="https://hi2b.com" className="text-orange-600">hi2b.com</a></p>
+          </section>
+        </div>
+      </main>
+
+      <footer className="border-t py-6 text-center text-sm text-gray-500">
+        <p>Mexico Paradise Vacations &bull; 724vacation.com &bull; 888-602-2424</p>
+        <div className="flex items-center justify-center gap-4 mt-2">
+          <Link href="/terms" className="hover:text-gray-700">Terms</Link>
+          <Link href="/privacy" className="text-orange-600">Privacy</Link>
+          <Link href="/" className="hover:text-gray-700">Home</Link>
+        </div>
+      </footer>
+    </div>
+  )
+}
diff --git a/src/app/reviews/page.tsx b/src/app/reviews/page.tsx
new file mode 100644
index 0000000..a74c606
--- /dev/null
+++ b/src/app/reviews/page.tsx
@@ -0,0 +1,82 @@
+import { Plane, Star, MapPin } from 'lucide-react'
+import Link from 'next/link'
+import Image from 'next/image'
+import type { Metadata } from 'next'
+import { TESTIMONIALS, PAYMENT_CONFIG } from '@/app/lp/_config/types'
+
+export const metadata: Metadata = {
+  title: 'Real Reviews — Mexico Paradise Vacations',
+  description: 'Read what real travelers say about their Mexico Paradise Vacations all-inclusive trips. Honest reviews from Cancun, Cabo, Riviera Maya, and Puerto Vallarta.',
+}
+
+export default function ReviewsPage() {
+  const avg = 4.8
+  const count = TESTIMONIALS.length
+
+  return (
+    <div className="min-h-screen bg-white">
+      <header className="border-b">
+        <div className="max-w-5xl mx-auto px-4 py-4 flex items-center justify-between">
+          <Link href="/" className="flex items-center gap-2">
+            <div className="w-8 h-8 bg-gradient-to-br from-orange-500 to-red-500 rounded-lg flex items-center justify-center">
+              <Plane className="w-4 h-4 text-white" />
+            </div>
+            <span className="font-bold text-gray-900">Mexico Paradise Vacations</span>
+          </Link>
+          <Link href="/" className="text-sm text-orange-600 hover:text-orange-700">Back to Home</Link>
+        </div>
+      </header>
+
+      <main className="max-w-5xl mx-auto px-4 py-12">
+        <div className="text-center mb-10">
+          <h1 className="text-3xl font-bold text-gray-900 mb-2">What real travelers say</h1>
+          <div className="flex items-center justify-center gap-2 text-gray-600">
+            <div className="flex">
+              {[1,2,3,4,5].map(i => (
+                <Star key={i} className="w-5 h-5 fill-yellow-400 text-yellow-400" />
+              ))}
+            </div>
+            <span className="font-semibold text-gray-900">{avg.toFixed(1)}</span>
+            <span className="text-sm">· {count}+ reviews from real travelers across our four destinations</span>
+          </div>
+        </div>
+
+        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
+          {TESTIMONIALS.map((t, i) => (
+            <div key={i} className="border border-gray-200 rounded-lg p-5 hover:border-orange-300 transition-colors flex flex-col">
+              <div className="flex items-center gap-3 mb-3">
+                {t.photo && (
+                  <div className="relative w-12 h-12 rounded-full overflow-hidden bg-gray-100 shrink-0">
+                    <Image src={t.photo} alt={t.name} fill className="object-cover" sizes="48px" unoptimized />
+                  </div>
+                )}
+                <div className="min-w-0">
+                  <div className="font-semibold text-gray-900 truncate">{t.name}</div>
+                  <div className="text-xs text-gray-500 flex items-center gap-1"><MapPin className="w-3 h-3" />{t.location}</div>
+                </div>
+              </div>
+              <div className="flex gap-0.5 mb-2">
+                {[1,2,3,4,5].map(s => (
+                  <Star key={s} className="w-3.5 h-3.5 fill-yellow-400 text-yellow-400" />
+                ))}
+              </div>
+              <p className="text-sm text-gray-700 leading-relaxed">&ldquo;{t.quote}&rdquo;</p>
+            </div>
+          ))}
+        </div>
+
+        <div className="mt-12 p-6 bg-gradient-to-br from-orange-50 to-amber-50 border border-orange-200 rounded-xl text-center">
+          <h2 className="text-xl font-bold text-gray-900 mb-2">Ready to write your own review?</h2>
+          <p className="text-sm text-gray-600 mb-4">5 days, 4 nights, all-inclusive at a real beachfront resort. From ${PAYMENT_CONFIG.monthlyPrice}/mo.</p>
+          <Link href="/lp/golden-hour" className="inline-block bg-orange-600 hover:bg-orange-700 text-white font-bold px-6 py-3 rounded-lg">
+            Claim My Certificate
+          </Link>
+        </div>
+
+        <p className="text-xs text-gray-400 text-center mt-8">
+          Reviews are from real customers and may be lightly edited for length and clarity. Photos used with permission.
+        </p>
+      </main>
+    </div>
+  )
+}
diff --git a/src/app/sitemap.ts b/src/app/sitemap.ts
new file mode 100644
index 0000000..d297d4f
--- /dev/null
+++ b/src/app/sitemap.ts
@@ -0,0 +1,26 @@
+import type { MetadataRoute } from 'next'
+import { LP_CONFIGS } from './lp/_config/pages'
+
+const BASE = 'https://hi2b.com'
+
+export default function sitemap(): MetadataRoute.Sitemap {
+  const now = new Date()
+  const staticPages: MetadataRoute.Sitemap = [
+    { url: `${BASE}/`, lastModified: now, changeFrequency: 'weekly', priority: 1.0 },
+    { url: `${BASE}/pay`, lastModified: now, changeFrequency: 'weekly', priority: 0.9 },
+    { url: `${BASE}/about`, lastModified: now, changeFrequency: 'monthly', priority: 0.7 },
+    { url: `${BASE}/faq`, lastModified: now, changeFrequency: 'monthly', priority: 0.7 },
+    { url: `${BASE}/reviews`, lastModified: now, changeFrequency: 'weekly', priority: 0.7 },
+    { url: `${BASE}/affiliate`, lastModified: now, changeFrequency: 'monthly', priority: 0.6 },
+    { url: `${BASE}/dashboard`, lastModified: now, changeFrequency: 'monthly', priority: 0.5 },
+    { url: `${BASE}/privacy`, lastModified: now, changeFrequency: 'yearly', priority: 0.3 },
+    { url: `${BASE}/terms`, lastModified: now, changeFrequency: 'yearly', priority: 0.3 },
+  ]
+  const lpPages: MetadataRoute.Sitemap = LP_CONFIGS.map(lp => ({
+    url: `${BASE}/lp/${lp.slug}`,
+    lastModified: now,
+    changeFrequency: 'weekly',
+    priority: 0.8,
+  }))
+  return [...staticPages, ...lpPages]
+}
diff --git a/src/app/terms/page.tsx b/src/app/terms/page.tsx
new file mode 100644
index 0000000..8fb94a7
--- /dev/null
+++ b/src/app/terms/page.tsx
@@ -0,0 +1,229 @@
+import { Plane } from 'lucide-react'
+import Link from 'next/link'
+import type { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Terms & Conditions — Mexico Paradise Vacations',
+  description: 'Terms and conditions for vacation certificate purchases.',
+}
+
+export default function TermsPage() {
+  return (
+    <div className="min-h-screen bg-white">
+      {/* Header */}
+      <header className="border-b">
+        <div className="max-w-4xl mx-auto px-4 py-4 flex items-center justify-between">
+          <Link href="/" className="flex items-center gap-2">
+            <div className="w-8 h-8 bg-gradient-to-br from-orange-500 to-red-500 rounded-lg flex items-center justify-center">
+              <Plane className="w-4 h-4 text-white" />
+            </div>
+            <span className="font-bold text-gray-900">Mexico Paradise Vacations</span>
+          </Link>
+          <Link href="/" className="text-sm text-orange-600 hover:text-orange-700">Back to Home</Link>
+        </div>
+      </header>
+
+      <main className="max-w-4xl mx-auto px-4 py-12">
+        <h1 className="text-3xl font-bold text-gray-900 mb-2">Terms & Conditions</h1>
+        <p className="text-gray-500 mb-8">Last updated: March 21, 2026</p>
+
+        <div className="prose prose-gray max-w-none space-y-8 text-[15px] leading-relaxed">
+
+          <section>
+            <h2 className="text-xl font-bold text-gray-900 border-b pb-2">1. Offer Overview</h2>
+            <p>Mexico Paradise Vacations (&quot;Company,&quot; &quot;we,&quot; &quot;us&quot;) offers all-inclusive vacation certificate packages at participating luxury resorts in Cancun, Cabo San Lucas, Riviera Maya, and Puerto Vallarta, Mexico. Our promotional vacation certificates provide savings of up to 77% off retail pricing and include accommodations, all meals, drinks, and resort amenities for two (2) adults.</p>
+            <p>By purchasing a vacation certificate, you agree to attend a <strong>90-minute vacation ownership presentation</strong> at the resort during your stay. There is absolutely no obligation to purchase anything during or after the presentation.</p>
+          </section>
+
+          <section>
+            <h2 className="text-xl font-bold text-gray-900 border-b pb-2">2. Pricing & Payment Plans</h2>
+            <p>Vacation certificates are available at the following pricing:</p>
+            <ul className="list-disc pl-6 space-y-1">
+              <li><strong>Monthly Plan:</strong> $29.00/month for 10 months ($290.00 total)</li>
+              <li><strong>One-Time Payment:</strong> $249.00</li>
+            </ul>
+            <p>Monthly plan payments are automatically charged to the credit card on file on the same day each month. You may book your vacation dates immediately after your first payment is processed. All prices are in US Dollars (USD).</p>
+          </section>
+
+          <section>
+            <h2 className="text-xl font-bold text-gray-900 border-b pb-2">3. 30-Day Money-Back Guarantee</h2>
+            <p>We offer a <strong>100% money-back guarantee</strong> within thirty (30) days of your initial purchase, provided that:</p>
+            <ul className="list-disc pl-6 space-y-1">
+              <li>You have not booked travel dates for your vacation</li>
+              <li>You submit a refund request in writing via email or by calling our toll-free number</li>
+              <li>The refund is processed within 5-10 business days to the original payment method</li>
+            </ul>
+            <p>After the 30-day period, all sales are final. Partial refunds are not available after the guarantee period.</p>
+          </section>
+
+          <section>
+            <h2 className="text-xl font-bold text-gray-900 border-b pb-2">4. Cancellation of Recurring Payments</h2>
+            <p>You may cancel your monthly payment plan at any time by contacting us at <strong>888-602-2424</strong>. Upon cancellation:</p>
+            <ul className="list-disc pl-6 space-y-1">
+              <li>No further payments will be charged to your card</li>
+              <li>Payments already made are non-refundable (after the 30-day guarantee period)</li>
+              <li>If the certificate has not been fully paid, it will be inactivated and travel cannot be booked</li>
+              <li>You may reactivate by paying the remaining balance</li>
+            </ul>
+          </section>
+
+          <section>
+            <h2 className="text-xl font-bold text-gray-900 border-b pb-2">5. Eligibility Requirements</h2>
+            <p>To qualify for the promotional vacation certificate rate, the following requirements must be met:</p>
+
+            <h3 className="text-lg font-semibold text-gray-800 mt-4">Age Requirements</h3>
+            <ul className="list-disc pl-6 space-y-1">
+              <li><strong>Married couples:</strong> Both persons must be between the ages of 30-68</li>
+              <li><strong>Cohabitating couples:</strong> Both persons must be between the ages of 30-60</li>
+              <li><strong>Same-sex married couples:</strong> Both persons must be between the ages of 35-60</li>
+            </ul>
+
+            <h3 className="text-lg font-semibold text-gray-800 mt-4">Income Requirements</h3>
+            <ul className="list-disc pl-6 space-y-1">
+              <li>Minimum <strong>$50,000 USD combined annual household income</strong></li>
+              <li>Must be employed full-time. Part-time employment does not qualify</li>
+              <li>Retirees are accepted provided the income requirement is met</li>
+            </ul>
+
+            <h3 className="text-lg font-semibold text-gray-800 mt-4">Marital/Relationship Status</h3>
+            <ul className="list-disc pl-6 space-y-1">
+              <li>Offer is valid for <strong>married and cohabitating couples only</strong></li>
+              <li>Cohabitating couples must demonstrate a minimum of 2 years living together</li>
+              <li>Must tour with spouse, fianc&eacute;, or significant other if married, engaged, or cohabitating</li>
+            </ul>
+
+            <h3 className="text-lg font-semibold text-gray-800 mt-4">Credit Card Requirement</h3>
+            <ul className="list-disc pl-6 space-y-1">
+              <li>Guests <strong>must present a valid major credit card</strong> at check-in (Visa, Mastercard, or Discover)</li>
+              <li>Debit cards, check cards, company cards, and American Express are <strong>not accepted</strong></li>
+              <li>The credit card holder must be the qualifying person</li>
+            </ul>
+
+            <h3 className="text-lg font-semibold text-gray-800 mt-4">Language</h3>
+            <p>Both qualified participants must fluently speak, read, and understand either English or Spanish.</p>
+
+            <h3 className="text-lg font-semibold text-gray-800 mt-4">Geographic Restrictions</h3>
+            <p>This offer is valid only for permanent residents of the <strong>50 United States and Canada</strong>, excluding French Canadian provinces. Residents of or those with family or friends living in the resort destination are not eligible.</p>
+          </section>
+
+          <section>
+            <h2 className="text-xl font-bold text-gray-900 border-b pb-2">6. Vacation Ownership Presentation</h2>
+            <p>As a condition of the promotional rate, certificate holders must attend a <strong>90-minute vacation ownership presentation</strong> at the resort. The following conditions apply:</p>
+            <ul className="list-disc pl-6 space-y-1">
+              <li>The presentation is informational only — <strong>there is no obligation to purchase</strong></li>
+              <li>Both qualified adults must attend the presentation together</li>
+              <li>Activities and excursions cannot be scheduled on the same day as the presentation</li>
+              <li>Failure to attend the presentation may result in the promotional rate being voided and the retail room rate being charged</li>
+              <li>Guests cannot attend any other vacation club presentations during this vacation, including adjoining dates</li>
+            </ul>
+          </section>
+
+          <section>
+            <h2 className="text-xl font-bold text-gray-900 border-b pb-2">7. Booking & Travel</h2>
+            <ul className="list-disc pl-6 space-y-1">
+              <li>You have <strong>18 months from the date of purchase</strong> to use your vacation certificate</li>
+              <li>To book, call our toll-free number: <strong>888-602-2424</strong></li>
+              <li>Travel dates are subject to availability at participating resorts</li>
+              <li>Some blackout dates may apply during peak holiday seasons (Christmas, New Year&apos;s, Easter, Spring Break)</li>
+              <li>Must spend the first night at the designated resort in this promotion</li>
+              <li>Cannot be used consecutively with any other resort stays or promotional offers</li>
+            </ul>
+          </section>
+
+          <section>
+            <h2 className="text-xl font-bold text-gray-900 border-b pb-2">8. Rescheduling Policy</h2>
+            <ul className="list-disc pl-6 space-y-1">
+              <li>Once travel dates are chosen, changes are permitted only if received <strong>at least 21 days prior</strong> to the scheduled arrival date</li>
+              <li>Changes requested within 21 days of arrival will incur a penalty equal to the total cost of the package</li>
+              <li>No-shows will forfeit the vacation certificate with no refund</li>
+            </ul>
+          </section>
+
+          <section>
+            <h2 className="text-xl font-bold text-gray-900 border-b pb-2">9. Certificate Restrictions</h2>
+            <ul className="list-disc pl-6 space-y-1">
+              <li>This promotion is <strong>non-transferable</strong></li>
+              <li>Only <strong>one certificate per household, family, or known travel group</strong> traveling on the same or similar dates</li>
+              <li>May not be combined with any other promotional offer, discount code, or special pricing</li>
+              <li>This is a <strong>one-time promotion</strong> — not available to guests who have previously used a similar promotional offer at any participating resort</li>
+              <li>Not valid for existing members of any vacation club, timeshare, or loyalty program at participating resorts</li>
+            </ul>
+          </section>
+
+          <section>
+            <h2 className="text-xl font-bold text-gray-900 border-b pb-2">10. What&apos;s Included</h2>
+            <p>Your all-inclusive vacation certificate covers:</p>
+            <ul className="list-disc pl-6 space-y-1">
+              <li>5 days and 4 nights of luxury resort accommodation</li>
+              <li>All meals (breakfast, lunch, dinner) at resort restaurants</li>
+              <li>Unlimited drinks including alcoholic beverages at resort bars and restaurants</li>
+              <li>Access to resort pools, beaches, and non-motorized water activities</li>
+              <li>Use of resort amenities (fitness center, entertainment, common areas)</li>
+              <li>Accommodation for 2 adults</li>
+            </ul>
+            <p className="mt-2"><strong>Not included:</strong> Airfare, airport transfers, spa services, motorized water sports, off-site excursions, travel insurance, passport/visa fees, personal expenses, tips/gratuities.</p>
+          </section>
+
+          <section>
+            <h2 className="text-xl font-bold text-gray-900 border-b pb-2">11. Travel Documentation</h2>
+            <p>All travelers are responsible for ensuring they have valid travel documentation:</p>
+            <ul className="list-disc pl-6 space-y-1">
+              <li>A valid passport with at least 6 months remaining before expiration</li>
+              <li>Any required visas or travel permits</li>
+              <li>Travel insurance is strongly recommended but not required</li>
+            </ul>
+          </section>
+
+          <section>
+            <h2 className="text-xl font-bold text-gray-900 border-b pb-2">12. Limitation of Liability</h2>
+            <p>Mexico Paradise Vacations acts as an intermediary between the customer and the resort. We are not responsible for:</p>
+            <ul className="list-disc pl-6 space-y-1">
+              <li>Resort conditions, services, or quality of accommodations</li>
+              <li>Flight delays, cancellations, or travel disruptions</li>
+              <li>Personal injury, loss, or damage during travel</li>
+              <li>Changes in resort policies, amenities, or availability</li>
+              <li>Force majeure events including natural disasters, pandemics, or government restrictions</li>
+            </ul>
+          </section>
+
+          <section>
+            <h2 className="text-xl font-bold text-gray-900 border-b pb-2">13. Privacy & Data</h2>
+            <p>Personal information collected during purchase is used solely for processing your vacation certificate, billing, and customer communications. We do not sell or share your personal data with third parties except as necessary to fulfill your vacation booking. See our <Link href="/privacy" className="text-orange-600 underline">Privacy Policy</Link> for details.</p>
+          </section>
+
+          <section>
+            <h2 className="text-xl font-bold text-gray-900 border-b pb-2">14. Contact Information</h2>
+            <div className="bg-gray-50 rounded-xl p-6 mt-3">
+              <p className="font-bold text-gray-900 text-lg mb-2">Mexico Paradise Vacations</p>
+              <p className="text-gray-600">DBA: 724vacation.com</p>
+              <p className="text-gray-600 mt-2"><strong>Toll-Free:</strong> <a href="tel:888-602-2424" className="text-orange-600">888-602-2424</a></p>
+              <p className="text-gray-600"><strong>Website:</strong> <a href="https://hi2b.com" className="text-orange-600">hi2b.com</a></p>
+              <p className="text-gray-600 mt-2 text-sm">Hours: Monday-Friday 9am-8pm EST | Saturday 10am-4pm EST</p>
+            </div>
+          </section>
+
+          <section>
+            <h2 className="text-xl font-bold text-gray-900 border-b pb-2">15. Governing Law</h2>
+            <p>These terms and conditions shall be governed by and construed in accordance with the laws of the State of Michigan, United States. Any disputes arising under these terms shall be subject to the exclusive jurisdiction of the courts located in the State of Michigan.</p>
+          </section>
+
+          <section>
+            <h2 className="text-xl font-bold text-gray-900 border-b pb-2">16. Acceptance</h2>
+            <p>By purchasing a vacation certificate from Mexico Paradise Vacations, you acknowledge that you have read, understood, and agree to be bound by these Terms and Conditions. If you do not agree with any part of these terms, do not purchase a vacation certificate.</p>
+          </section>
+
+        </div>
+      </main>
+
+      {/* Footer */}
+      <footer className="border-t py-6 text-center text-sm text-gray-500">
+        <p>Mexico Paradise Vacations &bull; 724vacation.com &bull; 888-602-2424</p>
+        <div className="flex items-center justify-center gap-4 mt-2">
+          <Link href="/terms" className="text-orange-600">Terms</Link>
+          <Link href="/privacy" className="hover:text-gray-700">Privacy</Link>
+          <Link href="/" className="hover:text-gray-700">Home</Link>
+        </div>
+      </footer>
+    </div>
+  )
+}
diff --git a/src/components/lp/pages/LP00HonestHour.tsx b/src/components/lp/pages/LP00HonestHour.tsx
new file mode 100644
index 0000000..515145b
--- /dev/null
+++ b/src/components/lp/pages/LP00HonestHour.tsx
@@ -0,0 +1,265 @@
+// LP00 "Honest Hour" — the message-matched root landing page (hi2b.com/).
+// Built 2026-06-22 to replace the random-redirect homepage.
+//
+// Design rationale (from funnel diagnosis + competitor research vs Monster
+// Reservations / PCK Travel / SandosPromo):
+//   1. Server-rendered, ONE page — no random redirect, no spinner. Message
+//      matches the Sarah UGC ad: $249, 5d/4n, kids free, one honest hour.
+//   2. Answer both objections above the fold: WHY it's cheap + WHAT the
+//      presentation actually is. (The two fears cold TikTok traffic carries.)
+//   3. Lead-first: free guide email capture before the $249 ask (PCK's proven
+//      funnel + HANDOVER fix #3).
+//   4. Honesty over fake urgency: NO countdown, NO "2,847 claimed". Uses the
+//      "travel anytime within 18 months" flexibility framing that the trusted
+//      competitors use instead.
+//   5. $249 one-time shown FIRST (our price edge vs Monster's $299–347).
+//
+// This is a server component; EbookCaptureForm is the only client island.
+
+import DirectCheckout from '@/components/lp/shared/DirectCheckout'
+import TopPhoneBar from '@/components/lp/shared/TopPhoneBar'
+import FloatingPhoneButton from '@/components/lp/shared/FloatingPhoneButton'
+import { DESTINATIONS, TESTIMONIALS, FAQ_ITEMS, PAYMENT_CONFIG } from '@/app/lp/_config/types'
+import {
+  Check, ShieldCheck, Clock, Users, Plane, MapPin, Undo2, Star, Sun, Phone,
+} from 'lucide-react'
+
+const SOURCE_LP = 'home'
+const ACCENT = '#E8651A'
+
+const INCLUDES = [
+  '5 Days / 4 Nights',
+  'All-inclusive resort',
+  'Unlimited food & drinks',
+  '2 adults + 2 kids — kids free',
+  '4 Mexico destinations',
+  'Travel anytime within 18 months',
+]
+
+export default function LP00HonestHour() {
+  return (
+    <>
+      <TopPhoneBar />
+      <main className="min-h-screen bg-white text-gray-900">
+      {/* ─────────── HERO (SamCart-style 2-column: offer left, checkout right) ─────────── */}
+      <section className="relative overflow-hidden bg-gradient-to-br from-orange-50 via-amber-50 to-cyan-50">
+        <div className="mx-auto max-w-6xl px-5 pt-8 pb-12 sm:pt-12">
+          <div className="grid gap-8 md:grid-cols-[1.05fr_0.95fr] md:gap-8 lg:gap-10">
+
+            {/* LEFT — the offer */}
+            <div>
+              <div className="inline-flex items-center gap-1.5 rounded-full bg-white/70 px-3 py-1 text-xs font-semibold text-orange-700 ring-1 ring-orange-200">
+                <Sun className="h-3.5 w-3.5" /> Hour to Paradise — honest travel deals
+              </div>
+
+              <h1 className="mt-4 text-3xl font-black leading-tight tracking-tight sm:text-4xl lg:text-5xl">
+                5 days in Mexico from <span style={{ color: ACCENT }}>$29/mo</span>.
+                <br className="hidden sm:block" /> The only catch? One honest hour.
+              </h1>
+
+              <p className="mt-4 max-w-xl text-base text-gray-600 sm:text-lg">
+                All-inclusive resort, 4 nights, 2 adults + 2 kids — <strong>kids free</strong>.
+                Cancún, Cabo, Riviera Maya or Puerto Vallarta. Book any dates in the next
+                18 months. No fake countdowns. No high-pressure games.
+              </p>
+
+              {/* Two objections answered immediately */}
+              <div className="mt-6 grid gap-3 sm:grid-cols-2">
+                <div className="rounded-xl border border-orange-200 bg-white/80 p-4">
+                  <p className="flex items-center gap-2 text-sm font-bold text-gray-900">
+                    <Check className="h-4 w-4 text-green-600" /> Why is it this cheap?
+                  </p>
+                  <p className="mt-1 text-sm text-gray-600">
+                    The resort subsidizes your stay in exchange for one ~60–90 minute
+                    tour &amp; ownership presentation. That&apos;s the honest trade — you
+                    get a real all-inclusive vacation, they get one hour to show you around.
+                  </p>
+                </div>
+                <div className="rounded-xl border border-orange-200 bg-white/80 p-4">
+                  <p className="flex items-center gap-2 text-sm font-bold text-gray-900">
+                    <Check className="h-4 w-4 text-green-600" /> What&apos;s the &quot;hour&quot;?
+                  </p>
+                  <p className="mt-1 text-sm text-gray-600">
+                    One scheduled resort presentation during your stay. No obligation to
+                    buy anything. A polite &quot;no thank you&quot; is completely fine —
+                    you keep the full vacation either way.
+                  </p>
+                </div>
+              </div>
+
+              {/* Trust row */}
+              <div className="mt-6 flex flex-wrap items-center gap-x-5 gap-y-2 text-sm text-gray-600">
+                <span className="flex items-center gap-1.5"><ShieldCheck className="h-4 w-4 text-green-600" /> 30-day money-back guarantee</span>
+                <span className="flex items-center gap-1.5"><Clock className="h-4 w-4 text-green-600" /> 18-month flexible travel window</span>
+                <span className="flex items-center gap-1.5"><Star className="h-4 w-4 text-amber-500" /> 4.8★ from real travelers</span>
+              </div>
+            </div>
+
+            {/* RIGHT — pay directly; centered on mobile, 2-col + sticky from tablet up */}
+            <div className="mx-auto w-full max-w-md md:mx-0 md:max-w-none md:self-start md:sticky md:top-6">
+              <DirectCheckout accentColor={ACCENT} sourceLp={SOURCE_LP} />
+              <a
+                href="tel:+18886022424"
+                className="mt-3 flex items-center justify-center gap-2 rounded-xl border border-green-300 bg-green-50 px-4 py-3 text-sm font-bold text-green-800 transition-colors hover:bg-green-100"
+              >
+                <Phone className="h-4 w-4" /> Prefer to book by phone? Call (888) 602-2424
+              </a>
+            </div>
+
+          </div>
+        </div>
+      </section>
+
+
+      {/* ─────────── WHAT'S INCLUDED ─────────── */}
+      <section className="mx-auto max-w-5xl px-5 py-12">
+        <h2 className="text-2xl font-bold">Everything that&apos;s included</h2>
+        <div className="mt-5 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+          {INCLUDES.map((item) => (
+            <div key={item} className="flex items-center gap-2.5 rounded-lg border border-gray-100 bg-gray-50 px-4 py-3">
+              <Check className="h-4 w-4 shrink-0 text-green-600" />
+              <span className="text-sm font-medium text-gray-800">{item}</span>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* ─────────── DESTINATIONS ─────────── */}
+      <section className="bg-gray-50 py-12">
+        <div className="mx-auto max-w-5xl px-5">
+          <h2 className="text-2xl font-bold">Choose your paradise</h2>
+          <p className="mt-1 text-gray-600">Four all-inclusive Mexico destinations. Same honest deal.</p>
+          <div className="mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+            {DESTINATIONS.map((d) => (
+              <div key={d.name} className="overflow-hidden rounded-2xl bg-white shadow-sm ring-1 ring-gray-100">
+                {/* eslint-disable-next-line @next/next/no-img-element */}
+                <img src={d.images[0]} alt={d.name} className="h-36 w-full object-cover" loading="lazy" />
+                <div className="p-4">
+                  <p className="flex items-center gap-1.5 font-bold"><MapPin className="h-4 w-4 text-orange-500" />{d.name}</p>
+                  <p className="mt-1 text-sm text-gray-500">{d.tagline}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ─────────── HOW THE HONEST HOUR WORKS ─────────── */}
+      <section className="mx-auto max-w-5xl px-5 py-12">
+        <h2 className="text-2xl font-bold">How the honest hour works</h2>
+        <div className="mt-6 grid gap-5 sm:grid-cols-3">
+          {[
+            { icon: Plane, t: 'Claim your certificate', d: 'Grab the 5-day all-inclusive certificate for $249 (or $29/mo). Pick your dates anytime in the next 18 months.' },
+            { icon: Users, t: 'Attend one presentation', d: 'During your stay you attend a single ~60–90 minute resort tour. No obligation. Say no and keep everything.' },
+            { icon: Sun, t: 'Enjoy all 4 nights', d: 'The rest of the trip is yours — all-inclusive food, drinks, beaches and pools, with your family.' },
+          ].map((s, i) => (
+            <div key={s.t} className="rounded-2xl border border-gray-100 p-5">
+              <div className="flex h-10 w-10 items-center justify-center rounded-full bg-orange-100 text-orange-600">
+                <s.icon className="h-5 w-5" />
+              </div>
+              <p className="mt-3 text-xs font-bold text-orange-600">STEP {i + 1}</p>
+              <p className="font-bold">{s.t}</p>
+              <p className="mt-1 text-sm text-gray-600">{s.d}</p>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* ─────────── PRICING (leans $29/mo) ─────────── */}
+      <section className="bg-gradient-to-br from-orange-50 to-amber-50 py-12">
+        <div className="mx-auto max-w-3xl px-5 text-center">
+          <h2 className="text-2xl font-bold">Two honest ways to pay</h2>
+          <p className="mt-1 text-gray-600">No hidden fees. 30-day money-back guarantee. Travel within 18 months.</p>
+
+          <div className="mt-6 grid gap-4 sm:grid-cols-2">
+            {/* Monthly — MOST POPULAR, shown first */}
+            <div className="relative rounded-2xl border-2 border-orange-500 bg-white p-6 text-left shadow-sm">
+              <span className="absolute -top-3 left-6 rounded-full bg-orange-500 px-3 py-0.5 text-xs font-black text-white">MOST POPULAR</span>
+              <p className="text-sm font-semibold text-gray-500">Start today</p>
+              <p className="mt-1 text-4xl font-black" style={{ color: ACCENT }}>${PAYMENT_CONFIG.monthlyPrice}<span className="text-base font-normal text-gray-400">/mo</span></p>
+              <p className="mt-1 text-sm text-gray-500">{PAYMENT_CONFIG.totalMonths} months. Cancel anytime.</p>
+              <p className="mt-3 flex items-center gap-1.5 text-xs font-medium text-orange-700"><Undo2 className="h-3.5 w-3.5" /> 100% refund within 30 days</p>
+            </div>
+            {/* One-time — secondary */}
+            <div className="rounded-2xl border border-gray-200 bg-white p-6 text-left">
+              <p className="text-sm font-semibold text-gray-500">Or pay once</p>
+              <p className="mt-1 text-4xl font-black text-gray-800">${PAYMENT_CONFIG.oneTimePrice}</p>
+              <p className="mt-1 text-sm text-gray-500">One-time. Save ${PAYMENT_CONFIG.totalPrice - PAYMENT_CONFIG.oneTimePrice} vs. monthly.</p>
+              <p className="mt-3 flex items-center gap-1.5 text-xs font-medium text-gray-500"><Check className="h-3.5 w-3.5" /> Same vacation, same guarantee</p>
+            </div>
+          </div>
+
+          <div className="mt-8">
+            <a href="#checkout" className="inline-flex items-center justify-center rounded-xl px-8 py-3.5 text-base font-bold text-white shadow-lg" style={{ backgroundColor: ACCENT }}>
+              Get my vacation certificate
+            </a>
+            <p className="mt-3 text-sm text-gray-500">Not ready? Scroll up for the free guide.</p>
+          </div>
+        </div>
+      </section>
+
+      {/* ─────────── TESTIMONIALS ─────────── */}
+      <section className="mx-auto max-w-5xl px-5 py-12">
+        <h2 className="text-2xl font-bold">Real travelers, real trips</h2>
+        <div className="mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+          {TESTIMONIALS.slice(0, 6).map((t) => (
+            <figure key={t.name} className="rounded-2xl border border-gray-100 bg-white p-5 shadow-sm">
+              <div className="flex gap-0.5 text-amber-500">
+                {Array.from({ length: 5 }).map((_, i) => <Star key={i} className="h-4 w-4 fill-current" />)}
+              </div>
+              <blockquote className="mt-3 text-sm text-gray-700">&ldquo;{t.quote}&rdquo;</blockquote>
+              <figcaption className="mt-3 text-xs font-semibold text-gray-900">{t.name} <span className="font-normal text-gray-400">· {t.location}</span></figcaption>
+            </figure>
+          ))}
+        </div>
+      </section>
+
+      {/* ─────────── FAQ (honest disclosure) ─────────── */}
+      <section className="bg-gray-50 py-12">
+        <div className="mx-auto max-w-3xl px-5">
+          <h2 className="text-2xl font-bold">Straight answers</h2>
+          <div className="mt-6 divide-y divide-gray-200 overflow-hidden rounded-2xl border border-gray-200 bg-white">
+            {FAQ_ITEMS.map((f) => (
+              <details key={f.question} className="group px-5 py-4">
+                <summary className="cursor-pointer list-none text-sm font-semibold text-gray-900 marker:hidden">
+                  {f.question}
+                </summary>
+                <p className="mt-2 text-sm text-gray-600">{f.answer}</p>
+              </details>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ─────────── FINAL CTA ─────────── */}
+      <section className="py-14" style={{ backgroundColor: ACCENT }}>
+        <div className="mx-auto max-w-2xl px-5 text-center text-white">
+          <h2 className="text-3xl font-black">Your hour to paradise starts here</h2>
+          <p className="mt-2 text-white/90">
+            Grab your certificate from just $29/mo, or talk to a real person — your call.
+          </p>
+          <div className="mt-6 flex flex-col items-center justify-center gap-3 sm:flex-row">
+            <a
+              href="#checkout"
+              className="w-full rounded-xl bg-white px-8 py-3.5 text-base font-black text-orange-600 shadow-lg hover:bg-orange-50 sm:w-auto"
+            >
+              Get my vacation certificate
+            </a>
+            <a
+              href="tel:+18886022424"
+              className="inline-flex w-full items-center justify-center gap-2 rounded-xl border-2 border-white px-8 py-3.5 text-base font-black text-white hover:bg-white/10 sm:w-auto"
+            >
+              <Phone className="h-4 w-4" /> Call (888) 602-2424
+            </a>
+          </div>
+          <p className="mt-4 text-xs text-white/80">
+            30-day money-back guarantee · Travel within 18 months · Polite &quot;no&quot; at the presentation is always fine
+          </p>
+        </div>
+      </section>
+
+        <FloatingPhoneButton />
+      </main>
+    </>
+  )
+}
diff --git a/src/components/lp/pages/LP01GoldenHour.tsx b/src/components/lp/pages/LP01GoldenHour.tsx
new file mode 100644
index 0000000..4867f0c
--- /dev/null
+++ b/src/components/lp/pages/LP01GoldenHour.tsx
@@ -0,0 +1,432 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { Sun, Utensils, Wine, Waves, Star, MapPin, ArrowRight, Check } from 'lucide-react'
+import PayNowForm from '@/components/lp/shared/PayNowForm'
+import TestimonialCard from '@/components/lp/shared/TestimonialCard'
+import FAQAccordion from '@/components/lp/shared/FAQAccordion'
+import TrustBadges from '@/components/lp/shared/TrustBadges'
+import CountdownTimer from '@/components/lp/shared/CountdownTimer'
+import StickyMobileCTA from '@/components/lp/shared/StickyMobileCTA'
+import UrgencyBanner from '@/components/lp/shared/UrgencyBanner'
+import InfluencerBuzz from '@/components/lp/shared/InfluencerBuzz'
+import { PAYMENT_CONFIG, TESTIMONIALS, DESTINATIONS, FAQ_ITEMS } from '@/app/lp/_config/types'
+
+const HERO_IMAGE = '/images/cdn/photo-1507525428034-b723cf961d3e.jpg'
+const BEACH_IMAGE = '/images/cdn/photo-1519046904884-53103b34b206.jpg'
+const RESORT_IMAGE = '/images/cdn/photo-1582719508461-905c673771fd.jpg'
+const POOL_IMAGE = '/images/cdn/photo-1571896349842-33c89424de2d.jpg'
+const DINNER_IMAGE = '/images/cdn/photo-1414235077428-338989a2e8c0.jpg'
+
+const DESTINATION_IMAGES: Record<string, string> = {
+  'Cancun': '/images/cdn/photo-1510097467424-192d713fd8b2.jpg',
+  'Cabo San Lucas': '/images/cdn/photo-1580415200778-625cb1890ab5.jpg',
+  'Riviera Maya': '/images/cdn/photo-1518638150340-f706e86654de.jpg',
+  'Puerto Vallarta': '/images/cdn/photo-1585793753011-397e6e4668d6.jpg',
+}
+
+const INCLUDED_ITEMS = [
+  { icon: Sun, title: '5 Days & 4 Nights', description: 'Luxurious resort accommodations with ocean views' },
+  { icon: Utensils, title: 'All Meals Included', description: 'Breakfast, lunch, dinner at world-class restaurants' },
+  { icon: Wine, title: 'Unlimited Drinks', description: 'Premium cocktails, wine, and refreshments all day' },
+  { icon: Waves, title: 'Resort Amenities', description: 'Pools, beach access, spa, fitness center, and more' },
+]
+
+export default function LP01GoldenHour() {
+  const [scrollY, setScrollY] = useState(0)
+
+  useEffect(() => {
+    const handleScroll = () => setScrollY(window.scrollY)
+    window.addEventListener('scroll', handleScroll, { passive: true })
+    return () => window.removeEventListener('scroll', handleScroll)
+  }, [])
+
+  // Gradient deepens as user scrolls
+  const gradientOpacity = Math.min(0.4, scrollY / 3000)
+
+  return (
+    <div
+      className="min-h-screen relative"
+      style={{
+        fontFamily: 'var(--font-source-sans), system-ui, sans-serif',
+        backgroundColor: '#FFF8F0',
+      }}
+    >
+      <UrgencyBanner variant="combined" />
+
+      {/* Warm golden gradient overlay that deepens on scroll */}
+      <div
+        className="fixed inset-0 pointer-events-none z-0 transition-opacity duration-500"
+        style={{
+          background: `linear-gradient(180deg, rgba(212,165,116,${gradientOpacity}) 0%, rgba(232,101,26,${gradientOpacity * 0.6}) 100%)`,
+        }}
+      />
+
+      {/* Top bar */}
+      <div className="relative z-10 bg-[#1a0f05] text-[#D4A574] text-center py-2.5 px-4 text-sm font-medium tracking-wide pt-20">
+        <span className="opacity-90">Limited Time Offer</span>
+        <span className="mx-3 opacity-40">|</span>
+        <CountdownTimer variant="minimal" accentColor="#D4A574" />
+        <span className="ml-3 opacity-90">remaining</span>
+      </div>
+
+      {/* Hero Section */}
+      <section className="relative z-10 overflow-hidden">
+        <div className="absolute inset-0">
+          <img
+            src={HERO_IMAGE}
+            alt="Golden sunset over a pristine Mexican beach"
+            className="w-full h-full object-cover"
+          />
+          <div className="absolute inset-0 bg-gradient-to-b from-black/30 via-black/20 to-[#FFF8F0]" />
+          <div className="absolute inset-0 bg-gradient-to-r from-black/40 via-transparent to-transparent" />
+        </div>
+
+        <div className="relative max-w-6xl mx-auto px-4 pt-20 pb-32 sm:pt-28 sm:pb-40 md:pt-36 md:pb-48">
+          <p
+            className="text-sm sm:text-base tracking-[0.25em] uppercase mb-4 text-white/80"
+            style={{ fontFamily: 'var(--font-source-sans), sans-serif' }}
+          >
+            Mexico Paradise Vacations
+          </p>
+          <h1
+            className="text-4xl sm:text-5xl md:text-7xl leading-[1.1] mb-6 text-white max-w-3xl"
+            style={{ fontFamily: 'var(--font-playfair), serif' }}
+          >
+            Picture yourself
+            <span className="block" style={{ color: '#D4A574' }}>
+              in paradise
+            </span>
+          </h1>
+          <p className="text-lg sm:text-xl text-white/85 max-w-xl mb-8 leading-relaxed">
+            5 days and 4 nights at an all-inclusive Mexican resort.
+            Starting at just <strong>${PAYMENT_CONFIG.monthlyPrice}/month</strong>.
+          </p>
+          <button
+            onClick={() => document.getElementById('signup-form')?.scrollIntoView({ behavior: 'smooth' })}
+            className="inline-flex items-center gap-2 px-8 py-4 rounded-full text-white font-semibold text-lg transition-transform hover:scale-105"
+            style={{ backgroundColor: '#E8651A' }}
+          >
+            Claim Your Certificate
+            <ArrowRight className="w-5 h-5" />
+          </button>
+        </div>
+      </section>
+
+      {/* Social proof strip */}
+      <section className="relative z-10 -mt-8 mb-12">
+        <div className="max-w-4xl mx-auto px-4">
+          <div className="bg-white rounded-2xl shadow-lg px-6 py-4 flex flex-col sm:flex-row items-center justify-between gap-4">
+            <div className="flex items-center gap-2">
+              <div className="flex -space-x-2">
+                {TESTIMONIALS.slice(0, 4).map((t, i) => (
+                  <img
+                    key={i}
+                    src={t.photo}
+                    alt={t.name}
+                    className="w-8 h-8 rounded-full border-2 border-white object-cover"
+                  />
+                ))}
+              </div>
+              <span className="text-sm text-gray-600">
+                <strong className="text-gray-900">2,400+</strong> happy travelers
+              </span>
+            </div>
+            <div className="flex items-center gap-1">
+              {Array.from({ length: 5 }).map((_, i) => (
+                <Star key={i} className="w-4 h-4 fill-yellow-400 text-yellow-400" />
+              ))}
+              <span className="text-sm font-semibold text-gray-900 ml-1">4.8/5</span>
+              <span className="text-sm text-gray-500 ml-1">average rating</span>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* What's Included */}
+      <section className="relative z-10 py-16 sm:py-24">
+        <div className="max-w-6xl mx-auto px-4">
+          <p
+            className="text-sm tracking-[0.2em] uppercase text-center mb-3"
+            style={{ color: '#D4A574' }}
+          >
+            Everything You Need
+          </p>
+          <h2
+            className="text-3xl sm:text-4xl md:text-5xl text-center mb-4"
+            style={{ fontFamily: 'var(--font-playfair), serif', color: '#1a0f05' }}
+          >
+            What&apos;s Included
+          </h2>
+          <p className="text-center text-gray-500 max-w-2xl mx-auto mb-12">
+            Your vacation certificate covers everything for an unforgettable getaway. No hidden fees, no surprises.
+          </p>
+
+          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
+            {INCLUDED_ITEMS.map((item) => (
+              <div
+                key={item.title}
+                className="bg-white rounded-2xl p-6 shadow-sm border border-[#D4A574]/10 hover:shadow-md transition-shadow group"
+              >
+                <div
+                  className="w-12 h-12 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform"
+                  style={{ backgroundColor: '#FFF8F0' }}
+                >
+                  <item.icon className="w-6 h-6" style={{ color: '#D4A574' }} />
+                </div>
+                <h3
+                  className="text-lg font-semibold mb-2"
+                  style={{ fontFamily: 'var(--font-playfair), serif', color: '#1a0f05' }}
+                >
+                  {item.title}
+                </h3>
+                <p className="text-sm text-gray-500 leading-relaxed">{item.description}</p>
+              </div>
+            ))}
+          </div>
+
+          {/* Lifestyle image strip */}
+          <div className="mt-12 grid grid-cols-3 gap-3 sm:gap-4 rounded-2xl overflow-hidden">
+            <img src={RESORT_IMAGE} alt="Luxury resort suite" className="w-full h-32 sm:h-48 object-cover rounded-xl" />
+            <img src={POOL_IMAGE} alt="Infinity pool overlooking ocean" className="w-full h-32 sm:h-48 object-cover rounded-xl" />
+            <img src={DINNER_IMAGE} alt="Fine dining experience" className="w-full h-32 sm:h-48 object-cover rounded-xl" />
+          </div>
+        </div>
+      </section>
+
+      {/* Destinations */}
+      <section className="relative z-10 py-16 sm:py-24" style={{ backgroundColor: '#1a0f05' }}>
+        <div className="max-w-6xl mx-auto px-4">
+          <p className="text-sm tracking-[0.2em] uppercase text-center mb-3" style={{ color: '#D4A574' }}>
+            Choose Your Paradise
+          </p>
+          <h2
+            className="text-3xl sm:text-4xl md:text-5xl text-center mb-4 text-white"
+            style={{ fontFamily: 'var(--font-playfair), serif' }}
+          >
+            Four Stunning Destinations
+          </h2>
+          <p className="text-center text-white/60 max-w-2xl mx-auto mb-12">
+            Each destination offers its own unique character. Pick the one that calls to you.
+          </p>
+
+          <div className="grid sm:grid-cols-2 gap-6">
+            {DESTINATIONS.map((dest) => (
+              <div
+                key={dest.name}
+                className="group relative rounded-2xl overflow-hidden aspect-[4/3] cursor-pointer"
+              >
+                <img
+                  src={DESTINATION_IMAGES[dest.name] || dest.images[0]}
+                  alt={dest.name}
+                  className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
+                />
+                <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent" />
+                <div className="absolute bottom-0 left-0 right-0 p-6">
+                  <div className="flex items-center gap-2 mb-1">
+                    <MapPin className="w-4 h-4" style={{ color: '#D4A574' }} />
+                    <span className="text-xs tracking-widest uppercase text-white/70">Mexico</span>
+                  </div>
+                  <h3
+                    className="text-2xl sm:text-3xl text-white mb-1"
+                    style={{ fontFamily: 'var(--font-playfair), serif' }}
+                  >
+                    {dest.name}
+                  </h3>
+                  <p className="text-white/70 text-sm">{dest.tagline}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Full-bleed beach image divider */}
+      <section className="relative z-10 h-64 sm:h-80 md:h-96 overflow-hidden">
+        <img
+          src={BEACH_IMAGE}
+          alt="Turquoise ocean with golden sand"
+          className="w-full h-full object-cover"
+        />
+        <div className="absolute inset-0 flex items-center justify-center bg-black/30">
+          <h2
+            className="text-3xl sm:text-4xl md:text-5xl text-white text-center px-4"
+            style={{ fontFamily: 'var(--font-playfair), serif' }}
+          >
+            Your golden hour awaits
+          </h2>
+        </div>
+      </section>
+
+      {/* Pricing + Form Section */}
+      <section id="signup-form" className="relative z-10 py-16 sm:py-24" style={{ backgroundColor: '#FFF8F0' }}>
+        <div className="max-w-5xl mx-auto px-4">
+          <p className="text-sm tracking-[0.2em] uppercase text-center mb-3" style={{ color: '#D4A574' }}>
+            Simple, Transparent Pricing
+          </p>
+          <h2
+            className="text-3xl sm:text-4xl md:text-5xl text-center mb-4"
+            style={{ fontFamily: 'var(--font-playfair), serif', color: '#1a0f05' }}
+          >
+            Claim Your Certificate
+          </h2>
+          <p className="text-center text-gray-500 max-w-xl mx-auto mb-12">
+            Lock in your price today. Travel anytime within 18 months.
+          </p>
+
+          <div className="grid md:grid-cols-2 gap-8 items-start">
+            {/* Pricing details */}
+            <div className="bg-white rounded-2xl p-8 shadow-sm border border-[#D4A574]/10">
+              <h3
+                className="text-2xl mb-6"
+                style={{ fontFamily: 'var(--font-playfair), serif', color: '#1a0f05' }}
+              >
+                Your Vacation Certificate Includes
+              </h3>
+              <ul className="space-y-4 mb-6">
+                {[
+                  '5 days & 4 nights at a luxury all-inclusive resort',
+                  'All meals, drinks, and snacks included',
+                  'Your choice of 4 stunning destinations',
+                  'Flexible booking — travel within 18 months',
+                  '30-day money-back guarantee',
+                  'Bring a partner at no extra cost',
+                ].map((item) => (
+                  <li key={item} className="flex items-start gap-3">
+                    <Check className="w-5 h-5 shrink-0 mt-0.5" style={{ color: '#D4A574' }} />
+                    <span className="text-gray-700 text-sm">{item}</span>
+                  </li>
+                ))}
+              </ul>
+
+              <div className="pt-6 border-t border-gray-100">
+                <div className="flex items-baseline gap-2 mb-1">
+                  <span className="text-gray-400 text-sm line-through">$1,500+</span>
+                  <span className="text-xs bg-green-100 text-green-700 px-2 py-0.5 rounded-full font-medium">
+                    Save over $1,100
+                  </span>
+                </div>
+                <div className="flex items-baseline gap-1">
+                  <span
+                    className="text-4xl font-bold"
+                    style={{ color: '#E8651A', fontFamily: 'var(--font-playfair), serif' }}
+                  >
+                    ${PAYMENT_CONFIG.monthlyPrice}
+                  </span>
+                  <span className="text-gray-500">/month for {PAYMENT_CONFIG.totalMonths} months</span>
+                </div>
+                <p className="text-sm text-gray-400 mt-1">
+                  or ${PAYMENT_CONFIG.oneTimePrice} one-time payment
+                </p>
+              </div>
+            </div>
+
+            {/* Pay Now Form */}
+            <div className="bg-white rounded-2xl p-8 shadow-sm border border-[#D4A574]/10">
+              <h3
+                className="text-xl mb-1"
+                style={{ fontFamily: 'var(--font-playfair), serif', color: '#1a0f05' }}
+              >
+                Get Started Today
+              </h3>
+              <p className="text-sm text-gray-500 mb-6">
+                Secure your certificate in under 2 minutes
+              </p>
+              <PayNowForm
+                accentColor="#E8651A"
+                buttonText="Claim My Vacation Certificate"
+                showToggle={true}
+              />
+              <TrustBadges variant="compact" className="mt-6" textColor="#9CA3AF" />
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Testimonials */}
+      <section className="relative z-10 py-16 sm:py-24">
+        <div className="max-w-6xl mx-auto px-4">
+          <p className="text-sm tracking-[0.2em] uppercase text-center mb-3" style={{ color: '#D4A574' }}>
+            Real Stories
+          </p>
+          <h2
+            className="text-3xl sm:text-4xl text-center mb-12"
+            style={{ fontFamily: 'var(--font-playfair), serif', color: '#1a0f05' }}
+          >
+            What Our Travelers Say
+          </h2>
+
+          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
+            {TESTIMONIALS.slice(0, 6).map((testimonial, i) => (
+              <TestimonialCard
+                key={i}
+                quote={testimonial.quote}
+                name={testimonial.name}
+                location={testimonial.location}
+                photo={testimonial.photo}
+                className="bg-white shadow-sm border border-[#D4A574]/10"
+              />
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* FAQ */}
+      <section className="relative z-10 py-16 sm:py-24" style={{ backgroundColor: '#FFF8F0' }}>
+        <div className="max-w-3xl mx-auto px-4">
+          <p className="text-sm tracking-[0.2em] uppercase text-center mb-3" style={{ color: '#D4A574' }}>
+            Questions & Answers
+          </p>
+          <InfluencerBuzz />
+
+          <h2
+            className="text-3xl sm:text-4xl text-center mb-12"
+            style={{ fontFamily: 'var(--font-playfair), serif', color: '#1a0f05' }}
+          >
+            Frequently Asked Questions
+          </h2>
+
+          <FAQAccordion items={FAQ_ITEMS} />
+        </div>
+      </section>
+
+      {/* Final CTA */}
+      <section className="relative z-10 py-16 sm:py-20 text-center" style={{ backgroundColor: '#1a0f05' }}>
+        <div className="max-w-2xl mx-auto px-4">
+          <h2
+            className="text-3xl sm:text-4xl text-white mb-4"
+            style={{ fontFamily: 'var(--font-playfair), serif' }}
+          >
+            Your sunset is waiting
+          </h2>
+          <p className="text-white/60 mb-8 max-w-lg mx-auto">
+            Join over 2,400 travelers who have experienced paradise for a fraction of the cost.
+          </p>
+          <button
+            onClick={() => document.getElementById('signup-form')?.scrollIntoView({ behavior: 'smooth' })}
+            className="inline-flex items-center gap-2 px-8 py-4 rounded-full text-white font-semibold text-lg transition-transform hover:scale-105"
+            style={{ backgroundColor: '#E8651A' }}
+          >
+            Start My Vacation
+            <ArrowRight className="w-5 h-5" />
+          </button>
+          <TrustBadges variant="compact" className="mt-8" textColor="#D4A574" />
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="relative z-10 py-8 text-center text-xs text-gray-400" style={{ backgroundColor: '#0f0a04' }}>
+        <div className="max-w-4xl mx-auto px-4">
+          <p className="mb-2">Mexico Paradise Vacations &copy; {new Date().getFullYear()}. All rights reserved.</p>
+          <p>
+            Your certificate is valid for 18 months from purchase date.
+            A 90-minute resort presentation is required to receive the discounted rate.
+          </p>
+        </div>
+      </footer>
+
+      {/* Sticky Mobile CTA */}
+      <StickyMobileCTA accentColor="#E8651A" buttonText="Claim Certificate" />
+    </div>
+  )
+}
diff --git a/src/components/lp/pages/LP02MidnightTropical.tsx b/src/components/lp/pages/LP02MidnightTropical.tsx
new file mode 100644
index 0000000..cc06800
--- /dev/null
+++ b/src/components/lp/pages/LP02MidnightTropical.tsx
@@ -0,0 +1,395 @@
+'use client'
+
+import { useEffect, useState, useRef } from 'react'
+import { Sparkles, Shield, Clock, Users, Star, Zap, ArrowRight, Check, Gift } from 'lucide-react'
+import PayNowForm from '@/components/lp/shared/PayNowForm'
+import FAQAccordion from '@/components/lp/shared/FAQAccordion'
+import TrustBadges from '@/components/lp/shared/TrustBadges'
+import CountdownTimer from '@/components/lp/shared/CountdownTimer'
+import SocialProofTicker from '@/components/lp/shared/SocialProofTicker'
+import StickyMobileCTA from '@/components/lp/shared/StickyMobileCTA'
+import TestimonialCard from '@/components/lp/shared/TestimonialCard'
+import UrgencyBanner from '@/components/lp/shared/UrgencyBanner'
+import InfluencerBuzz from '@/components/lp/shared/InfluencerBuzz'
+import { PAYMENT_CONFIG, TESTIMONIALS, DESTINATIONS, FAQ_ITEMS } from '@/app/lp/_config/types'
+
+const HERO_IMAGE = '/images/cdn/photo-1540541338287-41700207dee6.jpg'
+const BEACH_NIGHT = '/images/cdn/photo-1507525428034-b723cf961d3e.jpg'
+
+const DESTINATION_IMAGES: Record<string, string> = {
+  'Cancun': '/images/cdn/photo-1510097467424-192d713fd8b2.jpg',
+  'Cabo San Lucas': '/images/cdn/photo-1580415200778-625cb1890ab5.jpg',
+  'Riviera Maya': '/images/cdn/photo-1518638150340-f706e86654de.jpg',
+  'Puerto Vallarta': '/images/cdn/photo-1585793753011-397e6e4668d6.jpg',
+}
+
+const VIP_PERKS = [
+  { icon: Sparkles, text: '5 days & 4 nights — luxury all-inclusive' },
+  { icon: Users, text: 'Bring your partner — no extra charge' },
+  { icon: Clock, text: '18 months to book your travel dates' },
+  { icon: Shield, text: '30-day full money-back guarantee' },
+  { icon: Gift, text: 'All meals, drinks & resort amenities included' },
+  { icon: Zap, text: 'Instant digital certificate delivery' },
+]
+
+export default function LP02MidnightTropical() {
+  const [certificatesLeft, setCertificatesLeft] = useState(23)
+  const [animateGlow, setAnimateGlow] = useState(false)
+  const glowRef = useRef<NodeJS.Timeout | null>(null)
+
+  useEffect(() => {
+    // Pulse glow effect
+    glowRef.current = setInterval(() => {
+      setAnimateGlow(true)
+      setTimeout(() => setAnimateGlow(false), 1500)
+    }, 4000)
+    return () => {
+      if (glowRef.current) clearInterval(glowRef.current)
+    }
+  }, [])
+
+  // Simulate scarcity countdown
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setCertificatesLeft(prev => {
+        if (prev <= 5) return 23
+        return prev - 1
+      })
+    }, 45000)
+    return () => clearInterval(timer)
+  }, [])
+
+  return (
+    <div
+      className="min-h-screen"
+      style={{
+        fontFamily: 'var(--font-inter), system-ui, sans-serif',
+        backgroundColor: '#0A0A0F',
+        color: '#FFFFFF',
+      }}
+    >
+      <UrgencyBanner variant="combined" />
+
+      {/* Animated gradient background */}
+      <div className="fixed inset-0 pointer-events-none z-0">
+        <div
+          className="absolute inset-0 opacity-30"
+          style={{
+            background: 'radial-gradient(ellipse at 20% 50%, rgba(0,229,160,0.15) 0%, transparent 50%), radial-gradient(ellipse at 80% 20%, rgba(255,51,102,0.1) 0%, transparent 50%), radial-gradient(ellipse at 50% 100%, rgba(0,229,160,0.08) 0%, transparent 40%)',
+          }}
+        />
+      </div>
+
+      {/* Urgency bar */}
+      <div className="relative z-10 bg-gradient-to-r from-[#FF3366]/20 via-[#0A0A0F] to-[#00E5A0]/20 border-b border-white/5 pt-20">
+        <div className="max-w-6xl mx-auto px-4 py-3 flex items-center justify-center gap-3 text-sm">
+          <span className="w-2 h-2 rounded-full bg-[#FF3366] animate-pulse" />
+          <span className="text-white/70">
+            Only <strong className="text-[#FF3366]">{certificatesLeft} certificates</strong> remaining at this price
+          </span>
+          <span className="hidden sm:inline text-white/30">|</span>
+          <span className="hidden sm:inline text-white/70">Offer expires in</span>
+          <CountdownTimer variant="minimal" accentColor="#00E5A0" className="hidden sm:inline" />
+        </div>
+      </div>
+
+      {/* Hero */}
+      <section className="relative z-10 overflow-hidden">
+        <div className="absolute inset-0">
+          <img
+            src={HERO_IMAGE}
+            alt="Tropical resort at twilight"
+            className="w-full h-full object-cover opacity-30"
+          />
+          <div className="absolute inset-0 bg-gradient-to-b from-[#0A0A0F]/60 via-[#0A0A0F]/80 to-[#0A0A0F]" />
+        </div>
+
+        <div className="relative max-w-5xl mx-auto px-4 pt-16 pb-20 sm:pt-24 sm:pb-28 text-center">
+          <div className="inline-flex items-center gap-2 rounded-full border border-[#00E5A0]/30 bg-[#00E5A0]/10 px-4 py-1.5 text-xs font-medium text-[#00E5A0] mb-8">
+            <Sparkles className="w-3.5 h-3.5" />
+            EXCLUSIVE VIP OFFER
+          </div>
+
+          <h1
+            className="text-4xl sm:text-5xl md:text-7xl font-bold leading-[1.05] mb-6 max-w-4xl mx-auto"
+            style={{ fontFamily: 'var(--font-outfit), sans-serif' }}
+          >
+            Your VIP Ticket to{' '}
+            <span
+              className="bg-clip-text text-transparent"
+              style={{
+                backgroundImage: 'linear-gradient(135deg, #00E5A0, #00BCD4, #FF3366)',
+              }}
+            >
+              Paradise
+            </span>
+          </h1>
+
+          <p className="text-lg sm:text-xl text-white/60 max-w-2xl mx-auto mb-10 leading-relaxed">
+            5 days. 4 nights. All-inclusive luxury in Mexico.
+            <br className="hidden sm:block" />
+            Starting at just{' '}
+            <span className="text-[#00E5A0] font-semibold">${PAYMENT_CONFIG.monthlyPrice}/month</span>.
+          </p>
+
+          <button
+            onClick={() => document.getElementById('signup-form')?.scrollIntoView({ behavior: 'smooth' })}
+            className={`inline-flex items-center gap-2 px-10 py-4 rounded-full font-semibold text-lg text-black transition-all duration-300 hover:scale-105 ${
+              animateGlow ? 'shadow-[0_0_30px_rgba(0,229,160,0.4)]' : 'shadow-[0_0_15px_rgba(0,229,160,0.2)]'
+            }`}
+            style={{ backgroundColor: '#00E5A0' }}
+          >
+            Claim Your Certificate
+            <ArrowRight className="w-5 h-5" />
+          </button>
+
+          <p className="mt-4 text-xs text-white/30">
+            {certificatesLeft} of 50 certificates remaining this month
+          </p>
+        </div>
+      </section>
+
+      {/* Glassmorphic feature cards */}
+      <section className="relative z-10 py-16 sm:py-24">
+        <div className="max-w-6xl mx-auto px-4">
+          <h2
+            className="text-3xl sm:text-4xl font-bold text-center mb-4"
+            style={{ fontFamily: 'var(--font-outfit), sans-serif' }}
+          >
+            Everything Included
+          </h2>
+          <p className="text-center text-white/40 max-w-lg mx-auto mb-12">
+            No hidden fees. No surprises. Just paradise.
+          </p>
+
+          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
+            {VIP_PERKS.map((perk) => (
+              <div
+                key={perk.text}
+                className="rounded-2xl p-6 border border-white/10 backdrop-blur-xl transition-all duration-300 hover:border-[#00E5A0]/30 hover:bg-white/[0.06] group"
+                style={{ backgroundColor: 'rgba(255,255,255,0.03)' }}
+              >
+                <div className="flex items-center gap-4">
+                  <div className="w-10 h-10 rounded-xl flex items-center justify-center bg-[#00E5A0]/10 group-hover:bg-[#00E5A0]/20 transition-colors">
+                    <perk.icon className="w-5 h-5 text-[#00E5A0]" />
+                  </div>
+                  <p className="text-sm text-white/80 font-medium">{perk.text}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Destinations with glass cards */}
+      <section className="relative z-10 py-16 sm:py-24">
+        <div className="max-w-6xl mx-auto px-4">
+          <h2
+            className="text-3xl sm:text-4xl font-bold text-center mb-4"
+            style={{ fontFamily: 'var(--font-outfit), sans-serif' }}
+          >
+            Choose Your Destination
+          </h2>
+          <p className="text-center text-white/40 max-w-lg mx-auto mb-12">
+            Four world-class Mexican destinations. The choice is yours.
+          </p>
+
+          <div className="grid sm:grid-cols-2 gap-4">
+            {DESTINATIONS.map((dest) => (
+              <div
+                key={dest.name}
+                className="group relative rounded-2xl overflow-hidden border border-white/10 hover:border-[#00E5A0]/30 transition-all duration-500"
+              >
+                <img
+                  src={DESTINATION_IMAGES[dest.name] || dest.images[0]}
+                  alt={dest.name}
+                  className="w-full aspect-[16/10] object-cover group-hover:scale-105 transition-transform duration-700 opacity-70 group-hover:opacity-90"
+                />
+                <div className="absolute inset-0 bg-gradient-to-t from-[#0A0A0F] via-[#0A0A0F]/40 to-transparent" />
+                <div className="absolute bottom-0 left-0 right-0 p-6">
+                  <h3
+                    className="text-xl font-bold text-white mb-1"
+                    style={{ fontFamily: 'var(--font-outfit), sans-serif' }}
+                  >
+                    {dest.name}
+                  </h3>
+                  <p className="text-white/50 text-sm">{dest.tagline}</p>
+                </div>
+                {/* Glow line on hover */}
+                <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-gradient-to-r from-[#00E5A0] to-[#FF3366] opacity-0 group-hover:opacity-100 transition-opacity" />
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* VIP Ticket-style pricing */}
+      <section id="signup-form" className="relative z-10 py-16 sm:py-24">
+        <div className="max-w-lg mx-auto px-4">
+          <div
+            className="rounded-3xl overflow-hidden border border-white/10"
+            style={{ backgroundColor: 'rgba(255,255,255,0.04)', backdropFilter: 'blur(20px)' }}
+          >
+            {/* Ticket header */}
+            <div className="relative px-8 pt-8 pb-6 text-center border-b border-dashed border-white/10">
+              <div className="inline-flex items-center gap-2 text-xs font-semibold tracking-[0.2em] uppercase text-[#00E5A0] mb-4">
+                <Sparkles className="w-4 h-4" />
+                VIP CERTIFICATE
+              </div>
+              <h2
+                className="text-3xl sm:text-4xl font-bold mb-2"
+                style={{ fontFamily: 'var(--font-outfit), sans-serif' }}
+              >
+                Mexico Paradise
+              </h2>
+              <p className="text-white/50 text-sm">5 Days / 4 Nights All-Inclusive</p>
+
+              {/* Ticket perforation dots */}
+              <div className="absolute -left-3 bottom-0 translate-y-1/2 w-6 h-6 rounded-full bg-[#0A0A0F]" />
+              <div className="absolute -right-3 bottom-0 translate-y-1/2 w-6 h-6 rounded-full bg-[#0A0A0F]" />
+            </div>
+
+            {/* Ticket body */}
+            <div className="px-8 py-8">
+              <div className="text-center mb-6">
+                <div className="flex items-baseline justify-center gap-1">
+                  <span className="text-sm text-white/40 line-through">$1,500+</span>
+                  <span className="ml-2 text-xs bg-[#FF3366]/20 text-[#FF3366] px-2 py-0.5 rounded-full font-medium">
+                    73% OFF
+                  </span>
+                </div>
+                <div className="mt-2 flex items-baseline justify-center gap-1">
+                  <span
+                    className="text-5xl font-bold text-[#00E5A0]"
+                    style={{ fontFamily: 'var(--font-outfit), sans-serif' }}
+                  >
+                    ${PAYMENT_CONFIG.monthlyPrice}
+                  </span>
+                  <span className="text-white/50">/mo</span>
+                </div>
+                <p className="text-white/30 text-xs mt-1">
+                  for {PAYMENT_CONFIG.totalMonths} months &middot; or ${PAYMENT_CONFIG.oneTimePrice} one-time
+                </p>
+              </div>
+
+              <ul className="space-y-3 mb-8">
+                {[
+                  'Luxury all-inclusive resort stay',
+                  'Choice of 4 destinations',
+                  'All meals & unlimited drinks',
+                  'Flexible dates within 18 months',
+                  '30-day money-back guarantee',
+                ].map((item) => (
+                  <li key={item} className="flex items-center gap-3 text-sm text-white/70">
+                    <Check className="w-4 h-4 text-[#00E5A0] shrink-0" />
+                    {item}
+                  </li>
+                ))}
+              </ul>
+
+              <PayNowForm
+                variant="dark"
+                accentColor="#00E5A0"
+                buttonText="Claim My VIP Certificate"
+                showToggle={true}
+              />
+
+              <div className="mt-6 text-center">
+                <p className="text-xs text-[#FF3366] font-medium">
+                  Only {certificatesLeft} certificates left at this price
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <TrustBadges variant="compact" className="mt-8" textColor="#666" />
+        </div>
+      </section>
+
+      {/* Testimonials */}
+      <section className="relative z-10 py-16 sm:py-24">
+        <div className="max-w-6xl mx-auto px-4">
+          <h2
+            className="text-3xl sm:text-4xl font-bold text-center mb-12"
+            style={{ fontFamily: 'var(--font-outfit), sans-serif' }}
+          >
+            What VIP Travelers Say
+          </h2>
+
+          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
+            {TESTIMONIALS.slice(0, 6).map((t, i) => (
+              <TestimonialCard
+                key={i}
+                quote={t.quote}
+                name={t.name}
+                location={t.location}
+                photo={t.photo}
+                variant="dark"
+                className="border border-white/10 backdrop-blur-sm"
+              />
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* FAQ */}
+      <section className="relative z-10 py-16 sm:py-24">
+        <div className="max-w-3xl mx-auto px-4">
+          <InfluencerBuzz variant="dark" />
+
+          <h2
+            className="text-3xl sm:text-4xl font-bold text-center mb-12"
+            style={{ fontFamily: 'var(--font-outfit), sans-serif' }}
+          >
+            Questions? We&apos;ve Got Answers
+          </h2>
+
+          <FAQAccordion items={FAQ_ITEMS} variant="dark" />
+        </div>
+      </section>
+
+      {/* Bottom CTA */}
+      <section className="relative z-10 py-16 sm:py-20 text-center border-t border-white/5">
+        <div className="max-w-2xl mx-auto px-4">
+          <p className="text-[#FF3366] text-sm font-semibold mb-4">
+            {certificatesLeft} certificates remaining
+          </p>
+          <h2
+            className="text-3xl sm:text-4xl font-bold mb-4"
+            style={{ fontFamily: 'var(--font-outfit), sans-serif' }}
+          >
+            Don&apos;t Miss Out
+          </h2>
+          <p className="text-white/40 mb-8 max-w-lg mx-auto">
+            This exclusive VIP rate won&apos;t last. Secure your certificate today.
+          </p>
+          <button
+            onClick={() => document.getElementById('signup-form')?.scrollIntoView({ behavior: 'smooth' })}
+            className="inline-flex items-center gap-2 px-10 py-4 rounded-full font-semibold text-lg text-black transition-transform hover:scale-105"
+            style={{ backgroundColor: '#00E5A0' }}
+          >
+            Claim My Certificate
+            <ArrowRight className="w-5 h-5" />
+          </button>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="relative z-10 py-8 text-center text-xs text-white/20 border-t border-white/5">
+        <div className="max-w-4xl mx-auto px-4">
+          <p className="mb-2">Mexico Paradise Vacations &copy; {new Date().getFullYear()}. All rights reserved.</p>
+          <p>
+            Your certificate is valid for 18 months from purchase date.
+            A 90-minute resort presentation is required to receive the discounted rate.
+          </p>
+        </div>
+      </footer>
+
+      {/* Social Proof Ticker */}
+      <SocialProofTicker bgColor="#1a1a2e" textColor="#FFFFFF" />
+
+      {/* Sticky Mobile CTA */}
+      <StickyMobileCTA accentColor="#00E5A0" buttonText="Get VIP Access" />
+    </div>
+  )
+}
diff --git a/src/components/lp/pages/LP03PassportStamp.tsx b/src/components/lp/pages/LP03PassportStamp.tsx
new file mode 100644
index 0000000..a2e8ce8
--- /dev/null
+++ b/src/components/lp/pages/LP03PassportStamp.tsx
@@ -0,0 +1,511 @@
+'use client'
+
+import { useState } from 'react'
+import { Plane, MapPin, Stamp, Star, Calendar, Shield, Utensils, Palmtree, ArrowRight, Check } from 'lucide-react'
+import PayNowForm from '@/components/lp/shared/PayNowForm'
+import TestimonialCard from '@/components/lp/shared/TestimonialCard'
+import FAQAccordion from '@/components/lp/shared/FAQAccordion'
+import TrustBadges from '@/components/lp/shared/TrustBadges'
+import StickyMobileCTA from '@/components/lp/shared/StickyMobileCTA'
+import UrgencyBanner from '@/components/lp/shared/UrgencyBanner'
+import InfluencerBuzz from '@/components/lp/shared/InfluencerBuzz'
+import { PAYMENT_CONFIG, TESTIMONIALS, DESTINATIONS, FAQ_ITEMS } from '@/app/lp/_config/types'
+
+const HERO_IMAGE = '/images/cdn/photo-1436491865332-7a61a109db05.jpg'
+
+const DESTINATION_IMAGES: Record<string, string> = {
+  'Cancun': '/images/cdn/photo-1510097467424-192d713fd8b2.jpg',
+  'Cabo San Lucas': '/images/cdn/photo-1580415200778-625cb1890ab5.jpg',
+  'Riviera Maya': '/images/cdn/photo-1518638150340-f706e86654de.jpg',
+  'Puerto Vallarta': '/images/cdn/photo-1585793753011-397e6e4668d6.jpg',
+}
+
+const STAMP_DATES = ['MAR 2026', 'APR 2026', 'JUN 2026', 'SEP 2026']
+
+const JOURNEY_STEPS = [
+  { icon: Stamp, title: 'Claim Your Certificate', description: 'Secure your spot with a simple payment plan' },
+  { icon: Calendar, title: 'Pick Your Dates', description: 'Choose any available week within 18 months' },
+  { icon: MapPin, title: 'Choose Your Destination', description: 'Cancun, Cabo, Riviera Maya, or Puerto Vallarta' },
+  { icon: Plane, title: 'Pack Your Bags', description: 'Show up and enjoy — everything else is covered' },
+]
+
+export default function LP03PassportStamp() {
+  const [activeDestination, setActiveDestination] = useState(0)
+
+  return (
+    <div
+      className="min-h-screen"
+      style={{
+        fontFamily: 'var(--font-lato), system-ui, sans-serif',
+        backgroundColor: '#F5F0E8',
+      }}
+    >
+      <UrgencyBanner variant="combined" />
+
+      {/* Paper texture overlay */}
+      <div
+        className="fixed inset-0 pointer-events-none z-0 opacity-[0.03]"
+        style={{
+          backgroundImage: `url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E")`,
+        }}
+      />
+
+      {/* Top banner */}
+      <div className="relative z-10 bg-[#1B4332] text-center py-2.5 px-4 pt-20">
+        <p className="text-sm text-white/90 tracking-wide">
+          <span style={{ fontFamily: 'var(--font-caveat), cursive' }} className="text-lg text-[#C41E3A]">
+            Adventure awaits!
+          </span>
+          <span className="mx-2 text-white/30">|</span>
+          Your next passport stamp is just ${PAYMENT_CONFIG.monthlyPrice}/month away
+        </p>
+      </div>
+
+      {/* Hero */}
+      <section className="relative z-10 overflow-hidden">
+        <div className="absolute inset-0">
+          <img
+            src={HERO_IMAGE}
+            alt="Vintage map and travel accessories"
+            className="w-full h-full object-cover opacity-20"
+          />
+          <div className="absolute inset-0 bg-gradient-to-b from-[#F5F0E8]/40 via-[#F5F0E8]/60 to-[#F5F0E8]" />
+        </div>
+
+        <div className="relative max-w-5xl mx-auto px-4 pt-16 pb-16 sm:pt-24 sm:pb-24">
+          <div className="max-w-3xl">
+            {/* Vintage airplane doodle */}
+            <div className="mb-6 flex items-center gap-3">
+              <Plane className="w-6 h-6 text-[#1B4332] -rotate-12" />
+              <div className="h-px flex-1 max-w-24 border-t-2 border-dashed border-[#1B4332]/30" />
+            </div>
+
+            <p
+              className="text-lg sm:text-xl mb-3 text-[#C41E3A]"
+              style={{ fontFamily: 'var(--font-caveat), cursive' }}
+            >
+              Mexico Paradise Vacations presents...
+            </p>
+
+            <h1
+              className="text-4xl sm:text-5xl md:text-6xl leading-[1.1] mb-6"
+              style={{ fontFamily: 'var(--font-libre), serif', color: '#1B4332' }}
+            >
+              Your Next Stamp
+              <span className="block">Awaits</span>
+            </h1>
+
+            <p className="text-lg text-gray-600 max-w-xl mb-4 leading-relaxed">
+              5 days and 4 nights at an all-inclusive Mexican resort. Four breathtaking destinations to choose from.
+            </p>
+
+            <p className="text-lg mb-8">
+              <span className="text-gray-500">Starting at just</span>{' '}
+              <span className="text-2xl font-bold" style={{ color: '#1B4332' }}>
+                ${PAYMENT_CONFIG.monthlyPrice}/month
+              </span>{' '}
+              <span className="text-gray-400 text-sm">for {PAYMENT_CONFIG.totalMonths} months</span>
+            </p>
+
+            <button
+              onClick={() => document.getElementById('signup-form')?.scrollIntoView({ behavior: 'smooth' })}
+              className="inline-flex items-center gap-2 px-8 py-4 rounded-lg text-white font-semibold text-lg transition-transform hover:scale-105"
+              style={{ backgroundColor: '#C41E3A' }}
+            >
+              Start My Journey
+              <ArrowRight className="w-5 h-5" />
+            </button>
+          </div>
+        </div>
+      </section>
+
+      {/* Journey steps */}
+      <section className="relative z-10 py-16 sm:py-24">
+        <div className="max-w-5xl mx-auto px-4">
+          <p
+            className="text-xl text-center mb-3 text-[#C41E3A]"
+            style={{ fontFamily: 'var(--font-caveat), cursive' }}
+          >
+            It&apos;s easier than you think
+          </p>
+          <h2
+            className="text-3xl sm:text-4xl text-center mb-12"
+            style={{ fontFamily: 'var(--font-libre), serif', color: '#1B4332' }}
+          >
+            Your Journey in 4 Simple Steps
+          </h2>
+
+          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
+            {JOURNEY_STEPS.map((step, i) => (
+              <div
+                key={step.title}
+                className="relative bg-white rounded-xl p-6 border border-[#1B4332]/10 shadow-sm"
+              >
+                {/* Step number stamp */}
+                <div
+                  className="absolute -top-3 -right-3 w-10 h-10 rounded-full flex items-center justify-center text-white font-bold text-sm border-2 border-white shadow-md -rotate-12"
+                  style={{ backgroundColor: '#C41E3A' }}
+                >
+                  {i + 1}
+                </div>
+                <step.icon className="w-8 h-8 mb-4" style={{ color: '#1B4332' }} />
+                <h3
+                  className="text-lg font-semibold mb-2"
+                  style={{ fontFamily: 'var(--font-libre), serif', color: '#1B4332' }}
+                >
+                  {step.title}
+                </h3>
+                <p className="text-sm text-gray-500 leading-relaxed">{step.description}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Passport-style destination cards */}
+      <section className="relative z-10 py-16 sm:py-24 bg-[#1B4332]">
+        <div className="max-w-6xl mx-auto px-4">
+          <p
+            className="text-xl text-center mb-3 text-[#C41E3A]"
+            style={{ fontFamily: 'var(--font-caveat), cursive' }}
+          >
+            Pick your paradise
+          </p>
+          <h2
+            className="text-3xl sm:text-4xl text-center mb-12 text-white"
+            style={{ fontFamily: 'var(--font-libre), serif' }}
+          >
+            Your Passport Destinations
+          </h2>
+
+          {/* Destination tabs */}
+          <div className="flex flex-wrap justify-center gap-3 mb-8">
+            {DESTINATIONS.map((dest, i) => (
+              <button
+                key={dest.name}
+                onClick={() => setActiveDestination(i)}
+                className={`px-5 py-2.5 rounded-full text-sm font-medium transition-all ${
+                  activeDestination === i
+                    ? 'bg-[#C41E3A] text-white shadow-lg'
+                    : 'bg-white/10 text-white/70 hover:bg-white/20'
+                }`}
+              >
+                {dest.name}
+              </button>
+            ))}
+          </div>
+
+          {/* Active destination - passport page style */}
+          <div className="max-w-2xl mx-auto">
+            <div
+              className="rounded-2xl overflow-hidden border-2 border-[#D4A574]/30 shadow-xl"
+              style={{ backgroundColor: '#F5F0E8' }}
+            >
+              {/* Passport page header */}
+              <div className="px-6 py-3 border-b border-dashed border-[#1B4332]/20 flex items-center justify-between">
+                <span className="text-xs tracking-[0.15em] uppercase text-[#1B4332]/60 font-medium">
+                  MEXICO ENTRY STAMP
+                </span>
+                <span
+                  className="text-sm text-[#1B4332]/40"
+                  style={{ fontFamily: 'var(--font-caveat), cursive' }}
+                >
+                  {STAMP_DATES[activeDestination]}
+                </span>
+              </div>
+
+              {/* Destination image with stamp overlay */}
+              <div className="relative">
+                <img
+                  src={DESTINATION_IMAGES[DESTINATIONS[activeDestination].name] || DESTINATIONS[activeDestination].images[0]}
+                  alt={DESTINATIONS[activeDestination].name}
+                  className="w-full aspect-[16/10] object-cover"
+                />
+                {/* Stamp overlay */}
+                <div className="absolute top-4 right-4 w-24 h-24 sm:w-28 sm:h-28 rounded-full border-4 border-[#C41E3A]/60 flex flex-col items-center justify-center rotate-[-15deg] bg-[#C41E3A]/10 backdrop-blur-sm">
+                  <span className="text-[#C41E3A] text-[10px] tracking-[0.15em] font-bold uppercase">Approved</span>
+                  <span className="text-[#C41E3A] text-xs font-bold mt-0.5">{STAMP_DATES[activeDestination]}</span>
+                  <span className="text-[#C41E3A] text-[9px] mt-0.5">MEXICO</span>
+                </div>
+              </div>
+
+              {/* Destination info */}
+              <div className="p-6">
+                <h3
+                  className="text-2xl sm:text-3xl mb-2"
+                  style={{ fontFamily: 'var(--font-libre), serif', color: '#1B4332' }}
+                >
+                  {DESTINATIONS[activeDestination].name}
+                </h3>
+                <p className="text-gray-500 mb-4">{DESTINATIONS[activeDestination].tagline}</p>
+
+                <div className="grid grid-cols-2 gap-3">
+                  {['All-Inclusive Resort', 'Ocean Views', 'Gourmet Dining', 'Beach Access'].map((feature) => (
+                    <div key={feature} className="flex items-center gap-2 text-sm text-gray-600">
+                      <Check className="w-4 h-4 text-[#1B4332]" />
+                      {feature}
+                    </div>
+                  ))}
+                </div>
+
+                {/* Handwritten note */}
+                <div className="mt-4 pt-4 border-t border-dashed border-gray-300">
+                  <p
+                    className="text-lg text-[#1B4332]/60 -rotate-1"
+                    style={{ fontFamily: 'var(--font-caveat), cursive' }}
+                  >
+                    &ldquo;Can&apos;t wait to visit! This is going to be amazing!&rdquo;
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* What's included — journal style */}
+      <section className="relative z-10 py-16 sm:py-24">
+        <div className="max-w-4xl mx-auto px-4">
+          <p
+            className="text-xl text-center mb-3 text-[#C41E3A]"
+            style={{ fontFamily: 'var(--font-caveat), cursive' }}
+          >
+            Everything you need for the perfect trip
+          </p>
+          <h2
+            className="text-3xl sm:text-4xl text-center mb-12"
+            style={{ fontFamily: 'var(--font-libre), serif', color: '#1B4332' }}
+          >
+            What&apos;s In Your Certificate
+          </h2>
+
+          <div className="grid sm:grid-cols-2 gap-6">
+            {[
+              { icon: Palmtree, title: '5 Days & 4 Nights', desc: 'Luxurious resort accommodations with stunning views', note: 'Check-in is a breeze!' },
+              { icon: Utensils, title: 'All Meals & Drinks', desc: 'Breakfast, lunch, dinner, and unlimited beverages', note: 'The food is incredible' },
+              { icon: MapPin, title: '4 Destinations', desc: 'Cancun, Cabo, Riviera Maya, or Puerto Vallarta', note: 'Hard to choose just one!' },
+              { icon: Shield, title: '30-Day Guarantee', desc: 'Full refund if you change your mind within 30 days', note: 'Totally risk-free' },
+            ].map((item) => (
+              <div
+                key={item.title}
+                className="bg-white rounded-xl p-6 border border-[#1B4332]/10 shadow-sm relative"
+              >
+                <item.icon className="w-7 h-7 mb-3" style={{ color: '#1B4332' }} />
+                <h3
+                  className="text-lg font-semibold mb-1"
+                  style={{ fontFamily: 'var(--font-libre), serif', color: '#1B4332' }}
+                >
+                  {item.title}
+                </h3>
+                <p className="text-sm text-gray-500 leading-relaxed mb-3">{item.desc}</p>
+                <p
+                  className="text-sm text-[#C41E3A]/70 -rotate-2"
+                  style={{ fontFamily: 'var(--font-caveat), cursive' }}
+                >
+                  ^ {item.note}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Pricing & Form */}
+      <section id="signup-form" className="relative z-10 py-16 sm:py-24" style={{ backgroundColor: '#EDE8DE' }}>
+        <div className="max-w-5xl mx-auto px-4">
+          <p
+            className="text-xl text-center mb-3 text-[#C41E3A]"
+            style={{ fontFamily: 'var(--font-caveat), cursive' }}
+          >
+            Ready to go?
+          </p>
+          <h2
+            className="text-3xl sm:text-4xl text-center mb-12"
+            style={{ fontFamily: 'var(--font-libre), serif', color: '#1B4332' }}
+          >
+            Claim Your Vacation Certificate
+          </h2>
+
+          <div className="grid md:grid-cols-2 gap-8 items-start">
+            {/* Pricing card */}
+            <div className="bg-white rounded-2xl p-8 border border-[#1B4332]/10 shadow-sm">
+              <div className="flex items-center gap-3 mb-6">
+                <div className="w-12 h-12 rounded-full bg-[#1B4332] flex items-center justify-center">
+                  <Stamp className="w-6 h-6 text-white" />
+                </div>
+                <div>
+                  <h3
+                    className="text-xl font-semibold"
+                    style={{ fontFamily: 'var(--font-libre), serif', color: '#1B4332' }}
+                  >
+                    Travel Certificate
+                  </h3>
+                  <p className="text-sm text-gray-500">5 days / 4 nights all-inclusive</p>
+                </div>
+              </div>
+
+              <div className="mb-6">
+                <div className="flex items-baseline gap-2 mb-1">
+                  <span className="line-through text-gray-400 text-sm">$1,500+</span>
+                  <span className="text-xs bg-[#C41E3A]/10 text-[#C41E3A] px-2 py-0.5 rounded-full font-medium">
+                    Save over $1,100
+                  </span>
+                </div>
+                <div className="flex items-baseline gap-1">
+                  <span
+                    className="text-4xl font-bold"
+                    style={{ fontFamily: 'var(--font-libre), serif', color: '#1B4332' }}
+                  >
+                    ${PAYMENT_CONFIG.monthlyPrice}
+                  </span>
+                  <span className="text-gray-500">/month</span>
+                </div>
+                <p className="text-sm text-gray-400 mt-1">
+                  for {PAYMENT_CONFIG.totalMonths} months &middot; or ${PAYMENT_CONFIG.oneTimePrice} one-time
+                </p>
+              </div>
+
+              <ul className="space-y-3 mb-6">
+                {[
+                  'Luxury all-inclusive resort',
+                  'All meals and unlimited drinks',
+                  'Your choice of 4 destinations',
+                  'Bring your partner for free',
+                  '18 months to book your dates',
+                  '30-day money-back guarantee',
+                ].map((item) => (
+                  <li key={item} className="flex items-center gap-3 text-sm text-gray-600">
+                    <Check className="w-4 h-4 text-[#1B4332] shrink-0" />
+                    {item}
+                  </li>
+                ))}
+              </ul>
+
+              <p
+                className="text-center text-lg text-[#1B4332]/50 -rotate-1"
+                style={{ fontFamily: 'var(--font-caveat), cursive' }}
+              >
+                The best decision you&apos;ll make this year!
+              </p>
+            </div>
+
+            {/* Form */}
+            <div className="bg-white rounded-2xl p-8 border border-[#1B4332]/10 shadow-sm">
+              <h3
+                className="text-xl font-semibold mb-1"
+                style={{ fontFamily: 'var(--font-libre), serif', color: '#1B4332' }}
+              >
+                Start Your Adventure
+              </h3>
+              <p className="text-sm text-gray-500 mb-6">Fill in your details and we&apos;ll get you booked</p>
+
+              <PayNowForm
+                accentColor="#C41E3A"
+                buttonText="Get My Passport Stamp!"
+                showToggle={true}
+              />
+
+              <TrustBadges variant="compact" className="mt-6" textColor="#9CA3AF" />
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Testimonials */}
+      <section className="relative z-10 py-16 sm:py-24">
+        <div className="max-w-6xl mx-auto px-4">
+          <p
+            className="text-xl text-center mb-3 text-[#C41E3A]"
+            style={{ fontFamily: 'var(--font-caveat), cursive' }}
+          >
+            From our travelers&apos; journals
+          </p>
+          <h2
+            className="text-3xl sm:text-4xl text-center mb-12"
+            style={{ fontFamily: 'var(--font-libre), serif', color: '#1B4332' }}
+          >
+            Traveler Stories
+          </h2>
+
+          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
+            {TESTIMONIALS.slice(0, 6).map((t, i) => (
+              <TestimonialCard
+                key={i}
+                quote={t.quote}
+                name={t.name}
+                location={t.location}
+                photo={t.photo}
+                className="bg-white border border-[#1B4332]/10"
+              />
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* FAQ */}
+      <section className="relative z-10 py-16 sm:py-24" style={{ backgroundColor: '#EDE8DE' }}>
+        <div className="max-w-3xl mx-auto px-4">
+          <p
+            className="text-xl text-center mb-3 text-[#C41E3A]"
+            style={{ fontFamily: 'var(--font-caveat), cursive' }}
+          >
+            Before you pack...
+          </p>
+          <InfluencerBuzz />
+
+          <h2
+            className="text-3xl sm:text-4xl text-center mb-12"
+            style={{ fontFamily: 'var(--font-libre), serif', color: '#1B4332' }}
+          >
+            Frequently Asked Questions
+          </h2>
+
+          <div className="bg-white rounded-2xl p-6 sm:p-8 border border-[#1B4332]/10">
+            <FAQAccordion items={FAQ_ITEMS} />
+          </div>
+        </div>
+      </section>
+
+      {/* Final CTA */}
+      <section className="relative z-10 py-16 sm:py-20 text-center bg-[#1B4332]">
+        <div className="max-w-2xl mx-auto px-4">
+          <Plane className="w-10 h-10 text-white/40 mx-auto mb-4 -rotate-12" />
+          <h2
+            className="text-3xl sm:text-4xl text-white mb-3"
+            style={{ fontFamily: 'var(--font-libre), serif' }}
+          >
+            The adventure begins now
+          </h2>
+          <p
+            className="text-xl text-[#C41E3A] mb-8"
+            style={{ fontFamily: 'var(--font-caveat), cursive' }}
+          >
+            Your passport is waiting for a new stamp!
+          </p>
+          <button
+            onClick={() => document.getElementById('signup-form')?.scrollIntoView({ behavior: 'smooth' })}
+            className="inline-flex items-center gap-2 px-8 py-4 rounded-lg text-white font-semibold text-lg transition-transform hover:scale-105"
+            style={{ backgroundColor: '#C41E3A' }}
+          >
+            Claim My Certificate
+            <ArrowRight className="w-5 h-5" />
+          </button>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="relative z-10 py-8 text-center text-xs text-gray-400 bg-[#0d2318]">
+        <div className="max-w-4xl mx-auto px-4">
+          <p className="mb-2">Mexico Paradise Vacations &copy; {new Date().getFullYear()}. All rights reserved.</p>
+          <p>
+            Your certificate is valid for 18 months from purchase date.
+            A 90-minute resort presentation is required to receive the discounted rate.
+          </p>
+        </div>
+      </footer>
+
+      {/* Sticky Mobile CTA */}
+      <StickyMobileCTA accentColor="#C41E3A" buttonText="Start My Journey" />
+    </div>
+  )
+}
diff --git a/src/components/lp/pages/LP04CrystalClear.tsx b/src/components/lp/pages/LP04CrystalClear.tsx
new file mode 100644
index 0000000..f1940f4
--- /dev/null
+++ b/src/components/lp/pages/LP04CrystalClear.tsx
@@ -0,0 +1,187 @@
+'use client'
+
+import { ArrowRight, Check } from 'lucide-react'
+import PayNowForm from '@/components/lp/shared/PayNowForm'
+import FAQAccordion from '@/components/lp/shared/FAQAccordion'
+import TrustBadges from '@/components/lp/shared/TrustBadges'
+import StickyMobileCTA from '@/components/lp/shared/StickyMobileCTA'
+import UrgencyBanner from '@/components/lp/shared/UrgencyBanner'
+import InfluencerBuzz from '@/components/lp/shared/InfluencerBuzz'
+import { PAYMENT_CONFIG, TESTIMONIALS, FAQ_ITEMS } from '@/app/lp/_config/types'
+
+const BEACH_IMAGE = '/images/cdn/photo-1507525428034-b723cf961d3e.jpg'
+
+export default function LP04CrystalClear() {
+  return (
+    <div
+      className="min-h-screen bg-white"
+      style={{ fontFamily: 'var(--font-dm-sans), system-ui, sans-serif' }}
+    >
+      <UrgencyBanner variant="combined" />
+
+      {/* Hero — radically minimal */}
+      <section className="min-h-[90vh] flex flex-col items-center justify-center px-4 py-20 pt-20">
+        <div className="text-center max-w-3xl mx-auto">
+          <p className="text-sm tracking-[0.2em] uppercase text-gray-400 mb-6">
+            Mexico Paradise Vacations
+          </p>
+
+          <h1 className="text-4xl sm:text-5xl md:text-7xl lg:text-8xl font-bold leading-[1.05] tracking-tight text-gray-900 mb-8">
+            5 days. 4 nights.
+            <br />
+            <span style={{ color: '#00BCD4' }}>$39/month.</span>
+            <br />
+            That&apos;s it.
+          </h1>
+
+          <p className="text-lg sm:text-xl text-gray-400 max-w-md mx-auto mb-12 leading-relaxed">
+            All-inclusive Mexico vacation certificate.
+            Four destinations. Zero hidden fees.
+          </p>
+
+          <button
+            onClick={() => document.getElementById('signup-form')?.scrollIntoView({ behavior: 'smooth' })}
+            className="inline-flex items-center gap-2 px-8 py-4 rounded-full text-white font-semibold text-lg transition-all hover:scale-105 hover:shadow-lg"
+            style={{ backgroundColor: '#FF6B35' }}
+          >
+            Get Started
+            <ArrowRight className="w-5 h-5" />
+          </button>
+        </div>
+      </section>
+
+      {/* Single beach image — full bleed */}
+      <section className="relative">
+        <img
+          src={BEACH_IMAGE}
+          alt="Crystal clear turquoise water and white sand beach"
+          className="w-full h-64 sm:h-80 md:h-[28rem] object-cover"
+        />
+      </section>
+
+      {/* Simple value props */}
+      <section className="py-20 sm:py-28">
+        <div className="max-w-2xl mx-auto px-4">
+          <div className="space-y-6">
+            {[
+              'Luxury all-inclusive resort stay',
+              'Cancun, Cabo, Riviera Maya, or Puerto Vallarta',
+              'All meals and unlimited drinks',
+              'Bring your partner at no extra cost',
+              'Book anytime within 18 months',
+              '30-day money-back guarantee',
+            ].map((item) => (
+              <div key={item} className="flex items-center gap-4">
+                <Check className="w-5 h-5 shrink-0" style={{ color: '#00BCD4' }} />
+                <span className="text-gray-700 text-lg">{item}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Pricing — dead simple */}
+      <section className="py-12 sm:py-16">
+        <div className="max-w-md mx-auto px-4 text-center">
+          <div className="flex items-center justify-center gap-4 mb-2">
+            <span className="text-gray-400 line-through text-lg">$1,500+</span>
+            <span className="text-xs font-medium px-3 py-1 rounded-full bg-green-50 text-green-600">
+              Save $1,100+
+            </span>
+          </div>
+          <div className="flex items-baseline justify-center gap-2 mb-1">
+            <span className="text-6xl sm:text-7xl font-bold tracking-tight" style={{ color: '#FF6B35' }}>
+              ${PAYMENT_CONFIG.monthlyPrice}
+            </span>
+            <span className="text-gray-400 text-xl">/mo</span>
+          </div>
+          <p className="text-gray-400 text-sm">
+            for {PAYMENT_CONFIG.totalMonths} months &middot; or ${PAYMENT_CONFIG.oneTimePrice} one-time
+          </p>
+        </div>
+      </section>
+
+      {/* Email-first form — minimal */}
+      <section id="signup-form" className="py-16 sm:py-24">
+        <div className="max-w-md mx-auto px-4">
+          <h2 className="text-2xl sm:text-3xl font-bold text-center text-gray-900 mb-2">
+            Ready?
+          </h2>
+          <p className="text-center text-gray-400 mb-8">
+            Takes less than 2 minutes.
+          </p>
+
+          <PayNowForm
+            variant="minimal"
+            accentColor="#FF6B35"
+            buttonText="Claim My Vacation"
+            showToggle={true}
+          />
+
+          <TrustBadges variant="compact" className="mt-8" textColor="#C0C0C0" />
+        </div>
+      </section>
+
+      {/* One-line testimonial */}
+      <section className="py-16 sm:py-24 border-t border-gray-100">
+        <div className="max-w-2xl mx-auto px-4 text-center">
+          <p className="text-xl sm:text-2xl text-gray-600 leading-relaxed italic mb-4">
+            &ldquo;{TESTIMONIALS[0].quote}&rdquo;
+          </p>
+          <div className="flex items-center justify-center gap-3">
+            {TESTIMONIALS[0].photo && (
+              <img
+                src={TESTIMONIALS[0].photo}
+                alt={TESTIMONIALS[0].name}
+                className="w-8 h-8 rounded-full object-cover"
+              />
+            )}
+            <span className="text-sm text-gray-400">
+              {TESTIMONIALS[0].name}, {TESTIMONIALS[0].location}
+            </span>
+          </div>
+        </div>
+      </section>
+
+      <InfluencerBuzz />
+
+      {/* Tiny FAQ */}
+      <section className="py-16 sm:py-24 border-t border-gray-100">
+        <div className="max-w-xl mx-auto px-4">
+          <h2 className="text-xl font-bold text-center text-gray-900 mb-8">FAQ</h2>
+          <FAQAccordion items={FAQ_ITEMS.slice(0, 4)} />
+        </div>
+      </section>
+
+      {/* Final CTA — ultra minimal */}
+      <section className="py-20 sm:py-28 text-center border-t border-gray-100">
+        <div className="max-w-lg mx-auto px-4">
+          <h2 className="text-3xl sm:text-4xl font-bold text-gray-900 mb-4">
+            Paradise is waiting.
+          </h2>
+          <button
+            onClick={() => document.getElementById('signup-form')?.scrollIntoView({ behavior: 'smooth' })}
+            className="inline-flex items-center gap-2 px-8 py-4 rounded-full text-white font-semibold transition-all hover:scale-105"
+            style={{ backgroundColor: '#FF6B35' }}
+          >
+            Get Started
+            <ArrowRight className="w-5 h-5" />
+          </button>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="py-8 text-center text-xs text-gray-300 border-t border-gray-100">
+        <div className="max-w-4xl mx-auto px-4">
+          <p className="mb-1">Mexico Paradise Vacations &copy; {new Date().getFullYear()}</p>
+          <p>
+            Certificate valid 18 months. 90-minute resort presentation required.
+          </p>
+        </div>
+      </footer>
+
+      {/* Sticky Mobile CTA */}
+      <StickyMobileCTA accentColor="#FF6B35" buttonText="Get Started" />
+    </div>
+  )
+}
diff --git a/src/components/lp/pages/LP05Fiesta.tsx b/src/components/lp/pages/LP05Fiesta.tsx
new file mode 100644
index 0000000..b447afe
--- /dev/null
+++ b/src/components/lp/pages/LP05Fiesta.tsx
@@ -0,0 +1,538 @@
+'use client'
+
+import { useState, useRef, useCallback } from 'react'
+import { Sun, Utensils, Waves, Palmtree, Music, Star, MapPin, ArrowRight, Check, PartyPopper, Heart, Sparkles } from 'lucide-react'
+import PayNowForm from '@/components/lp/shared/PayNowForm'
+import TestimonialCard from '@/components/lp/shared/TestimonialCard'
+import FAQAccordion from '@/components/lp/shared/FAQAccordion'
+import TrustBadges from '@/components/lp/shared/TrustBadges'
+import StickyMobileCTA from '@/components/lp/shared/StickyMobileCTA'
+import UrgencyBanner from '@/components/lp/shared/UrgencyBanner'
+import InfluencerBuzz from '@/components/lp/shared/InfluencerBuzz'
+import { PAYMENT_CONFIG, TESTIMONIALS, DESTINATIONS, FAQ_ITEMS } from '@/app/lp/_config/types'
+
+const HERO_IMAGE = '/images/cdn/photo-1518105779142-d975f22f1b0a.jpg'
+const BEACH_FIESTA = '/images/cdn/photo-1519046904884-53103b34b206.jpg'
+
+const DESTINATION_IMAGES: Record<string, string> = {
+  'Cancun': '/images/cdn/photo-1510097467424-192d713fd8b2.jpg',
+  'Cabo San Lucas': '/images/cdn/photo-1580415200778-625cb1890ab5.jpg',
+  'Riviera Maya': '/images/cdn/photo-1518638150340-f706e86654de.jpg',
+  'Puerto Vallarta': '/images/cdn/photo-1585793753011-397e6e4668d6.jpg',
+}
+
+const INCLUDED_FEATURES = [
+  { icon: Sun, title: '5 Days & 4 Nights', desc: 'Wake up to ocean views every morning', color: '#FFD600' },
+  { icon: Utensils, title: 'All Meals & Drinks', desc: 'Gourmet dining and unlimited beverages', color: '#FF1744' },
+  { icon: Waves, title: 'Beach & Pool Access', desc: 'Pristine beaches and sparkling pools', color: '#00BFA5' },
+  { icon: Palmtree, title: 'Resort Amenities', desc: 'Spa, fitness center, entertainment', color: '#FFD600' },
+  { icon: Heart, title: 'Whole Family Covered', desc: '2 adults + 2 kids under 12', color: '#FF1744' },
+  { icon: Music, title: 'Entertainment', desc: 'Live music, shows, and nightlife', color: '#00BFA5' },
+]
+
+// SVG Papel Picado Banner Component
+function PapelPicadoBanner({ className = '' }: { className?: string }) {
+  const colors = ['#FF1744', '#FFD600', '#00BFA5', '#FF6D00', '#AA00FF', '#FF1744', '#FFD600', '#00BFA5']
+
+  return (
+    <div className={`w-full overflow-hidden ${className}`}>
+      <svg viewBox="0 0 1200 80" className="w-full h-auto" preserveAspectRatio="none">
+        {/* String line */}
+        <path d="M0,5 Q150,15 300,5 Q450,15 600,5 Q750,15 900,5 Q1050,15 1200,5" fill="none" stroke="#8B4513" strokeWidth="2" />
+        {/* Papel picado flags */}
+        {colors.map((color, i) => {
+          const x = i * 150
+          const w = 140
+          return (
+            <g key={i}>
+              {/* Flag body */}
+              <path
+                d={`M${x + 5},5 L${x + 5},65 Q${x + 15},55 ${x + 25},65 Q${x + 35},55 ${x + 45},65 Q${x + 55},55 ${x + 65},65 Q${x + 75},55 ${x + 85},65 Q${x + 95},55 ${x + 105},65 Q${x + 115},55 ${x + 125},65 L${x + w - 5},65 L${x + w - 5},5 Z`}
+                fill={color}
+                opacity="0.85"
+              />
+              {/* Decorative cutouts */}
+              <circle cx={x + 70} cy={30} r={8} fill="white" opacity="0.3" />
+              <rect x={x + 30} y={20} width={6} height={6} fill="white" opacity="0.3" transform={`rotate(45 ${x + 33} 23)`} />
+              <rect x={x + 100} y={20} width={6} height={6} fill="white" opacity="0.3" transform={`rotate(45 ${x + 103} 23)`} />
+              <circle cx={x + 50} cy={45} r={4} fill="white" opacity="0.2" />
+              <circle cx={x + 90} cy={45} r={4} fill="white" opacity="0.2" />
+              {/* Heart cutout */}
+              <path
+                d={`M${x + 70},38 C${x + 70},35 ${x + 65},33 ${x + 65},36 C${x + 65},39 ${x + 70},43 ${x + 70},43 C${x + 70},43 ${x + 75},39 ${x + 75},36 C${x + 75},33 ${x + 70},35 ${x + 70},38 Z`}
+                fill="white"
+                opacity="0.25"
+              />
+            </g>
+          )
+        })}
+      </svg>
+    </div>
+  )
+}
+
+// Confetti particle
+interface Particle {
+  id: number
+  x: number
+  y: number
+  color: string
+  size: number
+  rotation: number
+}
+
+export default function LP05Fiesta() {
+  const [confettiParticles, setConfettiParticles] = useState<Particle[]>([])
+  const confettiIdRef = useRef(0)
+
+  const spawnConfetti = useCallback((e: React.MouseEvent) => {
+    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect()
+    const cx = rect.left + rect.width / 2
+    const cy = rect.top + rect.height / 2
+    const colors = ['#FF1744', '#FFD600', '#00BFA5', '#FF6D00', '#AA00FF', '#2979FF']
+
+    const newParticles: Particle[] = Array.from({ length: 20 }, () => {
+      confettiIdRef.current += 1
+      return {
+        id: confettiIdRef.current,
+        x: cx + (Math.random() - 0.5) * 200,
+        y: cy + (Math.random() - 0.5) * 150 - 50,
+        color: colors[Math.floor(Math.random() * colors.length)],
+        size: 6 + Math.random() * 6,
+        rotation: Math.random() * 360,
+      }
+    })
+
+    setConfettiParticles(prev => [...prev, ...newParticles])
+
+    // Clean up after animation
+    setTimeout(() => {
+      setConfettiParticles(prev => prev.filter(p => !newParticles.find(np => np.id === p.id)))
+    }, 1200)
+  }, [])
+
+  return (
+    <div
+      className="min-h-screen relative overflow-x-hidden"
+      style={{
+        fontFamily: 'var(--font-nunito), system-ui, sans-serif',
+        backgroundColor: '#FFFDF7',
+      }}
+    >
+      <UrgencyBanner variant="combined" />
+
+      {/* Confetti particles */}
+      <div className="fixed inset-0 pointer-events-none z-[60]">
+        {confettiParticles.map((p) => (
+          <div
+            key={p.id}
+            className="absolute animate-[fall_1.2s_ease-out_forwards]"
+            style={{
+              left: p.x,
+              top: p.y,
+              width: p.size,
+              height: p.size,
+              backgroundColor: p.color,
+              transform: `rotate(${p.rotation}deg)`,
+              borderRadius: Math.random() > 0.5 ? '50%' : '2px',
+              opacity: 0.9,
+            }}
+          />
+        ))}
+      </div>
+
+      {/* CSS for confetti animation */}
+      <style jsx>{`
+        @keyframes fall {
+          0% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
+          100% { opacity: 0; transform: translateY(120px) rotate(720deg) scale(0.3); }
+        }
+      `}</style>
+
+      {/* Papel Picado Banner */}
+      <PapelPicadoBanner className="relative z-10 pt-20" />
+
+      {/* Hero */}
+      <section className="relative z-10 overflow-hidden">
+        <div className="absolute inset-0">
+          <img
+            src={HERO_IMAGE}
+            alt="Colorful Mexican beach scene"
+            className="w-full h-full object-cover"
+          />
+          <div className="absolute inset-0 bg-gradient-to-b from-black/40 via-black/30 to-[#FFFDF7]" />
+        </div>
+
+        <div className="relative max-w-5xl mx-auto px-4 pt-12 pb-24 sm:pt-20 sm:pb-32 text-center">
+          <div className="inline-flex items-center gap-2 bg-white/90 rounded-full px-5 py-2 text-sm font-semibold mb-8 shadow-md">
+            <PartyPopper className="w-4 h-4" style={{ color: '#FF1744' }} />
+            <span style={{ color: '#FF1744' }}>Mexico Paradise Vacations</span>
+          </div>
+
+          <h1
+            className="text-4xl sm:text-5xl md:text-7xl font-extrabold leading-[1.05] mb-6 text-white drop-shadow-lg"
+            style={{ fontFamily: 'var(--font-archivo), sans-serif' }}
+          >
+            Life is a{' '}
+            <span
+              className="relative inline-block"
+              style={{
+                color: '#FFD600',
+                textShadow: '2px 2px 0 #FF1744, 4px 4px 0 rgba(0,0,0,0.1)',
+              }}
+            >
+              Fiesta!
+              <Sparkles className="absolute -top-4 -right-6 w-6 h-6 text-[#FFD600] animate-pulse" />
+            </span>
+          </h1>
+
+          <p className="text-lg sm:text-xl text-white/90 max-w-xl mx-auto mb-8 leading-relaxed drop-shadow">
+            5 days of all-inclusive paradise in Mexico.
+            Four amazing destinations. Starting at just{' '}
+            <strong className="text-[#FFD600]">${PAYMENT_CONFIG.monthlyPrice}/month</strong>!
+          </p>
+
+          <button
+            onClick={(e) => {
+              spawnConfetti(e)
+              document.getElementById('signup-form')?.scrollIntoView({ behavior: 'smooth' })
+            }}
+            onMouseEnter={spawnConfetti}
+            className="inline-flex items-center gap-2 px-10 py-4 rounded-full text-white font-bold text-lg transition-all hover:scale-110 hover:shadow-xl shadow-lg"
+            style={{ backgroundColor: '#FF1744' }}
+          >
+            <PartyPopper className="w-5 h-5" />
+            Join the Fiesta!
+          </button>
+        </div>
+      </section>
+
+      {/* Colorful wave divider */}
+      <div className="relative z-10 -mt-1">
+        <svg viewBox="0 0 1200 60" className="w-full h-auto" preserveAspectRatio="none">
+          <path d="M0,30 Q200,60 400,30 Q600,0 800,30 Q1000,60 1200,30 L1200,60 L0,60 Z" fill="#FFD600" opacity="0.3" />
+          <path d="M0,35 Q200,55 400,35 Q600,15 800,35 Q1000,55 1200,35 L1200,60 L0,60 Z" fill="#FF1744" opacity="0.15" />
+          <path d="M0,45 Q200,55 400,45 Q600,35 800,45 Q1000,55 1200,45 L1200,60 L0,60 Z" fill="#00BFA5" opacity="0.1" />
+        </svg>
+      </div>
+
+      {/* What's Included */}
+      <section className="relative z-10 py-16 sm:py-24">
+        <div className="max-w-6xl mx-auto px-4">
+          <div className="text-center mb-12">
+            <p className="text-sm tracking-[0.15em] uppercase font-bold mb-2" style={{ color: '#FF1744' }}>
+              Todo Incluido
+            </p>
+            <h2
+              className="text-3xl sm:text-4xl md:text-5xl font-extrabold"
+              style={{ fontFamily: 'var(--font-archivo), sans-serif', color: '#1a1a1a' }}
+            >
+              What&apos;s Included
+            </h2>
+          </div>
+
+          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
+            {INCLUDED_FEATURES.map((feature) => (
+              <div
+                key={feature.title}
+                className="bg-white rounded-2xl p-6 border-2 shadow-sm hover:shadow-lg transition-all hover:-translate-y-1 group"
+                style={{ borderColor: `${feature.color}30` }}
+              >
+                <div
+                  className="w-12 h-12 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform"
+                  style={{ backgroundColor: `${feature.color}15` }}
+                >
+                  <feature.icon className="w-6 h-6" style={{ color: feature.color }} />
+                </div>
+                <h3
+                  className="text-lg font-bold mb-1"
+                  style={{ fontFamily: 'var(--font-archivo), sans-serif' }}
+                >
+                  {feature.title}
+                </h3>
+                <p className="text-sm text-gray-500 leading-relaxed">{feature.desc}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Destination cards */}
+      <section className="relative z-10 py-16 sm:py-24" style={{ backgroundColor: '#FFF8E1' }}>
+        {/* Top papel picado */}
+        <PapelPicadoBanner className="absolute top-0 left-0 right-0 opacity-50" />
+
+        <div className="max-w-6xl mx-auto px-4 pt-8">
+          <div className="text-center mb-12">
+            <p className="text-sm tracking-[0.15em] uppercase font-bold mb-2" style={{ color: '#00BFA5' }}>
+              Destinos
+            </p>
+            <h2
+              className="text-3xl sm:text-4xl md:text-5xl font-extrabold"
+              style={{ fontFamily: 'var(--font-archivo), sans-serif', color: '#1a1a1a' }}
+            >
+              Choose Your Adventure
+            </h2>
+          </div>
+
+          <div className="grid sm:grid-cols-2 gap-6">
+            {DESTINATIONS.map((dest, i) => {
+              const borderColors = ['#FF1744', '#FFD600', '#00BFA5', '#FF6D00']
+              return (
+                <div
+                  key={dest.name}
+                  className="group relative rounded-2xl overflow-hidden border-4 shadow-md hover:shadow-xl transition-all hover:-translate-y-1"
+                  style={{ borderColor: borderColors[i] }}
+                >
+                  <img
+                    src={DESTINATION_IMAGES[dest.name] || dest.images[0]}
+                    alt={dest.name}
+                    className="w-full aspect-[4/3] object-cover group-hover:scale-105 transition-transform duration-500"
+                  />
+                  <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent" />
+                  <div className="absolute bottom-0 left-0 right-0 p-6">
+                    <div className="flex items-center gap-2 mb-1">
+                      <MapPin className="w-4 h-4 text-[#FFD600]" />
+                      <span className="text-xs tracking-widest uppercase text-white/60">Mexico</span>
+                    </div>
+                    <h3
+                      className="text-2xl sm:text-3xl font-extrabold text-white"
+                      style={{ fontFamily: 'var(--font-archivo), sans-serif' }}
+                    >
+                      {dest.name}
+                    </h3>
+                    <p className="text-white/70 text-sm">{dest.tagline}</p>
+                  </div>
+                  {/* Colored corner accent */}
+                  <div
+                    className="absolute top-0 right-0 w-16 h-16"
+                    style={{
+                      background: `linear-gradient(135deg, ${borderColors[i]}60 50%, transparent 50%)`,
+                    }}
+                  />
+                </div>
+              )
+            })}
+          </div>
+        </div>
+      </section>
+
+      {/* Beach divider */}
+      <section className="relative z-10 h-48 sm:h-64 overflow-hidden">
+        <img
+          src={BEACH_FIESTA}
+          alt="Beautiful beach in Mexico"
+          className="w-full h-full object-cover"
+        />
+        <div className="absolute inset-0 flex items-center justify-center bg-black/30">
+          <h2
+            className="text-3xl sm:text-4xl font-extrabold text-white text-center px-4 drop-shadow-lg"
+            style={{ fontFamily: 'var(--font-archivo), sans-serif' }}
+          >
+            <span style={{ color: '#FFD600' }}>Vamos</span> a la playa!
+          </h2>
+        </div>
+      </section>
+
+      {/* Pricing & Form */}
+      <section id="signup-form" className="relative z-10 py-16 sm:py-24">
+        <div className="max-w-5xl mx-auto px-4">
+          <div className="text-center mb-12">
+            <p className="text-sm tracking-[0.15em] uppercase font-bold mb-2" style={{ color: '#FF1744' }}>
+              Precios Increibles
+            </p>
+            <h2
+              className="text-3xl sm:text-4xl md:text-5xl font-extrabold"
+              style={{ fontFamily: 'var(--font-archivo), sans-serif', color: '#1a1a1a' }}
+            >
+              Grab Your Certificate
+            </h2>
+          </div>
+
+          <div className="grid md:grid-cols-2 gap-8 items-start">
+            {/* Pricing card — fiesta style */}
+            <div className="bg-white rounded-2xl overflow-hidden border-2 shadow-lg" style={{ borderColor: '#FFD600' }}>
+              {/* Festive header */}
+              <div
+                className="px-8 py-6 text-center"
+                style={{ background: 'linear-gradient(135deg, #FF1744, #FF6D00)' }}
+              >
+                <PartyPopper className="w-8 h-8 text-white/80 mx-auto mb-2" />
+                <h3
+                  className="text-2xl font-extrabold text-white"
+                  style={{ fontFamily: 'var(--font-archivo), sans-serif' }}
+                >
+                  Fiesta Package
+                </h3>
+                <p className="text-white/80 text-sm">5 Days / 4 Nights All-Inclusive</p>
+              </div>
+
+              <div className="p-8">
+                <div className="text-center mb-6">
+                  <div className="flex items-center justify-center gap-3 mb-2">
+                    <span className="line-through text-gray-400">$1,500+</span>
+                    <span className="text-xs font-bold px-3 py-1 rounded-full text-white" style={{ backgroundColor: '#00BFA5' }}>
+                      SAVE $1,100+
+                    </span>
+                  </div>
+                  <div className="flex items-baseline justify-center gap-1">
+                    <span
+                      className="text-5xl font-extrabold"
+                      style={{ fontFamily: 'var(--font-archivo), sans-serif', color: '#FF1744' }}
+                    >
+                      ${PAYMENT_CONFIG.monthlyPrice}
+                    </span>
+                    <span className="text-gray-500 text-lg">/mo</span>
+                  </div>
+                  <p className="text-sm text-gray-400 mt-1">
+                    for {PAYMENT_CONFIG.totalMonths} months &middot; or ${PAYMENT_CONFIG.oneTimePrice} one-time
+                  </p>
+                </div>
+
+                <ul className="space-y-3">
+                  {[
+                    'Luxury all-inclusive resort stay',
+                    'All meals and unlimited drinks',
+                    'Choice of 4 destinations',
+                    'Bring your partner free',
+                    '18 months to book dates',
+                    '30-day money-back guarantee',
+                  ].map((item) => (
+                    <li key={item} className="flex items-center gap-3 text-sm text-gray-700">
+                      <Check className="w-4 h-4 shrink-0" style={{ color: '#00BFA5' }} />
+                      {item}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </div>
+
+            {/* Form */}
+            <div className="bg-white rounded-2xl p-8 border-2 shadow-lg" style={{ borderColor: '#00BFA5' }}>
+              <h3
+                className="text-xl font-bold mb-1"
+                style={{ fontFamily: 'var(--font-archivo), sans-serif' }}
+              >
+                Let&apos;s Get This Party Started!
+              </h3>
+              <p className="text-sm text-gray-500 mb-6">
+                Secure your certificate and start planning your fiesta
+              </p>
+
+              <PayNowForm
+                accentColor="#FF1744"
+                buttonText="Join the Fiesta!"
+                showToggle={true}
+              />
+
+              <TrustBadges variant="compact" className="mt-6" textColor="#9CA3AF" />
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Testimonials */}
+      <section className="relative z-10 py-16 sm:py-24" style={{ backgroundColor: '#FFF8E1' }}>
+        <div className="max-w-6xl mx-auto px-4">
+          <div className="text-center mb-12">
+            <p className="text-sm tracking-[0.15em] uppercase font-bold mb-2" style={{ color: '#00BFA5' }}>
+              Testimonios
+            </p>
+            <h2
+              className="text-3xl sm:text-4xl font-extrabold"
+              style={{ fontFamily: 'var(--font-archivo), sans-serif', color: '#1a1a1a' }}
+            >
+              Happy Travelers
+            </h2>
+          </div>
+
+          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
+            {TESTIMONIALS.slice(0, 6).map((t, i) => {
+              const borderColors = ['#FF1744', '#FFD600', '#00BFA5']
+              return (
+                <TestimonialCard
+                  key={i}
+                  quote={t.quote}
+                  name={t.name}
+                  location={t.location}
+                  photo={t.photo}
+                  className={`bg-white border-2 shadow-sm`}
+                  // Using inline style for border color since it varies
+                />
+              )
+            })}
+          </div>
+        </div>
+      </section>
+
+      {/* FAQ */}
+      <section className="relative z-10 py-16 sm:py-24">
+        <div className="max-w-3xl mx-auto px-4">
+          <div className="text-center mb-12">
+            <p className="text-sm tracking-[0.15em] uppercase font-bold mb-2" style={{ color: '#FF1744' }}>
+              Preguntas Frecuentes
+            </p>
+            <InfluencerBuzz />
+
+            <h2
+              className="text-3xl sm:text-4xl font-extrabold"
+              style={{ fontFamily: 'var(--font-archivo), sans-serif', color: '#1a1a1a' }}
+            >
+              Got Questions?
+            </h2>
+          </div>
+
+          <div className="bg-white rounded-2xl p-6 sm:p-8 border-2 shadow-sm" style={{ borderColor: '#FFD600' }}>
+            <FAQAccordion items={FAQ_ITEMS} />
+          </div>
+        </div>
+      </section>
+
+      {/* Final CTA */}
+      <section
+        className="relative z-10 py-16 sm:py-20 text-center overflow-hidden"
+        style={{ background: 'linear-gradient(135deg, #FF1744, #FF6D00, #FFD600)' }}
+      >
+        <PapelPicadoBanner className="absolute top-0 left-0 right-0 opacity-30" />
+        <div className="relative max-w-2xl mx-auto px-4">
+          <PartyPopper className="w-12 h-12 text-white/80 mx-auto mb-4" />
+          <h2
+            className="text-3xl sm:text-4xl font-extrabold text-white mb-4 drop-shadow"
+            style={{ fontFamily: 'var(--font-archivo), sans-serif' }}
+          >
+            The fiesta starts now!
+          </h2>
+          <p className="text-white/80 mb-8 max-w-lg mx-auto">
+            Don&apos;t wait — grab your all-inclusive Mexico vacation certificate today.
+          </p>
+          <button
+            onClick={(e) => {
+              spawnConfetti(e)
+              document.getElementById('signup-form')?.scrollIntoView({ behavior: 'smooth' })
+            }}
+            onMouseEnter={spawnConfetti}
+            className="inline-flex items-center gap-2 px-10 py-4 rounded-full font-bold text-lg transition-all hover:scale-110 shadow-xl bg-white"
+            style={{ color: '#FF1744' }}
+          >
+            <PartyPopper className="w-5 h-5" />
+            Claim My Certificate!
+          </button>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="relative z-10 py-8 text-center text-xs text-gray-400 bg-gray-900">
+        <div className="max-w-4xl mx-auto px-4">
+          <p className="mb-2">Mexico Paradise Vacations &copy; {new Date().getFullYear()}. All rights reserved.</p>
+          <p>
+            Your certificate is valid for 18 months from purchase date.
+            A 90-minute resort presentation is required to receive the discounted rate.
+          </p>
+        </div>
+      </footer>
+
+      {/* Sticky Mobile CTA */}
+      <StickyMobileCTA accentColor="#FF1744" buttonText="Join the Fiesta!" />
+    </div>
+  )
+}
diff --git a/src/components/lp/pages/LP06TheCloser.tsx b/src/components/lp/pages/LP06TheCloser.tsx
new file mode 100644
index 0000000..aed4ba7
--- /dev/null
+++ b/src/components/lp/pages/LP06TheCloser.tsx
@@ -0,0 +1,654 @@
+'use client'
+
+import { useState, useEffect, useRef } from 'react'
+import { Check, ArrowRight, AlertTriangle, Gift, Star, Shield, Zap, Clock, ChevronDown } from 'lucide-react'
+import PayNowForm from '@/components/lp/shared/PayNowForm'
+import ComparisonTable from '@/components/lp/shared/ComparisonTable'
+import TestimonialCard from '@/components/lp/shared/TestimonialCard'
+import CountdownTimer from '@/components/lp/shared/CountdownTimer'
+import FAQAccordion from '@/components/lp/shared/FAQAccordion'
+import TrustBadges from '@/components/lp/shared/TrustBadges'
+import StickyMobileCTA from '@/components/lp/shared/StickyMobileCTA'
+import UrgencyBanner from '@/components/lp/shared/UrgencyBanner'
+import InfluencerBuzz from '@/components/lp/shared/InfluencerBuzz'
+import { PAYMENT_CONFIG, TESTIMONIALS, DESTINATIONS, FAQ_ITEMS } from '@/app/lp/_config/types'
+
+const RED = '#B71C1C'
+const YELLOW = '#FFD54F'
+const GREEN = '#4CAF50'
+
+const scrollToForm = () => {
+  document.getElementById('signup-form')?.scrollIntoView({ behavior: 'smooth' })
+}
+
+function CTAButton({ text = 'YES! I Want My Vacation Certificate!' }: { text?: string }) {
+  return (
+    <button
+      onClick={scrollToForm}
+      className="w-full max-w-xl mx-auto block py-5 px-8 rounded-lg text-white text-xl font-bold uppercase tracking-wide shadow-lg hover:shadow-xl transition-all hover:scale-[1.02] animate-pulse"
+      style={{ backgroundColor: RED, fontFamily: 'var(--font-oswald)' }}
+    >
+      {text}
+      <ArrowRight className="inline-block ml-2 w-6 h-6" />
+    </button>
+  )
+}
+
+function YellowHighlight({ children }: { children: React.ReactNode }) {
+  return (
+    <span
+      className="px-1 py-0.5 inline"
+      style={{ backgroundColor: YELLOW, color: '#1a1a1a' }}
+    >
+      {children}
+    </span>
+  )
+}
+
+function SavingsCounter() {
+  const [scrollPercent, setScrollPercent] = useState(0)
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const scrollTop = window.scrollY
+      const docHeight = document.documentElement.scrollHeight - window.innerHeight
+      setScrollPercent(Math.min(1, scrollTop / docHeight))
+    }
+    window.addEventListener('scroll', handleScroll, { passive: true })
+    return () => window.removeEventListener('scroll', handleScroll)
+  }, [])
+
+  const savings = Math.floor(scrollPercent * 2601)
+
+  return (
+    <div className="fixed top-4 right-4 z-50 rounded-lg shadow-xl px-4 py-3 hidden lg:block" style={{ backgroundColor: RED }}>
+      <p className="text-white text-xs font-semibold uppercase tracking-wider" style={{ fontFamily: 'var(--font-oswald)' }}>
+        Your savings
+      </p>
+      <p className="text-2xl font-bold" style={{ color: YELLOW, fontFamily: 'var(--font-oswald)' }}>
+        ${savings.toLocaleString()}
+      </p>
+    </div>
+  )
+}
+
+function ValueItem({ item, value }: { item: string; value: string }) {
+  return (
+    <div className="flex items-start gap-3 py-3 border-b border-gray-200">
+      <Check className="w-6 h-6 shrink-0 mt-0.5" style={{ color: GREEN }} />
+      <div className="flex-1">
+        <span className="font-semibold text-gray-900" style={{ fontFamily: 'var(--font-roboto)' }}>{item}</span>
+      </div>
+      <span className="text-right font-bold text-lg whitespace-nowrap" style={{ color: RED, fontFamily: 'var(--font-oswald)' }}>
+        {value}
+      </span>
+    </div>
+  )
+}
+
+export default function LP06TheCloser() {
+  return (
+    <div className="min-h-screen bg-white" style={{ fontFamily: 'var(--font-roboto)' }}>
+      <UrgencyBanner variant="combined" />
+
+      <SavingsCounter />
+
+      {/* Attention Bar */}
+      <div className="w-full py-2 text-center text-white text-sm font-bold tracking-wider pt-20" style={{ backgroundColor: RED, fontFamily: 'var(--font-oswald)' }}>
+        <AlertTriangle className="inline-block w-4 h-4 mr-2" />
+        WARNING: THIS OFFER EXPIRES TONIGHT AT MIDNIGHT
+        <AlertTriangle className="inline-block w-4 h-4 ml-2" />
+      </div>
+
+      {/* Hero Section */}
+      <section className="relative py-16 px-4">
+        <div className="max-w-3xl mx-auto text-center">
+          <p className="text-sm uppercase tracking-widest text-gray-500 mb-4" style={{ fontFamily: 'var(--font-oswald)' }}>
+            Attention: Anyone who wants an incredible Mexico vacation without the incredible price tag
+          </p>
+          <h1
+            className="text-4xl sm:text-5xl md:text-6xl font-bold leading-tight mb-6"
+            style={{ fontFamily: 'var(--font-oswald)', color: '#1a1a1a' }}
+          >
+            How To Get A <YellowHighlight>5-Day All-Inclusive</YellowHighlight> Mexico Vacation
+            For Just <YellowHighlight>$1.30 Per Day</YellowHighlight>
+          </h1>
+          <p className="text-xl text-gray-600 mb-4 leading-relaxed">
+            (That&apos;s less than your morning coffee... for a vacation your friends will think cost you <strong>$3,000+</strong>)
+          </p>
+          <div className="flex items-center justify-center gap-2 mb-8">
+            {Array.from({ length: 5 }).map((_, i) => (
+              <Star key={i} className="w-5 h-5 fill-yellow-400 text-yellow-400" />
+            ))}
+            <span className="text-sm text-gray-500 ml-2">Rated 4.8/5 by 2,847 happy travelers</span>
+          </div>
+          <img
+            src="/images/cdn/photo-1512100356356-de1b84283e18.jpg"
+            alt="Stunning beachfront resort in Mexico"
+            className="w-full rounded-xl shadow-2xl mb-8"
+          />
+          <CTAButton />
+        </div>
+      </section>
+
+      {/* Problem Section */}
+      <section className="py-16 px-4 bg-gray-50">
+        <div className="max-w-3xl mx-auto">
+          <h2
+            className="text-3xl sm:text-4xl font-bold mb-8 text-center"
+            style={{ fontFamily: 'var(--font-oswald)', color: RED }}
+          >
+            Let Me Guess... You&apos;re TIRED Of Watching Everyone Else
+            Take Amazing Vacations While You Stay Home?
+          </h2>
+          <div className="space-y-6 text-lg text-gray-700 leading-relaxed">
+            <p>
+              You scroll through Instagram and see your friends lounging on pristine beaches,
+              sipping cocktails at infinity pools, and eating at five-star restaurants...
+            </p>
+            <p>
+              And you think: <YellowHighlight>&quot;Must be nice to afford that.&quot;</YellowHighlight>
+            </p>
+            <p>
+              Because every time you look at booking a real vacation, the numbers make your stomach turn.
+              <strong> $3,000... $4,000... $5,000+</strong> for just a few days of paradise.
+            </p>
+            <p>
+              You&apos;ve tried the budget travel hacks. The &quot;secret&quot; websites. The off-season deals.
+              And you STILL end up paying way more than you planned.
+            </p>
+            <p className="text-xl font-bold text-center py-4" style={{ color: RED }}>
+              But what if it didn&apos;t have to be that way?
+            </p>
+          </div>
+        </div>
+      </section>
+
+      {/* Solution Section */}
+      <section className="py-16 px-4">
+        <div className="max-w-3xl mx-auto">
+          <h2
+            className="text-3xl sm:text-4xl font-bold mb-8 text-center"
+            style={{ fontFamily: 'var(--font-oswald)' }}
+          >
+            Introducing The <YellowHighlight>Mexico Paradise Vacation Certificate</YellowHighlight>
+          </h2>
+          <p className="text-lg text-gray-700 leading-relaxed mb-6 text-center">
+            A revolutionary way to experience a <strong>5-day, 4-night all-inclusive Mexico vacation</strong> at
+            a fraction of the cost of traditional booking.
+          </p>
+          <div className="grid md:grid-cols-2 gap-4 mb-8">
+            {DESTINATIONS.map((dest) => (
+              <div key={dest.name} className="relative rounded-xl overflow-hidden group cursor-pointer">
+                <img
+                  src={dest.images[0]}
+                  alt={dest.name}
+                  className="w-full h-48 object-cover transition-transform group-hover:scale-105"
+                />
+                <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent" />
+                <div className="absolute bottom-0 left-0 right-0 p-4">
+                  <h3 className="text-xl font-bold text-white" style={{ fontFamily: 'var(--font-oswald)' }}>
+                    {dest.name}
+                  </h3>
+                  <p className="text-white/80 text-sm">{dest.tagline}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+          <p className="text-center text-lg text-gray-600 mb-6">
+            Choose ANY of these world-class destinations. <YellowHighlight>Your certificate, your choice.</YellowHighlight>
+          </p>
+          <CTAButton text="I Want To Choose My Paradise!" />
+        </div>
+      </section>
+
+      {/* Value Stack Section */}
+      <section className="py-16 px-4" style={{ backgroundColor: '#FFF8E1' }}>
+        <div className="max-w-3xl mx-auto">
+          <h2
+            className="text-3xl sm:text-4xl font-bold mb-4 text-center"
+            style={{ fontFamily: 'var(--font-oswald)', color: RED }}
+          >
+            Here&apos;s EVERYTHING You&apos;re Getting Today
+          </h2>
+          <p className="text-center text-gray-600 mb-8 text-lg">
+            (When you add it all up, the value is absolutely <strong>INSANE</strong>)
+          </p>
+
+          <div className="bg-white rounded-xl shadow-lg p-6 sm:p-8 mb-8">
+            <ValueItem item="5-Day / 4-Night Resort Stay" value="$1,200" />
+            <ValueItem item="All-Inclusive Meals & Drinks" value="$800" />
+            <ValueItem item="Resort Amenities & Activities" value="$400" />
+            <ValueItem item="Beach & Pool Access" value="$200" />
+            <ValueItem item="Airport Transfer Coordination" value="$150" />
+            <ValueItem item="24/7 Concierge Support" value="$100" />
+            <ValueItem item="Flexible Date Selection (18 months)" value="$200" />
+            <ValueItem item="Bring A Guest FREE" value="$500" />
+
+            <div className="mt-6 pt-6 border-t-2 border-dashed border-gray-300">
+              <div className="flex justify-between items-center mb-4">
+                <span className="text-xl font-bold" style={{ fontFamily: 'var(--font-oswald)' }}>
+                  Total Retail Value:
+                </span>
+                <span className="text-2xl font-bold line-through text-gray-400" style={{ fontFamily: 'var(--font-oswald)' }}>
+                  $3,550
+                </span>
+              </div>
+              <div className="flex justify-between items-center">
+                <span className="text-xl font-bold" style={{ fontFamily: 'var(--font-oswald)', color: GREEN }}>
+                  YOUR Price Today:
+                </span>
+                <span className="text-3xl font-bold" style={{ fontFamily: 'var(--font-oswald)', color: GREEN }}>
+                  Just ${PAYMENT_CONFIG.monthlyPrice}/mo
+                </span>
+              </div>
+              <p className="text-center text-sm text-gray-500 mt-2">
+                Or ${PAYMENT_CONFIG.oneTimePrice} one-time payment (best value!)
+              </p>
+            </div>
+          </div>
+
+          <div className="text-center mb-8">
+            <p className="text-2xl font-bold mb-2" style={{ fontFamily: 'var(--font-oswald)', color: RED }}>
+              That&apos;s a <YellowHighlight>$3,000+ value</YellowHighlight> for just <YellowHighlight>$1.30 per day!</YellowHighlight>
+            </p>
+            <p className="text-gray-600">
+              Less than a cup of coffee. Less than a candy bar. Less than a single song on iTunes.
+            </p>
+          </div>
+
+          <CTAButton text="Lock In This Price Before It's Gone!" />
+        </div>
+      </section>
+
+      {/* Social Proof - Testimonials */}
+      <section className="py-16 px-4">
+        <div className="max-w-4xl mx-auto">
+          <h2
+            className="text-3xl sm:text-4xl font-bold mb-4 text-center"
+            style={{ fontFamily: 'var(--font-oswald)' }}
+          >
+            Don&apos;t Just Take Our Word For It...
+          </h2>
+          <p className="text-center text-gray-500 mb-10 text-lg">
+            <YellowHighlight>Real people. Real vacations. Real savings.</YellowHighlight>
+          </p>
+          <div className="grid md:grid-cols-2 gap-6 mb-8">
+            {TESTIMONIALS.slice(0, 4).map((t, i) => (
+              <TestimonialCard
+                key={i}
+                quote={t.quote}
+                name={t.name}
+                location={t.location}
+                photo={t.photo}
+              />
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Comparison Table */}
+      <section className="py-16 px-4 bg-gray-50">
+        <div className="max-w-4xl mx-auto">
+          <h2
+            className="text-3xl sm:text-4xl font-bold mb-4 text-center"
+            style={{ fontFamily: 'var(--font-oswald)', color: RED }}
+          >
+            See How We Stack Up Against The Competition
+          </h2>
+          <p className="text-center text-gray-600 mb-8 text-lg">
+            The difference is <YellowHighlight>crystal clear</YellowHighlight>
+          </p>
+          <div className="bg-white rounded-xl shadow-lg p-6">
+            <ComparisonTable accentColor={GREEN} />
+          </div>
+          <div className="mt-8">
+            <CTAButton text="I'm Ready To Save Thousands!" />
+          </div>
+        </div>
+      </section>
+
+      {/* What If Section */}
+      <section className="py-16 px-4">
+        <div className="max-w-3xl mx-auto text-center">
+          <h2
+            className="text-3xl sm:text-4xl font-bold mb-8"
+            style={{ fontFamily: 'var(--font-oswald)' }}
+          >
+            Imagine This...
+          </h2>
+          <div className="space-y-6 text-lg text-gray-700 text-left leading-relaxed">
+            <p>
+              Picture yourself <strong>6 months from now</strong>...
+            </p>
+            <p>
+              You wake up in a luxurious resort room. The sound of waves crashing on the beach
+              filters through the open balcony doors. You stretch, smile, and walk out to see the
+              <YellowHighlight> turquoise Caribbean stretching out before you.</YellowHighlight>
+            </p>
+            <p>
+              You head down to breakfast. Eggs benedict, fresh tropical fruit, bottomless mimosas.
+              <strong> All included.</strong>
+            </p>
+            <p>
+              Your afternoon? Maybe the infinity pool. Maybe snorkeling. Maybe a couples massage at the spa.
+              <strong> Whatever you want.</strong>
+            </p>
+            <p>
+              And the best part? While everyone around you paid $3,000+ for the same experience,
+              <YellowHighlight> you paid less than $400.</YellowHighlight>
+            </p>
+            <p className="text-center text-xl font-bold py-4" style={{ color: GREEN }}>
+              That&apos;s the power of the Mexico Paradise Vacation Certificate.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      {/* More Testimonials */}
+      <section className="py-16 px-4 bg-gray-50">
+        <div className="max-w-4xl mx-auto">
+          <h2
+            className="text-3xl font-bold mb-8 text-center"
+            style={{ fontFamily: 'var(--font-oswald)' }}
+          >
+            Even MORE Happy Travelers...
+          </h2>
+          <div className="grid md:grid-cols-2 gap-6 mb-8">
+            {TESTIMONIALS.slice(4).map((t, i) => (
+              <TestimonialCard
+                key={i}
+                quote={t.quote}
+                name={t.name}
+                location={t.location}
+                photo={t.photo}
+              />
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Objection Handling */}
+      <section className="py-16 px-4">
+        <div className="max-w-3xl mx-auto">
+          <h2
+            className="text-3xl sm:text-4xl font-bold mb-8 text-center"
+            style={{ fontFamily: 'var(--font-oswald)', color: RED }}
+          >
+            &quot;But What If...&quot;
+          </h2>
+          <div className="space-y-6">
+            <div className="border-l-4 pl-6 py-2" style={{ borderColor: YELLOW }}>
+              <p className="font-bold text-lg mb-2" style={{ fontFamily: 'var(--font-oswald)' }}>
+                &quot;What if I can&apos;t travel right away?&quot;
+              </p>
+              <p className="text-gray-600">
+                No problem! You have <strong>18 full months</strong> to book your trip.
+                Pick the dates that work for YOUR schedule.
+              </p>
+            </div>
+            <div className="border-l-4 pl-6 py-2" style={{ borderColor: YELLOW }}>
+              <p className="font-bold text-lg mb-2" style={{ fontFamily: 'var(--font-oswald)' }}>
+                &quot;What if I don&apos;t like it?&quot;
+              </p>
+              <p className="text-gray-600">
+                We offer a <YellowHighlight>100% money-back guarantee</YellowHighlight> within 30 days.
+                Zero risk. Zero hassle.
+              </p>
+            </div>
+            <div className="border-l-4 pl-6 py-2" style={{ borderColor: YELLOW }}>
+              <p className="font-bold text-lg mb-2" style={{ fontFamily: 'var(--font-oswald)' }}>
+                &quot;Can I really afford $39/month?&quot;
+              </p>
+              <p className="text-gray-600">
+                Let&apos;s put it this way: that&apos;s <strong>$1.30 per day</strong>.
+                Skip one latte a week and you&apos;re covered.
+                Can you really afford NOT to take a vacation?
+              </p>
+            </div>
+            <div className="border-l-4 pl-6 py-2" style={{ borderColor: YELLOW }}>
+              <p className="font-bold text-lg mb-2" style={{ fontFamily: 'var(--font-oswald)' }}>
+                &quot;Is this legit?&quot;
+              </p>
+              <p className="text-gray-600">
+                We&apos;re a verified business with <strong>2,847+ happy customers</strong>,
+                a 4.8/5 star rating, and SSL-encrypted payments. Your money is safe.
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Urgency Section */}
+      <section className="py-16 px-4" style={{ backgroundColor: RED }}>
+        <div className="max-w-3xl mx-auto text-center">
+          <h2
+            className="text-3xl sm:text-4xl font-bold mb-6 text-white"
+            style={{ fontFamily: 'var(--font-oswald)' }}
+          >
+            <Clock className="inline-block w-8 h-8 mr-2" />
+            This Price Won&apos;t Last Forever
+          </h2>
+          <p className="text-white/90 text-lg mb-8">
+            When the timer hits zero, this offer is <strong>GONE</strong>.
+            The price goes back to regular retail, and you&apos;ll be kicking yourself
+            for not acting when you had the chance.
+          </p>
+          <div className="flex justify-center mb-8">
+            <CountdownTimer variant="flip" bgColor="#1a1a1a" textColor="#FFFFFF" accentColor={YELLOW} />
+          </div>
+          <p className="text-white text-xl font-bold mb-8" style={{ fontFamily: 'var(--font-oswald)' }}>
+            Only <span style={{ color: YELLOW }}>47 certificates</span> remaining at this price!
+          </p>
+          <CTAButton text="Claim My Certificate NOW Before It's Too Late!" />
+        </div>
+      </section>
+
+      {/* Guarantee Section */}
+      <section className="py-16 px-4">
+        <div className="max-w-3xl mx-auto text-center">
+          <Shield className="w-16 h-16 mx-auto mb-6" style={{ color: GREEN }} />
+          <h2
+            className="text-3xl font-bold mb-4"
+            style={{ fontFamily: 'var(--font-oswald)' }}
+          >
+            Our <YellowHighlight>30-Day Money-Back</YellowHighlight> Guarantee
+          </h2>
+          <p className="text-lg text-gray-600 leading-relaxed max-w-2xl mx-auto">
+            Try the Mexico Paradise Vacation Certificate for a full 30 days.
+            If you&apos;re not completely thrilled with your purchase,
+            simply contact us and we&apos;ll refund every single penny.
+            No questions asked. No hoops to jump through.
+            <strong> Your satisfaction is 100% guaranteed.</strong>
+          </p>
+        </div>
+      </section>
+
+      {/* Final Breakdown + CTA Section */}
+      <section className="py-16 px-4" style={{ backgroundColor: '#FFF8E1' }}>
+        <div className="max-w-3xl mx-auto text-center">
+          <h2
+            className="text-3xl sm:text-4xl font-bold mb-4"
+            style={{ fontFamily: 'var(--font-oswald)', color: RED }}
+          >
+            Let&apos;s Do The Math One More Time...
+          </h2>
+          <div className="bg-white rounded-xl shadow-lg p-8 mb-8 text-left max-w-md mx-auto">
+            <div className="space-y-3">
+              <div className="flex justify-between">
+                <span className="text-gray-600">Resort Stay (5 days)</span>
+                <span className="font-bold">$1,200</span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-gray-600">All-Inclusive Package</span>
+                <span className="font-bold">$800</span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-gray-600">Amenities & Activities</span>
+                <span className="font-bold">$400</span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-gray-600">Guest Pass</span>
+                <span className="font-bold">$500</span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-gray-600">Extras & Perks</span>
+                <span className="font-bold">$650</span>
+              </div>
+              <hr className="my-4" />
+              <div className="flex justify-between">
+                <span className="text-lg font-bold line-through text-gray-400">Total Value:</span>
+                <span className="text-lg font-bold line-through text-gray-400">$3,550</span>
+              </div>
+              <div className="flex justify-between items-end">
+                <span className="text-xl font-bold" style={{ color: GREEN, fontFamily: 'var(--font-oswald)' }}>
+                  You Pay:
+                </span>
+                <div className="text-right">
+                  <span className="text-3xl font-bold" style={{ color: GREEN, fontFamily: 'var(--font-oswald)' }}>
+                    ${PAYMENT_CONFIG.monthlyPrice}/mo
+                  </span>
+                  <p className="text-xs text-gray-500">or ${PAYMENT_CONFIG.oneTimePrice} one-time</p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <p className="text-xl font-bold mb-8" style={{ fontFamily: 'var(--font-oswald)' }}>
+            You save <span style={{ color: GREEN }}>over $3,000</span> with
+            <span style={{ color: RED }}> ZERO risk</span> (30-day guarantee)
+          </p>
+        </div>
+      </section>
+
+      {/* Signup Form Section */}
+      <section className="py-16 px-4" id="signup-form" style={{ backgroundColor: '#1a1a1a' }}>
+        <div className="max-w-lg mx-auto">
+          <h2
+            className="text-3xl sm:text-4xl font-bold mb-4 text-center text-white"
+            style={{ fontFamily: 'var(--font-oswald)' }}
+          >
+            <Gift className="inline-block w-8 h-8 mr-2" style={{ color: YELLOW }} />
+            Claim Your Certificate NOW
+          </h2>
+          <p className="text-center text-gray-400 mb-8">
+            Fill out the form below to secure your <YellowHighlight>${PAYMENT_CONFIG.monthlyPrice}/month</YellowHighlight> vacation certificate
+          </p>
+          <PayNowForm
+            variant="dark"
+            accentColor={RED}
+            buttonText="YES! Get My Vacation Certificate!"
+            className="bg-gray-900 rounded-xl p-6 border border-gray-800"
+          />
+          <div className="mt-6">
+            <TrustBadges variant="horizontal" textColor="#9CA3AF" />
+          </div>
+        </div>
+      </section>
+
+      {/* FAQ Section */}
+      <InfluencerBuzz />
+
+      <section className="py-16 px-4">
+        <div className="max-w-3xl mx-auto">
+          <h2
+            className="text-3xl font-bold mb-8 text-center"
+            style={{ fontFamily: 'var(--font-oswald)' }}
+          >
+            Frequently Asked Questions
+          </h2>
+          <FAQAccordion />
+        </div>
+      </section>
+
+      {/* Final Closing */}
+      <section className="py-16 px-4 bg-gray-50">
+        <div className="max-w-3xl mx-auto text-center">
+          <h2
+            className="text-3xl sm:text-4xl font-bold mb-6"
+            style={{ fontFamily: 'var(--font-oswald)', color: RED }}
+          >
+            You Have Two Choices Right Now...
+          </h2>
+          <div className="grid md:grid-cols-2 gap-8 mb-8 text-left">
+            <div className="bg-white rounded-xl p-6 border-2 border-gray-200">
+              <h3 className="font-bold text-xl mb-3" style={{ fontFamily: 'var(--font-oswald)' }}>
+                Option A: Do Nothing
+              </h3>
+              <ul className="space-y-2 text-gray-600">
+                <li className="flex items-start gap-2">
+                  <span className="text-red-500 font-bold">-</span>
+                  Keep scrolling Instagram jealously
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="text-red-500 font-bold">-</span>
+                  Pay $3,000+ next time you travel
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="text-red-500 font-bold">-</span>
+                  Wonder &quot;what if&quot; for the next year
+                </li>
+              </ul>
+            </div>
+            <div className="bg-white rounded-xl p-6 border-2" style={{ borderColor: GREEN }}>
+              <h3 className="font-bold text-xl mb-3" style={{ fontFamily: 'var(--font-oswald)', color: GREEN }}>
+                Option B: Take Action
+              </h3>
+              <ul className="space-y-2 text-gray-600">
+                <li className="flex items-start gap-2">
+                  <Check className="w-5 h-5 shrink-0" style={{ color: GREEN }} />
+                  Lock in $1.30/day for paradise
+                </li>
+                <li className="flex items-start gap-2">
+                  <Check className="w-5 h-5 shrink-0" style={{ color: GREEN }} />
+                  Save over $3,000 guaranteed
+                </li>
+                <li className="flex items-start gap-2">
+                  <Check className="w-5 h-5 shrink-0" style={{ color: GREEN }} />
+                  Be the one YOUR friends envy
+                </li>
+              </ul>
+            </div>
+          </div>
+          <CTAButton text="I Choose Option B — Give Me My Vacation!" />
+          <p className="text-sm text-gray-400 mt-6">
+            30-day money-back guarantee. SSL encrypted. Cancel anytime.
+          </p>
+        </div>
+      </section>
+
+      {/* P.S. Section */}
+      <section className="py-12 px-4 border-t">
+        <div className="max-w-3xl mx-auto">
+          <p className="text-gray-600 leading-relaxed">
+            <strong>P.S.</strong> — Remember, this special price of <YellowHighlight>${PAYMENT_CONFIG.monthlyPrice}/month</YellowHighlight> is
+            only available while the countdown timer is running. Once it hits zero, the price goes up.
+            <strong> There are only 47 certificates left at this price.</strong>
+          </p>
+          <p className="text-gray-600 leading-relaxed mt-4">
+            <strong>P.P.S.</strong> — Still not sure? You&apos;re protected by our <strong>30-day
+            money-back guarantee</strong>. That means you can try this completely risk-free.
+            If you don&apos;t love it, you get every penny back. What do you have to lose?
+          </p>
+          <p className="text-gray-600 leading-relaxed mt-4">
+            <strong>P.P.P.S.</strong> — Think about it this way: for the price of a few
+            fast food meals per month, you could be lounging on a beach in Mexico.
+            <YellowHighlight> The only question is... will you take action?</YellowHighlight>
+          </p>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="py-8 px-4 bg-gray-900 text-center">
+        <p className="text-gray-500 text-sm">
+          Mexico Paradise Vacations. All rights reserved.
+        </p>
+        <p className="text-gray-600 text-xs mt-2">
+          This site is not a part of the Facebook or Google websites. Results may vary.
+        </p>
+      </footer>
+
+      <StickyMobileCTA accentColor={RED} buttonText="Claim My Certificate!" />
+    </div>
+  )
+}
diff --git a/src/components/lp/pages/LP07ResortPreview.tsx b/src/components/lp/pages/LP07ResortPreview.tsx
new file mode 100644
index 0000000..8f0b6fd
--- /dev/null
+++ b/src/components/lp/pages/LP07ResortPreview.tsx
@@ -0,0 +1,446 @@
+'use client'
+
+import { useState, useRef, useEffect } from 'react'
+import {
+  Play,
+  Waves,
+  UtensilsCrossed,
+  Dumbbell,
+  Sparkles,
+  Wine,
+  Sun,
+  MapPin,
+  ChevronLeft,
+  ChevronRight,
+  Star,
+  ArrowRight,
+} from 'lucide-react'
+import PayNowForm from '@/components/lp/shared/PayNowForm'
+import DestinationCarousel from '@/components/lp/shared/DestinationCarousel'
+import TestimonialCard from '@/components/lp/shared/TestimonialCard'
+import FAQAccordion from '@/components/lp/shared/FAQAccordion'
+import TrustBadges from '@/components/lp/shared/TrustBadges'
+import StickyMobileCTA from '@/components/lp/shared/StickyMobileCTA'
+import PricingDisplay from '@/components/lp/shared/PricingDisplay'
+import UrgencyBanner from '@/components/lp/shared/UrgencyBanner'
+import InfluencerBuzz from '@/components/lp/shared/InfluencerBuzz'
+import { PAYMENT_CONFIG, TESTIMONIALS, DESTINATIONS } from '@/app/lp/_config/types'
+
+const NAVY = '#1A237E'
+const GOLD = '#C9B037'
+const BEIGE = '#F5F5DC'
+
+const AMENITIES = [
+  {
+    icon: Waves,
+    title: 'Infinity Pools',
+    description: 'Multiple heated pools with ocean views, swim-up bars, and private cabanas.',
+    image: '/images/cdn/photo-1582719508461-905c673771fd.jpg',
+  },
+  {
+    icon: UtensilsCrossed,
+    title: 'World-Class Dining',
+    description: 'From authentic Mexican cuisine to international fine dining, all included.',
+    image: '/images/cdn/photo-1414235077428-338989a2e8c0.jpg',
+  },
+  {
+    icon: Sparkles,
+    title: 'Luxury Spa',
+    description: 'Full-service spa with traditional temazcal, massages, and beauty treatments.',
+    image: '/images/cdn/photo-1544161515-4ab6ce6db874.jpg',
+  },
+  {
+    icon: Dumbbell,
+    title: 'Fitness & Activities',
+    description: 'State-of-the-art gym, yoga classes, water sports, and guided excursions.',
+    image: '/images/cdn/photo-1540497077202-7c8a3999166f.jpg',
+  },
+  {
+    icon: Wine,
+    title: 'Premium Bar & Lounge',
+    description: 'Top-shelf spirits, craft cocktails, and an extensive wine list, all day long.',
+    image: '/images/cdn/photo-1514362545857-3bc16c4c7d1b.jpg',
+  },
+  {
+    icon: Sun,
+    title: 'Private Beach',
+    description: 'White sand, crystal-clear waters, and beach service with complimentary towels.',
+    image: '/images/cdn/photo-1507525428034-b723cf961d3e.jpg',
+  },
+]
+
+const GALLERY_IMAGES = [
+  { src: '/images/cdn/photo-1566073771259-6a8506099945.jpg', caption: 'Oceanfront Suite' },
+  { src: '/images/cdn/photo-1520250497591-112f2f40a3f4.jpg', caption: 'Resort Pool' },
+  { src: '/images/cdn/photo-1551882547-ff40c63fe5fa.jpg', caption: 'Lobby & Gardens' },
+  { src: '/images/cdn/photo-1571896349842-33c89424de2d.jpg', caption: 'Beachfront Dining' },
+  { src: '/images/cdn/photo-1584132967334-10e028bd69f7.jpg', caption: 'Sunset Terrace' },
+  { src: '/images/cdn/photo-1615460549969-36fa19521a4f.jpg', caption: 'Spa Retreat' },
+  { src: '/images/cdn/photo-1602002418816-5c0aeef426aa.jpg', caption: 'Luxury Room' },
+  { src: '/images/cdn/photo-1596436889106-be35e843f974.jpg', caption: 'Beach Paradise' },
+]
+
+function HorizontalGallery() {
+  const scrollRef = useRef<HTMLDivElement>(null)
+  const [canScrollLeft, setCanScrollLeft] = useState(false)
+  const [canScrollRight, setCanScrollRight] = useState(true)
+
+  const checkScroll = () => {
+    if (!scrollRef.current) return
+    const { scrollLeft, scrollWidth, clientWidth } = scrollRef.current
+    setCanScrollLeft(scrollLeft > 10)
+    setCanScrollRight(scrollLeft < scrollWidth - clientWidth - 10)
+  }
+
+  useEffect(() => {
+    const el = scrollRef.current
+    if (!el) return
+    el.addEventListener('scroll', checkScroll, { passive: true })
+    checkScroll()
+    return () => el.removeEventListener('scroll', checkScroll)
+  }, [])
+
+  const scroll = (direction: 'left' | 'right') => {
+    if (!scrollRef.current) return
+    const amount = scrollRef.current.clientWidth * 0.7
+    scrollRef.current.scrollBy({ left: direction === 'left' ? -amount : amount, behavior: 'smooth' })
+  }
+
+  return (
+    <div className="relative">
+      <div
+        ref={scrollRef}
+        className="flex gap-4 overflow-x-auto scrollbar-hide snap-x snap-mandatory pb-4"
+        style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
+      >
+        {GALLERY_IMAGES.map((img, i) => (
+          <div key={i} className="flex-none w-[320px] sm:w-[420px] snap-center">
+            <div className="relative rounded-xl overflow-hidden group">
+              <img
+                src={img.src}
+                alt={img.caption}
+                className="w-full h-[240px] sm:h-[300px] object-cover transition-transform duration-500 group-hover:scale-105"
+              />
+              <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
+              <p
+                className="absolute bottom-4 left-4 text-white text-lg font-semibold"
+                style={{ fontFamily: 'var(--font-cormorant)' }}
+              >
+                {img.caption}
+              </p>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {canScrollLeft && (
+        <button
+          onClick={() => scroll('left')}
+          className="absolute left-2 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-white/90 shadow-lg flex items-center justify-center hover:bg-white transition-colors"
+        >
+          <ChevronLeft className="w-5 h-5" style={{ color: NAVY }} />
+        </button>
+      )}
+      {canScrollRight && (
+        <button
+          onClick={() => scroll('right')}
+          className="absolute right-2 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-white/90 shadow-lg flex items-center justify-center hover:bg-white transition-colors"
+        >
+          <ChevronRight className="w-5 h-5" style={{ color: NAVY }} />
+        </button>
+      )}
+    </div>
+  )
+}
+
+export default function LP07ResortPreview() {
+  return (
+    <div className="min-h-screen" style={{ fontFamily: 'var(--font-raleway)', backgroundColor: BEIGE }}>
+      <UrgencyBanner variant="combined" />
+
+      {/* Full-Screen Hero with Video Placeholder */}
+      <section className="relative min-h-screen flex items-center justify-center overflow-hidden pt-20">
+        <img
+          src="/images/cdn/photo-1582719508461-905c673771fd.jpg"
+          alt="Luxury resort aerial view"
+          className="absolute inset-0 w-full h-full object-cover"
+        />
+        <div className="absolute inset-0 bg-gradient-to-b from-black/40 via-black/20 to-black/60" />
+
+        {/* Play Button Overlay */}
+        <div className="relative z-10 text-center px-4">
+          <button className="w-20 h-20 sm:w-24 sm:h-24 rounded-full border-2 border-white/80 flex items-center justify-center mb-8 mx-auto backdrop-blur-sm bg-white/10 hover:bg-white/20 transition-all hover:scale-110 group">
+            <Play className="w-8 h-8 sm:w-10 sm:h-10 text-white ml-1 group-hover:scale-110 transition-transform" />
+          </button>
+          <p
+            className="text-sm uppercase tracking-[0.3em] text-white/70 mb-4"
+            style={{ fontFamily: 'var(--font-raleway)' }}
+          >
+            Your Future Awaits
+          </p>
+          <h1
+            className="text-4xl sm:text-5xl md:text-7xl font-bold text-white leading-tight mb-6"
+            style={{ fontFamily: 'var(--font-cormorant)' }}
+          >
+            Tour Your Future<br />
+            <span style={{ color: GOLD }}>Resort</span>
+          </h1>
+          <p className="text-white/80 text-lg sm:text-xl max-w-2xl mx-auto mb-10 leading-relaxed">
+            Step inside the all-inclusive luxury resorts where your next vacation begins.
+            5 days. 4 nights. From just ${PAYMENT_CONFIG.monthlyPrice}/month.
+          </p>
+          <a
+            href="#signup-form"
+            className="inline-flex items-center gap-2 px-8 py-4 rounded-full text-white font-semibold text-lg hover:opacity-90 transition-opacity"
+            style={{ backgroundColor: GOLD, color: NAVY }}
+          >
+            Reserve Your Stay
+            <ArrowRight className="w-5 h-5" />
+          </a>
+        </div>
+
+        {/* Scroll indicator */}
+        <div className="absolute bottom-8 left-1/2 -translate-x-1/2 text-white/60 text-center">
+          <p className="text-xs uppercase tracking-widest mb-2">Scroll to explore</p>
+          <div className="w-6 h-10 rounded-full border-2 border-white/40 mx-auto flex justify-center pt-2">
+            <div className="w-1.5 h-3 rounded-full bg-white/60 animate-bounce" />
+          </div>
+        </div>
+      </section>
+
+      {/* Introduction */}
+      <section className="py-20 px-4">
+        <div className="max-w-3xl mx-auto text-center">
+          <p className="text-sm uppercase tracking-[0.25em] mb-4" style={{ color: GOLD }}>
+            An Immersive Experience
+          </p>
+          <h2
+            className="text-3xl sm:text-4xl md:text-5xl font-bold mb-6"
+            style={{ fontFamily: 'var(--font-cormorant)', color: NAVY }}
+          >
+            Where Elegance Meets Paradise
+          </h2>
+          <p className="text-lg text-gray-600 leading-relaxed">
+            Our hand-selected partner resorts represent the finest in Mexican hospitality.
+            Each property offers world-class amenities, stunning natural beauty, and the kind
+            of service that turns a vacation into a lifelong memory.
+          </p>
+        </div>
+      </section>
+
+      {/* Resort Amenity Showcase */}
+      <section className="py-16 px-4">
+        <div className="max-w-6xl mx-auto">
+          <div className="text-center mb-14">
+            <p className="text-sm uppercase tracking-[0.25em] mb-3" style={{ color: GOLD }}>
+              Resort Amenities
+            </p>
+            <h2
+              className="text-3xl sm:text-4xl font-bold"
+              style={{ fontFamily: 'var(--font-cormorant)', color: NAVY }}
+            >
+              Everything You Could Dream Of
+            </h2>
+          </div>
+
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {AMENITIES.map((amenity) => (
+              <div
+                key={amenity.title}
+                className="group rounded-2xl overflow-hidden bg-white shadow-md hover:shadow-xl transition-shadow"
+              >
+                <div className="relative h-48 overflow-hidden">
+                  <img
+                    src={amenity.image}
+                    alt={amenity.title}
+                    className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
+                  />
+                  <div className="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent" />
+                  <div
+                    className="absolute top-4 right-4 w-10 h-10 rounded-full flex items-center justify-center"
+                    style={{ backgroundColor: GOLD }}
+                  >
+                    <amenity.icon className="w-5 h-5" style={{ color: NAVY }} />
+                  </div>
+                </div>
+                <div className="p-5">
+                  <h3
+                    className="text-xl font-bold mb-2"
+                    style={{ fontFamily: 'var(--font-cormorant)', color: NAVY }}
+                  >
+                    {amenity.title}
+                  </h3>
+                  <p className="text-gray-600 text-sm leading-relaxed">{amenity.description}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Horizontal Scroll Gallery */}
+      <section className="py-16 px-4" style={{ backgroundColor: NAVY }}>
+        <div className="max-w-7xl mx-auto">
+          <div className="text-center mb-12">
+            <p className="text-sm uppercase tracking-[0.25em] mb-3" style={{ color: GOLD }}>
+              Visual Tour
+            </p>
+            <h2
+              className="text-3xl sm:text-4xl font-bold text-white"
+              style={{ fontFamily: 'var(--font-cormorant)' }}
+            >
+              A Glimpse of Paradise
+            </h2>
+          </div>
+          <HorizontalGallery />
+        </div>
+      </section>
+
+      {/* Destination Carousel */}
+      <section className="py-20 px-4">
+        <div className="max-w-4xl mx-auto">
+          <div className="text-center mb-12">
+            <p className="text-sm uppercase tracking-[0.25em] mb-3" style={{ color: GOLD }}>
+              Choose Your Destination
+            </p>
+            <h2
+              className="text-3xl sm:text-4xl font-bold"
+              style={{ fontFamily: 'var(--font-cormorant)', color: NAVY }}
+            >
+              Four Stunning Locations
+            </h2>
+          </div>
+          <DestinationCarousel />
+        </div>
+      </section>
+
+      {/* Testimonials */}
+      <section className="py-20 px-4" style={{ backgroundColor: NAVY }}>
+        <div className="max-w-4xl mx-auto">
+          <div className="text-center mb-12">
+            <p className="text-sm uppercase tracking-[0.25em] mb-3" style={{ color: GOLD }}>
+              Guest Experiences
+            </p>
+            <h2
+              className="text-3xl sm:text-4xl font-bold text-white"
+              style={{ fontFamily: 'var(--font-cormorant)' }}
+            >
+              Words From Our Guests
+            </h2>
+          </div>
+          <div className="grid md:grid-cols-2 gap-6">
+            {TESTIMONIALS.slice(0, 4).map((t, i) => (
+              <TestimonialCard
+                key={i}
+                quote={t.quote}
+                name={t.name}
+                location={t.location}
+                photo={t.photo}
+                variant="dark"
+              />
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Pricing Section */}
+      <section className="py-20 px-4">
+        <div className="max-w-lg mx-auto text-center">
+          <p className="text-sm uppercase tracking-[0.25em] mb-3" style={{ color: GOLD }}>
+            Your Investment
+          </p>
+          <h2
+            className="text-3xl sm:text-4xl font-bold mb-4"
+            style={{ fontFamily: 'var(--font-cormorant)', color: NAVY }}
+          >
+            An Extraordinary Value
+          </h2>
+          <p className="text-gray-600 mb-8 leading-relaxed">
+            Five days of all-inclusive luxury for less than a single night at most resorts.
+          </p>
+          <div className="bg-white rounded-2xl shadow-xl p-8 border" style={{ borderColor: `${GOLD}40` }}>
+            <PricingDisplay accentColor={GOLD} />
+          </div>
+        </div>
+      </section>
+
+      {/* Signup Form */}
+      <section
+        className="py-20 px-4 relative"
+        id="signup-form"
+      >
+        <div className="absolute inset-0">
+          <img
+            src="/images/cdn/photo-1519046904884-53103b34b206.jpg"
+            alt="Beach sunset"
+            className="w-full h-full object-cover"
+          />
+          <div className="absolute inset-0" style={{ backgroundColor: `${NAVY}ee` }} />
+        </div>
+        <div className="relative z-10 max-w-lg mx-auto">
+          <div className="text-center mb-8">
+            <p className="text-sm uppercase tracking-[0.25em] mb-3" style={{ color: GOLD }}>
+              Reserve Now
+            </p>
+            <h2
+              className="text-3xl sm:text-4xl font-bold text-white"
+              style={{ fontFamily: 'var(--font-cormorant)' }}
+            >
+              Begin Your Journey
+            </h2>
+            <p className="text-white/70 mt-3">
+              Secure your all-inclusive vacation certificate today
+            </p>
+          </div>
+          <div className="bg-white/10 backdrop-blur-md rounded-2xl p-8 border border-white/20">
+            <PayNowForm
+              variant="dark"
+              accentColor={GOLD}
+              buttonText="Reserve My Resort Stay"
+            />
+          </div>
+          <div className="mt-6">
+            <TrustBadges variant="horizontal" textColor="rgba(255,255,255,0.6)" />
+          </div>
+        </div>
+      </section>
+
+      {/* FAQ */}
+      <section className="py-20 px-4">
+        <div className="max-w-3xl mx-auto">
+          <div className="text-center mb-12">
+            <p className="text-sm uppercase tracking-[0.25em] mb-3" style={{ color: GOLD }}>
+              Questions
+            </p>
+            <InfluencerBuzz />
+
+            <h2
+              className="text-3xl sm:text-4xl font-bold"
+              style={{ fontFamily: 'var(--font-cormorant)', color: NAVY }}
+            >
+              Frequently Asked
+            </h2>
+          </div>
+          <div className="bg-white rounded-2xl shadow-md p-6 sm:p-8">
+            <FAQAccordion />
+          </div>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="py-10 px-4 text-center" style={{ backgroundColor: NAVY }}>
+        <p
+          className="text-2xl font-bold text-white mb-2"
+          style={{ fontFamily: 'var(--font-cormorant)' }}
+        >
+          Mexico Paradise Vacations
+        </p>
+        <p className="text-white/50 text-sm">
+          Luxury experiences, extraordinary value.
+        </p>
+      </footer>
+
+      <StickyMobileCTA accentColor={GOLD} buttonText="Reserve Your Stay" />
+    </div>
+  )
+}
diff --git a/src/components/lp/pages/LP08SplitDecision.tsx b/src/components/lp/pages/LP08SplitDecision.tsx
new file mode 100644
index 0000000..742ec8c
--- /dev/null
+++ b/src/components/lp/pages/LP08SplitDecision.tsx
@@ -0,0 +1,455 @@
+'use client'
+
+import { useState } from 'react'
+import {
+  Check,
+  ArrowRight,
+  TreePalm,
+  Waves,
+  Sun,
+  UtensilsCrossed,
+  Wine,
+  Shield,
+  Star,
+  MapPin,
+} from 'lucide-react'
+import PayNowForm from '@/components/lp/shared/PayNowForm'
+import TestimonialCard from '@/components/lp/shared/TestimonialCard'
+import FAQAccordion from '@/components/lp/shared/FAQAccordion'
+import TrustBadges from '@/components/lp/shared/TrustBadges'
+import PricingDisplay from '@/components/lp/shared/PricingDisplay'
+import StickyMobileCTA from '@/components/lp/shared/StickyMobileCTA'
+import UrgencyBanner from '@/components/lp/shared/UrgencyBanner'
+import InfluencerBuzz from '@/components/lp/shared/InfluencerBuzz'
+import { PAYMENT_CONFIG, TESTIMONIALS, DESTINATIONS } from '@/app/lp/_config/types'
+
+const AMBER = '#FF6F00'
+const BLUE = '#1565C0'
+const PINK = '#E91E63'
+
+const cancun = DESTINATIONS.find(d => d.name === 'Cancun')!
+const cabo = DESTINATIONS.find(d => d.name === 'Cabo San Lucas')!
+
+const SHARED_BENEFITS = [
+  { icon: Waves, text: '5 days / 4 nights all-inclusive' },
+  { icon: UtensilsCrossed, text: 'Unlimited meals & drinks included' },
+  { icon: Sun, text: 'Beach & pool access all day' },
+  { icon: Wine, text: 'Premium bar & cocktail service' },
+  { icon: Shield, text: '30-day money-back guarantee' },
+  { icon: Star, text: 'Rated 4.8/5 by travelers' },
+]
+
+const CANCUN_HIGHLIGHTS = [
+  'World-famous turquoise waters',
+  'Vibrant nightlife & entertainment',
+  'Mayan ruins nearby (Chichen Itza)',
+  'Snorkeling in the Great Mesoamerican Reef',
+  'Year-round tropical weather',
+]
+
+const CABO_HIGHLIGHTS = [
+  'Dramatic cliffs meet the Pacific Ocean',
+  'Iconic El Arco rock formation',
+  'World-class sport fishing',
+  'Desert-meets-ocean landscape',
+  'Luxurious boutique resort vibes',
+]
+
+function DestinationCard({
+  name,
+  tagline,
+  image,
+  highlights,
+  color,
+  side,
+}: {
+  name: string
+  tagline: string
+  image: string
+  highlights: string[]
+  color: string
+  side: 'left' | 'right'
+}) {
+  return (
+    <div className="flex flex-col h-full">
+      <div className="relative overflow-hidden rounded-t-2xl lg:rounded-t-none" style={{ minHeight: '280px' }}>
+        <img
+          src={image}
+          alt={name}
+          className="absolute inset-0 w-full h-full object-cover"
+        />
+        <div
+          className="absolute inset-0"
+          style={{
+            background: side === 'left'
+              ? `linear-gradient(135deg, ${AMBER}cc 0%, transparent 60%)`
+              : `linear-gradient(225deg, ${BLUE}cc 0%, transparent 60%)`,
+          }}
+        />
+        <div className="relative z-10 p-6 sm:p-8 flex flex-col justify-end h-full" style={{ minHeight: '280px' }}>
+          <MapPin className="w-6 h-6 text-white/80 mb-2" />
+          <h3
+            className="text-3xl sm:text-4xl font-bold text-white mb-1"
+            style={{ fontFamily: 'var(--font-space-grotesk)' }}
+          >
+            {name}
+          </h3>
+          <p className="text-white/80 text-sm">{tagline}</p>
+        </div>
+      </div>
+      <div className="bg-white p-6 flex-1 rounded-b-2xl lg:rounded-b-none">
+        <ul className="space-y-3">
+          {highlights.map((h, i) => (
+            <li key={i} className="flex items-start gap-3">
+              <Check className="w-5 h-5 shrink-0 mt-0.5" style={{ color }} />
+              <span className="text-gray-700 text-sm" style={{ fontFamily: 'var(--font-work-sans)' }}>
+                {h}
+              </span>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  )
+}
+
+export default function LP08SplitDecision() {
+  const [hoveredSide, setHoveredSide] = useState<'left' | 'right' | null>(null)
+
+  return (
+    <div className="min-h-screen bg-gray-100" style={{ fontFamily: 'var(--font-work-sans)' }}>
+      <UrgencyBanner variant="combined" />
+
+      {/* Split-Screen Hero */}
+      <section className="relative min-h-screen pt-20">
+        <div className="grid grid-cols-1 lg:grid-cols-2 min-h-screen">
+          {/* Cancun Side */}
+          <div
+            className="relative flex items-center justify-center cursor-pointer transition-all duration-500 min-h-[50vh] lg:min-h-screen"
+            onMouseEnter={() => setHoveredSide('left')}
+            onMouseLeave={() => setHoveredSide(null)}
+            style={{
+              flex: hoveredSide === 'left' ? 1.2 : hoveredSide === 'right' ? 0.8 : 1,
+            }}
+          >
+            <img
+              src={cancun.images[0]}
+              alt="Cancun"
+              className="absolute inset-0 w-full h-full object-cover transition-transform duration-700"
+              style={{ transform: hoveredSide === 'left' ? 'scale(1.05)' : 'scale(1)' }}
+            />
+            <div
+              className="absolute inset-0"
+              style={{ backgroundColor: `${AMBER}88` }}
+            />
+            <div className="relative z-10 text-center px-6">
+              <p
+                className="text-white/80 text-sm uppercase tracking-widest mb-3"
+                style={{ fontFamily: 'var(--font-space-grotesk)' }}
+              >
+                Option A
+              </p>
+              <h2
+                className="text-4xl sm:text-5xl lg:text-6xl font-bold text-white mb-3"
+                style={{ fontFamily: 'var(--font-space-grotesk)' }}
+              >
+                Cancun
+              </h2>
+              <p className="text-white/90 text-lg">{cancun.tagline}</p>
+            </div>
+          </div>
+
+          {/* Cabo Side */}
+          <div
+            className="relative flex items-center justify-center cursor-pointer transition-all duration-500 min-h-[50vh] lg:min-h-screen"
+            onMouseEnter={() => setHoveredSide('right')}
+            onMouseLeave={() => setHoveredSide(null)}
+            style={{
+              flex: hoveredSide === 'right' ? 1.2 : hoveredSide === 'left' ? 0.8 : 1,
+            }}
+          >
+            <img
+              src={cabo.images[0]}
+              alt="Cabo San Lucas"
+              className="absolute inset-0 w-full h-full object-cover transition-transform duration-700"
+              style={{ transform: hoveredSide === 'right' ? 'scale(1.05)' : 'scale(1)' }}
+            />
+            <div
+              className="absolute inset-0"
+              style={{ backgroundColor: `${BLUE}88` }}
+            />
+            <div className="relative z-10 text-center px-6">
+              <p
+                className="text-white/80 text-sm uppercase tracking-widest mb-3"
+                style={{ fontFamily: 'var(--font-space-grotesk)' }}
+              >
+                Option B
+              </p>
+              <h2
+                className="text-4xl sm:text-5xl lg:text-6xl font-bold text-white mb-3"
+                style={{ fontFamily: 'var(--font-space-grotesk)' }}
+              >
+                Cabo
+              </h2>
+              <p className="text-white/90 text-lg">{cabo.tagline}</p>
+            </div>
+          </div>
+        </div>
+
+        {/* Center divider text */}
+        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-20 hidden lg:block">
+          <div className="bg-white rounded-full w-20 h-20 flex items-center justify-center shadow-2xl">
+            <span
+              className="text-xl font-bold"
+              style={{ fontFamily: 'var(--font-space-grotesk)', color: PINK }}
+            >
+              VS
+            </span>
+          </div>
+        </div>
+
+        {/* Bottom text overlay */}
+        <div className="absolute bottom-0 left-0 right-0 z-20 text-center pb-8 px-4">
+          <h1
+            className="text-2xl sm:text-3xl font-bold text-white drop-shadow-lg"
+            style={{ fontFamily: 'var(--font-space-grotesk)' }}
+          >
+            The Only Question Is <span style={{ color: '#FFD54F' }}>WHICH</span> Paradise
+          </h1>
+        </div>
+      </section>
+
+      {/* "Both Include" Section */}
+      <section className="py-16 px-4" style={{ backgroundColor: '#f8f9fa' }}>
+        <div className="max-w-4xl mx-auto text-center">
+          <h2
+            className="text-3xl sm:text-4xl font-bold mb-4"
+            style={{ fontFamily: 'var(--font-space-grotesk)' }}
+          >
+            No Matter Which You Choose...
+          </h2>
+          <p className="text-xl text-gray-600 mb-12">
+            Both destinations include <strong>everything</strong> below.
+          </p>
+          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
+            {SHARED_BENEFITS.map((benefit) => (
+              <div
+                key={benefit.text}
+                className="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow flex items-start gap-4"
+              >
+                <div
+                  className="w-10 h-10 rounded-lg flex items-center justify-center shrink-0"
+                  style={{ backgroundColor: `${PINK}15` }}
+                >
+                  <benefit.icon className="w-5 h-5" style={{ color: PINK }} />
+                </div>
+                <p className="text-gray-700 text-sm text-left font-medium" style={{ fontFamily: 'var(--font-work-sans)' }}>
+                  {benefit.text}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Detailed Split Comparison */}
+      <section className="py-16 px-4">
+        <div className="max-w-5xl mx-auto">
+          <h2
+            className="text-3xl font-bold text-center mb-12"
+            style={{ fontFamily: 'var(--font-space-grotesk)' }}
+          >
+            Compare Your Options
+          </h2>
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 lg:gap-0">
+            <div className="lg:border-r border-gray-200">
+              <DestinationCard
+                name="Cancun"
+                tagline={cancun.tagline}
+                image={cancun.images[1]}
+                highlights={CANCUN_HIGHLIGHTS}
+                color={AMBER}
+                side="left"
+              />
+            </div>
+            <div>
+              <DestinationCard
+                name="Cabo San Lucas"
+                tagline={cabo.tagline}
+                image={cabo.images[1]}
+                highlights={CABO_HIGHLIGHTS}
+                color={BLUE}
+                side="right"
+              />
+            </div>
+          </div>
+          <div className="text-center mt-8">
+            <p className="text-lg text-gray-600 mb-2">
+              Plus <strong>Riviera Maya</strong> and <strong>Puerto Vallarta</strong> are also available!
+            </p>
+            <p className="text-sm text-gray-500">
+              Your certificate works at any of our 4 stunning destinations.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      {/* The Choice is Easy */}
+      <section className="py-16 px-4" style={{ backgroundColor: PINK, color: 'white' }}>
+        <div className="max-w-3xl mx-auto text-center">
+          <h2
+            className="text-3xl sm:text-4xl font-bold mb-6"
+            style={{ fontFamily: 'var(--font-space-grotesk)' }}
+          >
+            Forget &quot;Cancun vs. Cabo&quot;&mdash;
+            <br />The Real Choice Is Vacation vs. No Vacation
+          </h2>
+          <p className="text-white/90 text-lg leading-relaxed mb-8">
+            For just ${PAYMENT_CONFIG.monthlyPrice}/month, you get 5 days of all-inclusive paradise.
+            Pick your destination later. Lock in the price now.
+          </p>
+          <a
+            href="#signup-form"
+            className="inline-flex items-center gap-2 bg-white px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transition-colors"
+            style={{ color: PINK }}
+          >
+            Choose Your Paradise
+            <ArrowRight className="w-5 h-5" />
+          </a>
+        </div>
+      </section>
+
+      {/* Other Destinations Preview */}
+      <section className="py-16 px-4 bg-white">
+        <div className="max-w-5xl mx-auto">
+          <h2
+            className="text-3xl font-bold text-center mb-10"
+            style={{ fontFamily: 'var(--font-space-grotesk)' }}
+          >
+            Also Available With Your Certificate
+          </h2>
+          <div className="grid sm:grid-cols-2 gap-6">
+            {DESTINATIONS.filter(d => d.name !== 'Cancun' && d.name !== 'Cabo San Lucas').map((dest) => (
+              <div key={dest.name} className="relative rounded-2xl overflow-hidden group">
+                <img
+                  src={dest.images[0]}
+                  alt={dest.name}
+                  className="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-105"
+                />
+                <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent" />
+                <div className="absolute bottom-0 left-0 right-0 p-6">
+                  <h3
+                    className="text-2xl font-bold text-white"
+                    style={{ fontFamily: 'var(--font-space-grotesk)' }}
+                  >
+                    {dest.name}
+                  </h3>
+                  <p className="text-white/80 text-sm">{dest.tagline}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Pricing */}
+      <section className="py-16 px-4" style={{ backgroundColor: '#f8f9fa' }}>
+        <div className="max-w-lg mx-auto text-center">
+          <h2
+            className="text-3xl font-bold mb-4"
+            style={{ fontFamily: 'var(--font-space-grotesk)' }}
+          >
+            One Price. Any Destination.
+          </h2>
+          <p className="text-gray-600 mb-8">
+            Your certificate is valid at all 4 locations.
+          </p>
+          <div className="bg-white rounded-2xl shadow-lg p-8">
+            <PricingDisplay accentColor={PINK} />
+          </div>
+        </div>
+      </section>
+
+      {/* Testimonials */}
+      <section className="py-16 px-4 bg-white">
+        <div className="max-w-4xl mx-auto">
+          <h2
+            className="text-3xl font-bold text-center mb-10"
+            style={{ fontFamily: 'var(--font-space-grotesk)' }}
+          >
+            What Travelers Are Saying
+          </h2>
+          <div className="grid md:grid-cols-3 gap-6">
+            {TESTIMONIALS.slice(0, 3).map((t, i) => (
+              <TestimonialCard
+                key={i}
+                quote={t.quote}
+                name={t.name}
+                location={t.location}
+                photo={t.photo}
+              />
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Signup Form */}
+      <section id="signup-form" className="py-16 px-4 relative overflow-hidden">
+        <div className="absolute inset-0">
+          <div
+            className="absolute inset-0"
+            style={{
+              background: `linear-gradient(135deg, ${AMBER} 0%, ${PINK} 50%, ${BLUE} 100%)`,
+            }}
+          />
+        </div>
+        <div className="relative z-10 max-w-lg mx-auto">
+          <div className="text-center mb-8">
+            <h2
+              className="text-3xl sm:text-4xl font-bold text-white mb-3"
+              style={{ fontFamily: 'var(--font-space-grotesk)' }}
+            >
+              Ready To Decide?
+            </h2>
+            <p className="text-white/90">
+              Secure your certificate now. Choose your destination later.
+            </p>
+          </div>
+          <div className="bg-white rounded-2xl shadow-2xl p-8">
+            <PayNowForm
+              accentColor={PINK}
+              buttonText="Get My Vacation Certificate!"
+            />
+          </div>
+          <div className="mt-6">
+            <TrustBadges variant="horizontal" textColor="rgba(255,255,255,0.7)" />
+          </div>
+        </div>
+      </section>
+
+      {/* FAQ */}
+      <InfluencerBuzz />
+
+      <section className="py-16 px-4 bg-white">
+        <div className="max-w-3xl mx-auto">
+          <h2
+            className="text-3xl font-bold text-center mb-10"
+            style={{ fontFamily: 'var(--font-space-grotesk)' }}
+          >
+            Common Questions
+          </h2>
+          <FAQAccordion />
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="py-8 px-4 text-center" style={{ backgroundColor: '#1a1a1a' }}>
+        <p className="text-gray-500 text-sm">
+          Mexico Paradise Vacations. All rights reserved.
+        </p>
+      </footer>
+
+      <StickyMobileCTA accentColor={PINK} buttonText="Choose Your Paradise" />
+    </div>
+  )
+}
diff --git a/src/components/lp/pages/LP09Calculator.tsx b/src/components/lp/pages/LP09Calculator.tsx
new file mode 100644
index 0000000..afed3d9
--- /dev/null
+++ b/src/components/lp/pages/LP09Calculator.tsx
@@ -0,0 +1,451 @@
+'use client'
+
+import { useState, useMemo } from 'react'
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+} from 'recharts'
+import {
+  Calculator,
+  TrendingDown,
+  DollarSign,
+  Check,
+  ArrowRight,
+  BarChart3,
+  Percent,
+  PiggyBank,
+  Shield,
+} from 'lucide-react'
+import PayNowForm from '@/components/lp/shared/PayNowForm'
+import TestimonialCard from '@/components/lp/shared/TestimonialCard'
+import ComparisonTable from '@/components/lp/shared/ComparisonTable'
+import FAQAccordion from '@/components/lp/shared/FAQAccordion'
+import TrustBadges from '@/components/lp/shared/TrustBadges'
+import StickyMobileCTA from '@/components/lp/shared/StickyMobileCTA'
+import UrgencyBanner from '@/components/lp/shared/UrgencyBanner'
+import InfluencerBuzz from '@/components/lp/shared/InfluencerBuzz'
+import { PAYMENT_CONFIG, TESTIMONIALS } from '@/app/lp/_config/types'
+
+const PRIMARY_BLUE = '#0D47A1'
+const GREEN = '#00C853'
+const BG = '#E8EAF6'
+
+const BOOKING_OPTIONS = [
+  { label: 'Budget Hotel', nights: 5, costPerNight: 180, allInclusive: false, mealsPerDay: 80, drinksPerDay: 30 },
+  { label: 'Mid-Range Resort', nights: 5, costPerNight: 350, allInclusive: false, mealsPerDay: 120, drinksPerDay: 50 },
+  { label: 'All-Inclusive Resort', nights: 5, costPerNight: 550, allInclusive: true, mealsPerDay: 0, drinksPerDay: 0 },
+  { label: 'Luxury Resort', nights: 5, costPerNight: 800, allInclusive: true, mealsPerDay: 0, drinksPerDay: 0 },
+]
+
+function InteractiveCalculator() {
+  const [selectedOption, setSelectedOption] = useState(2)
+  const [travelers, setTravelers] = useState(2)
+
+  const option = BOOKING_OPTIONS[selectedOption]
+
+  const traditionalCost = useMemo(() => {
+    const roomCost = option.costPerNight * option.nights
+    const mealCost = option.allInclusive ? 0 : option.mealsPerDay * option.nights * travelers
+    const drinkCost = option.allInclusive ? 0 : option.drinksPerDay * option.nights * travelers
+    return roomCost + mealCost + drinkCost
+  }, [selectedOption, travelers, option])
+
+  const ourCost = PAYMENT_CONFIG.oneTimePrice
+  const savings = Math.max(0, traditionalCost - ourCost)
+  const savingsPercent = traditionalCost > 0 ? Math.round((savings / traditionalCost) * 100) : 0
+
+  const chartData = [
+    {
+      name: option.label,
+      cost: traditionalCost,
+      fill: '#EF5350',
+    },
+    {
+      name: 'Expedia Avg',
+      cost: Math.round(traditionalCost * 0.85),
+      fill: '#FF9800',
+    },
+    {
+      name: 'Mexico Paradise',
+      cost: ourCost,
+      fill: GREEN,
+    },
+  ]
+
+  return (
+    <div className="space-y-8">
+      {/* Controls */}
+      <div className="grid sm:grid-cols-2 gap-6">
+        <div>
+          <label
+            className="block text-sm font-semibold mb-3"
+            style={{ fontFamily: 'var(--font-ibm-plex)', color: PRIMARY_BLUE }}
+          >
+            Compare Against:
+          </label>
+          <div className="space-y-2">
+            {BOOKING_OPTIONS.map((opt, i) => (
+              <button
+                key={opt.label}
+                onClick={() => setSelectedOption(i)}
+                className={`w-full text-left px-4 py-3 rounded-lg border-2 transition-all text-sm font-medium ${
+                  selectedOption === i
+                    ? 'border-blue-600 bg-blue-50'
+                    : 'border-gray-200 bg-white hover:border-gray-300'
+                }`}
+                style={{ fontFamily: 'var(--font-ibm-plex)' }}
+              >
+                {opt.label}
+                <span className="text-gray-400 ml-2">~${opt.costPerNight}/night</span>
+              </button>
+            ))}
+          </div>
+        </div>
+        <div>
+          <label
+            className="block text-sm font-semibold mb-3"
+            style={{ fontFamily: 'var(--font-ibm-plex)', color: PRIMARY_BLUE }}
+          >
+            Number of Travelers:
+          </label>
+          <div className="flex gap-2">
+            {[1, 2, 3, 4].map((n) => (
+              <button
+                key={n}
+                onClick={() => setTravelers(n)}
+                className={`flex-1 py-3 rounded-lg border-2 font-bold transition-all ${
+                  travelers === n
+                    ? 'border-blue-600 bg-blue-50 text-blue-700'
+                    : 'border-gray-200 bg-white hover:border-gray-300 text-gray-600'
+                }`}
+                style={{ fontFamily: 'var(--font-ibm-plex)' }}
+              >
+                {n}
+              </button>
+            ))}
+          </div>
+          <p className="text-xs text-gray-400 mt-2" style={{ fontFamily: 'var(--font-ibm-plex)' }}>
+            Certificate covers 2 guests. Additional guests at discounted rate.
+          </p>
+
+          {/* Savings Highlight */}
+          <div className="mt-6 rounded-xl p-6 border-2" style={{ borderColor: GREEN, backgroundColor: `${GREEN}10` }}>
+            <p className="text-sm text-gray-500 mb-1" style={{ fontFamily: 'var(--font-ibm-plex)' }}>
+              YOUR ESTIMATED SAVINGS
+            </p>
+            <p className="text-4xl font-bold" style={{ fontFamily: 'var(--font-ibm-plex)', color: GREEN }}>
+              ${savings.toLocaleString()}
+            </p>
+            <p className="text-sm mt-1" style={{ color: GREEN, fontFamily: 'var(--font-ibm-plex)' }}>
+              That&apos;s {savingsPercent}% less than {option.label}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Chart */}
+      <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
+        <h3
+          className="text-lg font-bold mb-6"
+          style={{ fontFamily: 'var(--font-ibm-plex)', color: PRIMARY_BLUE }}
+        >
+          Cost Comparison: 5-Day Mexico Vacation
+        </h3>
+        <div className="h-[300px]">
+          <ResponsiveContainer width="100%" height="100%">
+            <BarChart data={chartData} barCategoryGap="25%">
+              <CartesianGrid strokeDasharray="3 3" stroke="#E0E0E0" />
+              <XAxis
+                dataKey="name"
+                tick={{ fontSize: 12, fontFamily: 'var(--font-ibm-plex)' }}
+                axisLine={{ stroke: '#E0E0E0' }}
+              />
+              <YAxis
+                tick={{ fontSize: 12, fontFamily: 'var(--font-ibm-plex)' }}
+                axisLine={{ stroke: '#E0E0E0' }}
+                tickFormatter={(v) => `$${v}`}
+              />
+              <Tooltip
+                formatter={(value: number) => [`$${value.toLocaleString()}`, 'Total Cost']}
+                contentStyle={{ fontFamily: 'var(--font-ibm-plex)', fontSize: '13px' }}
+              />
+              <Bar dataKey="cost" radius={[8, 8, 0, 0]}>
+                {chartData.map((entry, index) => (
+                  <rect key={index} fill={entry.fill} />
+                ))}
+              </Bar>
+            </BarChart>
+          </ResponsiveContainer>
+        </div>
+        <div className="flex items-center justify-center gap-6 mt-4 text-xs text-gray-500" style={{ fontFamily: 'var(--font-ibm-plex)' }}>
+          <span className="flex items-center gap-1"><span className="w-3 h-3 rounded bg-red-400" /> Traditional</span>
+          <span className="flex items-center gap-1"><span className="w-3 h-3 rounded bg-orange-400" /> Online Travel</span>
+          <span className="flex items-center gap-1"><span className="w-3 h-3 rounded" style={{ backgroundColor: GREEN }} /> Mexico Paradise</span>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function StatCard({
+  icon: Icon,
+  value,
+  label,
+  color = PRIMARY_BLUE,
+}: {
+  icon: React.ElementType
+  value: string
+  label: string
+  color?: string
+}) {
+  return (
+    <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100 text-center">
+      <Icon className="w-8 h-8 mx-auto mb-3" style={{ color }} />
+      <p className="text-3xl font-bold mb-1" style={{ fontFamily: 'var(--font-ibm-plex)', color }}>
+        {value}
+      </p>
+      <p className="text-sm text-gray-500" style={{ fontFamily: 'var(--font-ibm-plex)' }}>
+        {label}
+      </p>
+    </div>
+  )
+}
+
+export default function LP09Calculator() {
+  return (
+    <div className="min-h-screen" style={{ fontFamily: 'var(--font-ibm-plex)', backgroundColor: BG }}>
+      <UrgencyBanner variant="combined" />
+
+      {/* Header */}
+      <header className="py-4 px-4 border-b bg-white/80 backdrop-blur-sm sticky top-0 z-50 pt-20">
+        <div className="max-w-6xl mx-auto flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <BarChart3 className="w-6 h-6" style={{ color: PRIMARY_BLUE }} />
+            <span className="font-bold text-lg" style={{ color: PRIMARY_BLUE }}>
+              Mexico Paradise
+            </span>
+          </div>
+          <a
+            href="#signup-form"
+            className="text-sm font-semibold text-white px-5 py-2 rounded-lg hover:opacity-90 transition-opacity"
+            style={{ backgroundColor: GREEN }}
+          >
+            Get Started
+          </a>
+        </div>
+      </header>
+
+      {/* Hero */}
+      <section className="py-16 sm:py-20 px-4">
+        <div className="max-w-4xl mx-auto text-center">
+          <div
+            className="inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm font-semibold mb-6"
+            style={{ backgroundColor: `${PRIMARY_BLUE}15`, color: PRIMARY_BLUE }}
+          >
+            <Calculator className="w-4 h-4" />
+            Data-Driven Travel Savings
+          </div>
+          <h1
+            className="text-4xl sm:text-5xl md:text-6xl font-bold leading-tight mb-6"
+            style={{ color: PRIMARY_BLUE }}
+          >
+            The Math<br />
+            <span style={{ color: GREEN }}>Doesn&apos;t Lie</span>
+          </h1>
+          <p className="text-lg sm:text-xl text-gray-600 max-w-2xl mx-auto mb-10 leading-relaxed">
+            See exactly how much you save with a Mexico Paradise Vacation Certificate
+            compared to booking through traditional channels.
+          </p>
+
+          {/* Stats Row */}
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
+            <StatCard icon={DollarSign} value={`$${PAYMENT_CONFIG.oneTimePrice}`} label="Total Cost" color={GREEN} />
+            <StatCard icon={TrendingDown} value="87%" label="Avg Savings" color={PRIMARY_BLUE} />
+            <StatCard icon={Percent} value="$1.30" label="Per Day" color={GREEN} />
+            <StatCard icon={PiggyBank} value="$2,601" label="You Save" color={PRIMARY_BLUE} />
+          </div>
+        </div>
+      </section>
+
+      {/* Interactive Calculator */}
+      <section className="py-16 px-4" style={{ backgroundColor: '#f5f5f5' }}>
+        <div className="max-w-4xl mx-auto">
+          <div className="text-center mb-10">
+            <h2 className="text-3xl font-bold mb-3" style={{ color: PRIMARY_BLUE }}>
+              Interactive Cost Calculator
+            </h2>
+            <p className="text-gray-600">
+              Compare our price against different booking options. Adjust the inputs below.
+            </p>
+          </div>
+          <InteractiveCalculator />
+        </div>
+      </section>
+
+      {/* Comparison Table */}
+      <section className="py-16 px-4">
+        <div className="max-w-4xl mx-auto">
+          <div className="text-center mb-10">
+            <h2 className="text-3xl font-bold mb-3" style={{ color: PRIMARY_BLUE }}>
+              Feature-by-Feature Breakdown
+            </h2>
+            <p className="text-gray-600">
+              It&apos;s not just about price. See what&apos;s included.
+            </p>
+          </div>
+          <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
+            <ComparisonTable accentColor={GREEN} />
+          </div>
+        </div>
+      </section>
+
+      {/* Value Breakdown */}
+      <section className="py-16 px-4" style={{ backgroundColor: PRIMARY_BLUE }}>
+        <div className="max-w-4xl mx-auto text-center">
+          <h2 className="text-3xl font-bold mb-4 text-white">
+            What&apos;s Included In Your ${PAYMENT_CONFIG.oneTimePrice}
+          </h2>
+          <p className="text-blue-200 mb-10 text-lg">
+            Every item below is included. No hidden fees. No surprises.
+          </p>
+          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
+            {[
+              { item: '5 Days / 4 Nights', value: '$1,200 value' },
+              { item: 'All Meals Included', value: '$800 value' },
+              { item: 'Unlimited Drinks', value: '$400 value' },
+              { item: 'Resort Amenities', value: '$400 value' },
+              { item: 'Bring A Guest Free', value: '$500 value' },
+              { item: 'Flexible Booking', value: '$200 value' },
+            ].map((item) => (
+              <div
+                key={item.item}
+                className="rounded-xl p-5 text-left flex items-start gap-3"
+                style={{ backgroundColor: 'rgba(255,255,255,0.1)' }}
+              >
+                <Check className="w-5 h-5 shrink-0 mt-0.5" style={{ color: GREEN }} />
+                <div>
+                  <p className="text-white font-semibold text-sm">{item.item}</p>
+                  <p className="text-blue-300 text-xs">{item.value}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+          <div className="mt-8 inline-flex items-center gap-2 px-6 py-3 rounded-full bg-white/10 border border-white/20">
+            <p className="text-white">
+              <span className="text-blue-200">Total retail value:</span>{' '}
+              <span className="line-through text-blue-300">$3,500</span>{' '}
+              <span className="font-bold text-lg" style={{ color: GREEN }}>
+                ${PAYMENT_CONFIG.oneTimePrice}
+              </span>
+            </p>
+          </div>
+        </div>
+      </section>
+
+      {/* Social Proof */}
+      <section className="py-16 px-4">
+        <div className="max-w-4xl mx-auto">
+          <h2 className="text-3xl font-bold text-center mb-3" style={{ color: PRIMARY_BLUE }}>
+            Verified Reviews
+          </h2>
+          <p className="text-center text-gray-500 mb-10">
+            From travelers who ran the numbers and took the trip.
+          </p>
+          <div className="grid md:grid-cols-3 gap-6">
+            {TESTIMONIALS.slice(0, 3).map((t, i) => (
+              <TestimonialCard
+                key={i}
+                quote={t.quote}
+                name={t.name}
+                location={t.location}
+                photo={t.photo}
+              />
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Pricing + Form */}
+      <section className="py-16 px-4" id="signup-form" style={{ backgroundColor: '#f5f5f5' }}>
+        <div className="max-w-lg mx-auto">
+          <div className="text-center mb-8">
+            <h2 className="text-3xl font-bold mb-3" style={{ color: PRIMARY_BLUE }}>
+              Ready To Save?
+            </h2>
+            <p className="text-gray-600">
+              Lock in your vacation certificate at today&apos;s price.
+            </p>
+          </div>
+          <div className="bg-white rounded-2xl shadow-lg p-8 border border-gray-100">
+            <div className="flex items-center justify-center gap-3 mb-6 pb-6 border-b border-gray-100">
+              <div className="text-center">
+                <p className="text-sm text-gray-400 line-through">$3,000+</p>
+                <p className="text-4xl font-bold" style={{ color: GREEN }}>
+                  ${PAYMENT_CONFIG.monthlyPrice}<span className="text-lg text-gray-400">/mo</span>
+                </p>
+                <p className="text-xs text-gray-500">
+                  or ${PAYMENT_CONFIG.oneTimePrice} one-time
+                </p>
+              </div>
+            </div>
+            <PayNowForm
+              accentColor={GREEN}
+              buttonText="Secure My Certificate"
+            />
+          </div>
+          <div className="mt-6">
+            <TrustBadges variant="horizontal" />
+          </div>
+        </div>
+      </section>
+
+      <InfluencerBuzz />
+
+      {/* FAQ */}
+      <section className="py-16 px-4">
+        <div className="max-w-3xl mx-auto">
+          <h2 className="text-3xl font-bold text-center mb-10" style={{ color: PRIMARY_BLUE }}>
+            Frequently Asked Questions
+          </h2>
+          <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
+            <FAQAccordion />
+          </div>
+        </div>
+      </section>
+
+      {/* Bottom CTA */}
+      <section className="py-12 px-4" style={{ backgroundColor: GREEN }}>
+        <div className="max-w-3xl mx-auto text-center">
+          <h2 className="text-3xl font-bold text-white mb-4">
+            The numbers speak for themselves.
+          </h2>
+          <p className="text-white/90 mb-6 text-lg">
+            Save an average of $2,601 on your next Mexico vacation.
+          </p>
+          <a
+            href="#signup-form"
+            className="inline-flex items-center gap-2 bg-white px-8 py-4 rounded-lg font-bold text-lg hover:bg-gray-100 transition-colors"
+            style={{ color: GREEN }}
+          >
+            Start Saving Now
+            <ArrowRight className="w-5 h-5" />
+          </a>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="py-8 px-4 text-center bg-white border-t">
+        <p className="text-gray-400 text-sm">
+          Mexico Paradise Vacations. All rights reserved.
+        </p>
+      </footer>
+
+      <StickyMobileCTA accentColor={GREEN} buttonText="See My Savings" />
+    </div>
+  )
+}
diff --git a/src/components/lp/pages/LP10Countdown.tsx b/src/components/lp/pages/LP10Countdown.tsx
new file mode 100644
index 0000000..a37e8df
--- /dev/null
+++ b/src/components/lp/pages/LP10Countdown.tsx
@@ -0,0 +1,501 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import {
+  Flame,
+  Check,
+  ArrowRight,
+  AlertTriangle,
+  Zap,
+  Star,
+  Shield,
+  MapPin,
+  Clock,
+  Gift,
+  Lock,
+} from 'lucide-react'
+import PayNowForm from '@/components/lp/shared/PayNowForm'
+import CountdownTimer from '@/components/lp/shared/CountdownTimer'
+import TrustBadges from '@/components/lp/shared/TrustBadges'
+import FAQAccordion from '@/components/lp/shared/FAQAccordion'
+import TestimonialCard from '@/components/lp/shared/TestimonialCard'
+import StickyMobileCTA from '@/components/lp/shared/StickyMobileCTA'
+import UrgencyBanner from '@/components/lp/shared/UrgencyBanner'
+import InfluencerBuzz from '@/components/lp/shared/InfluencerBuzz'
+import { PAYMENT_CONFIG, TESTIMONIALS, DESTINATIONS } from '@/app/lp/_config/types'
+
+const BLACK = '#000000'
+const RED = '#F44336'
+const AMBER = '#FFC107'
+
+const FEATURES = [
+  {
+    icon: MapPin,
+    title: '4 Premium Destinations',
+    description: 'Cancun, Cabo San Lucas, Riviera Maya, or Puerto Vallarta',
+  },
+  {
+    icon: Clock,
+    title: '5 Days / 4 Nights',
+    description: 'A full vacation, not a weekend getaway',
+  },
+  {
+    icon: Gift,
+    title: 'All-Inclusive Package',
+    description: 'Every meal, every drink, every activity included',
+  },
+  {
+    icon: Star,
+    title: '4-5 Star Resorts',
+    description: 'Luxury properties with world-class amenities',
+  },
+  {
+    icon: Shield,
+    title: '30-Day Money Back',
+    description: 'Full refund if you change your mind',
+  },
+  {
+    icon: Zap,
+    title: 'Flexible Booking',
+    description: '18 months to choose your travel dates',
+  },
+]
+
+function PulsingDot() {
+  return (
+    <span className="relative flex h-3 w-3">
+      <span className="animate-ping absolute inline-flex h-full w-full rounded-full opacity-75" style={{ backgroundColor: RED }} />
+      <span className="relative inline-flex rounded-full h-3 w-3" style={{ backgroundColor: RED }} />
+    </span>
+  )
+}
+
+function SpotsCounter() {
+  const [spots, setSpots] = useState(47)
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setSpots(prev => {
+        if (prev <= 12) return prev
+        return Math.random() > 0.7 ? prev - 1 : prev
+      })
+    }, 30000)
+    return () => clearInterval(interval)
+  }, [])
+
+  return (
+    <div className="flex items-center gap-2">
+      <PulsingDot />
+      <span className="font-bold" style={{ color: RED }}>{spots}</span>
+      <span className="text-gray-400 text-sm">spots remaining</span>
+    </div>
+  )
+}
+
+export default function LP10Countdown() {
+  return (
+    <div className="min-h-screen bg-black text-white" style={{ fontFamily: 'var(--font-barlow)' }}>
+      <UrgencyBanner variant="combined" />
+
+      {/* Urgency Bar */}
+      <div className="w-full py-2 text-center text-sm font-bold pt-20" style={{ backgroundColor: RED }}>
+        <div className="flex items-center justify-center gap-2">
+          <AlertTriangle className="w-4 h-4" />
+          <span style={{ fontFamily: 'var(--font-bebas)', letterSpacing: '0.1em' }}>
+            LIMITED TIME OFFER &mdash; PRICE INCREASES WHEN TIMER HITS ZERO
+          </span>
+          <AlertTriangle className="w-4 h-4" />
+        </div>
+      </div>
+
+      {/* Countdown Hero */}
+      <section className="relative min-h-screen flex flex-col items-center justify-center px-4 overflow-hidden">
+        {/* Background */}
+        <div className="absolute inset-0">
+          <img
+            src="/images/cdn/photo-1510097467424-192d713fd8b2.jpg"
+            alt="Dark beach scene"
+            className="w-full h-full object-cover opacity-20"
+          />
+          <div className="absolute inset-0 bg-gradient-to-b from-black via-black/80 to-black" />
+        </div>
+
+        {/* Animated background particles effect using CSS */}
+        <div className="absolute inset-0 overflow-hidden">
+          {Array.from({ length: 6 }).map((_, i) => (
+            <div
+              key={i}
+              className="absolute w-1 h-1 rounded-full animate-pulse"
+              style={{
+                backgroundColor: i % 2 === 0 ? RED : AMBER,
+                top: `${15 + i * 15}%`,
+                left: `${10 + i * 15}%`,
+                opacity: 0.3,
+                animationDelay: `${i * 0.5}s`,
+              }}
+            />
+          ))}
+        </div>
+
+        <div className="relative z-10 text-center max-w-4xl mx-auto">
+          <div className="flex items-center justify-center gap-2 mb-6">
+            <Flame className="w-5 h-5" style={{ color: RED }} />
+            <span
+              className="text-sm uppercase tracking-[0.3em]"
+              style={{ color: AMBER }}
+            >
+              Exclusive Limited Drop
+            </span>
+            <Flame className="w-5 h-5" style={{ color: RED }} />
+          </div>
+
+          <h1
+            className="text-5xl sm:text-6xl md:text-8xl font-bold leading-none mb-8 tracking-tight"
+            style={{ fontFamily: 'var(--font-bebas)' }}
+          >
+            OFFER EXPIRES<br />
+            <span className="inline-block mt-2" style={{ color: RED }}>WHEN THE CLOCK</span><br />
+            <span style={{ color: AMBER }}>HITS ZERO</span>
+          </h1>
+
+          {/* Giant Countdown */}
+          <div className="flex justify-center mb-10">
+            <CountdownTimer
+              variant="flip"
+              bgColor="#1a1a1a"
+              textColor="#FFFFFF"
+              accentColor={RED}
+              className="scale-110 sm:scale-125 md:scale-150"
+            />
+          </div>
+
+          <div className="flex items-center justify-center mb-8">
+            <SpotsCounter />
+          </div>
+
+          <a
+            href="#signup-form"
+            className="inline-flex items-center gap-3 px-10 py-5 rounded-lg font-bold text-lg uppercase tracking-wider hover:scale-105 transition-transform"
+            style={{
+              backgroundColor: RED,
+              fontFamily: 'var(--font-bebas)',
+              letterSpacing: '0.15em',
+              fontSize: '1.25rem',
+            }}
+          >
+            Claim Your Certificate Now
+            <ArrowRight className="w-6 h-6" />
+          </a>
+          <p className="text-gray-500 text-sm mt-4">
+            ${PAYMENT_CONFIG.monthlyPrice}/mo for {PAYMENT_CONFIG.totalMonths} months or ${PAYMENT_CONFIG.oneTimePrice} one-time
+          </p>
+        </div>
+
+        {/* Scroll indicator */}
+        <div className="absolute bottom-8 left-1/2 -translate-x-1/2">
+          <div className="w-6 h-10 rounded-full border-2 border-white/20 flex justify-center pt-2">
+            <div className="w-1.5 h-3 rounded-full bg-white/40 animate-bounce" />
+          </div>
+        </div>
+      </section>
+
+      {/* "What You're Getting" Section */}
+      <section className="py-20 px-4 border-t border-gray-900">
+        <div className="max-w-4xl mx-auto">
+          <div className="text-center mb-14">
+            <h2
+              className="text-4xl sm:text-5xl font-bold mb-4"
+              style={{ fontFamily: 'var(--font-bebas)', letterSpacing: '0.05em' }}
+            >
+              WHAT YOU&apos;RE <span style={{ color: AMBER }}>GETTING</span>
+            </h2>
+            <p className="text-gray-400 text-lg">
+              5 days of all-inclusive luxury. Here&apos;s the full breakdown.
+            </p>
+          </div>
+
+          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
+            {FEATURES.map((feature) => (
+              <div
+                key={feature.title}
+                className="rounded-xl p-6 border border-gray-800 hover:border-gray-700 transition-colors bg-gray-950"
+              >
+                <feature.icon className="w-8 h-8 mb-4" style={{ color: AMBER }} />
+                <h3
+                  className="text-xl font-bold mb-2"
+                  style={{ fontFamily: 'var(--font-bebas)', letterSpacing: '0.05em' }}
+                >
+                  {feature.title}
+                </h3>
+                <p className="text-gray-400 text-sm leading-relaxed">
+                  {feature.description}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Price Anchor */}
+      <section className="py-16 px-4" style={{ backgroundColor: '#0a0a0a' }}>
+        <div className="max-w-3xl mx-auto text-center">
+          <h2
+            className="text-3xl sm:text-4xl font-bold mb-8"
+            style={{ fontFamily: 'var(--font-bebas)', letterSpacing: '0.05em' }}
+          >
+            THE REAL COST OF <span style={{ color: RED }}>NOT</span> ACTING
+          </h2>
+          <div className="grid sm:grid-cols-3 gap-4 mb-8">
+            <div className="rounded-xl p-6 border border-gray-800 bg-black">
+              <p className="text-gray-500 text-sm mb-2">Book Direct</p>
+              <p className="text-3xl font-bold text-red-400 line-through" style={{ fontFamily: 'var(--font-bebas)' }}>
+                $3,000+
+              </p>
+            </div>
+            <div className="rounded-xl p-6 border border-gray-800 bg-black">
+              <p className="text-gray-500 text-sm mb-2">Expedia / Hotels.com</p>
+              <p className="text-3xl font-bold text-orange-400 line-through" style={{ fontFamily: 'var(--font-bebas)' }}>
+                $2,500+
+              </p>
+            </div>
+            <div className="rounded-xl p-6 border-2 bg-black" style={{ borderColor: AMBER }}>
+              <p className="text-sm mb-2" style={{ color: AMBER }}>Mexico Paradise</p>
+              <p className="text-3xl font-bold" style={{ fontFamily: 'var(--font-bebas)', color: AMBER }}>
+                ${PAYMENT_CONFIG.oneTimePrice}
+              </p>
+            </div>
+          </div>
+          <p className="text-gray-400 text-lg">
+            That&apos;s <span className="font-bold text-white">${PAYMENT_CONFIG.monthlyPrice}/month</span> &mdash;
+            less than a streaming subscription for a luxury vacation.
+          </p>
+        </div>
+      </section>
+
+      {/* Destination Previews */}
+      <section className="py-20 px-4 border-t border-gray-900">
+        <div className="max-w-5xl mx-auto">
+          <div className="text-center mb-14">
+            <h2
+              className="text-4xl sm:text-5xl font-bold mb-4"
+              style={{ fontFamily: 'var(--font-bebas)', letterSpacing: '0.05em' }}
+            >
+              CHOOSE YOUR <span style={{ color: RED }}>DESTINATION</span>
+            </h2>
+            <p className="text-gray-400 text-lg">
+              All four locations included with your certificate.
+            </p>
+          </div>
+
+          <div className="grid sm:grid-cols-2 gap-4">
+            {DESTINATIONS.map((dest) => (
+              <div
+                key={dest.name}
+                className="relative rounded-xl overflow-hidden group cursor-pointer"
+              >
+                <img
+                  src={dest.images[0]}
+                  alt={dest.name}
+                  className="w-full h-56 sm:h-64 object-cover transition-transform duration-700 group-hover:scale-110 brightness-50 group-hover:brightness-75"
+                />
+                <div className="absolute inset-0 border border-gray-800 rounded-xl group-hover:border-gray-600 transition-colors" />
+                <div className="absolute bottom-0 left-0 right-0 p-6">
+                  <h3
+                    className="text-2xl font-bold text-white mb-1"
+                    style={{ fontFamily: 'var(--font-bebas)', letterSpacing: '0.05em' }}
+                  >
+                    {dest.name}
+                  </h3>
+                  <p className="text-gray-400 text-sm">{dest.tagline}</p>
+                </div>
+                <div
+                  className="absolute top-4 right-4 w-8 h-8 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
+                  style={{ backgroundColor: RED }}
+                >
+                  <ArrowRight className="w-4 h-4 text-white" />
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Testimonials */}
+      <section className="py-16 px-4" style={{ backgroundColor: '#0a0a0a' }}>
+        <div className="max-w-4xl mx-auto">
+          <h2
+            className="text-3xl sm:text-4xl font-bold text-center mb-10"
+            style={{ fontFamily: 'var(--font-bebas)', letterSpacing: '0.05em' }}
+          >
+            WHAT OTHERS ARE <span style={{ color: AMBER }}>SAYING</span>
+          </h2>
+          <div className="grid md:grid-cols-2 gap-6">
+            {TESTIMONIALS.slice(0, 4).map((t, i) => (
+              <TestimonialCard
+                key={i}
+                quote={t.quote}
+                name={t.name}
+                location={t.location}
+                photo={t.photo}
+                variant="dark"
+              />
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Mini Countdown Reminder */}
+      <section className="py-12 px-4 border-y border-gray-800" style={{ backgroundColor: RED }}>
+        <div className="max-w-3xl mx-auto text-center">
+          <h2
+            className="text-3xl sm:text-4xl font-bold mb-4"
+            style={{ fontFamily: 'var(--font-bebas)', letterSpacing: '0.05em' }}
+          >
+            TIME IS RUNNING OUT
+          </h2>
+          <div className="flex justify-center mb-4">
+            <CountdownTimer variant="digital" bgColor="rgba(0,0,0,0.3)" textColor="#FFFFFF" accentColor="#FFC107" />
+          </div>
+          <a
+            href="#signup-form"
+            className="inline-flex items-center gap-2 bg-black px-8 py-4 rounded-lg font-bold uppercase tracking-wider hover:bg-gray-900 transition-colors"
+            style={{ fontFamily: 'var(--font-bebas)', letterSpacing: '0.1em' }}
+          >
+            Don&apos;t Miss Out
+            <ArrowRight className="w-5 h-5" />
+          </a>
+        </div>
+      </section>
+
+      {/* Trust Badges */}
+      <section className="py-16 px-4">
+        <div className="max-w-3xl mx-auto text-center">
+          <h2
+            className="text-2xl font-bold mb-8"
+            style={{ fontFamily: 'var(--font-bebas)', letterSpacing: '0.05em' }}
+          >
+            SECURE & <span style={{ color: AMBER }}>GUARANTEED</span>
+          </h2>
+          <div className="grid grid-cols-2 sm:grid-cols-4 gap-6">
+            {[
+              { icon: Lock, label: '256-bit SSL' },
+              { icon: Shield, label: '30-Day Guarantee' },
+              { icon: Star, label: '4.8/5 Rating' },
+              { icon: Check, label: 'Verified Business' },
+            ].map((badge) => (
+              <div key={badge.label} className="flex flex-col items-center gap-2">
+                <div
+                  className="w-12 h-12 rounded-full flex items-center justify-center border border-gray-800"
+                  style={{ backgroundColor: '#111' }}
+                >
+                  <badge.icon className="w-5 h-5" style={{ color: AMBER }} />
+                </div>
+                <span className="text-xs text-gray-400">{badge.label}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Signup Form */}
+      <section id="signup-form" className="py-20 px-4 relative">
+        <div className="absolute inset-0 bg-gradient-to-b from-black via-gray-950 to-black" />
+        <div className="absolute inset-0 border-t border-gray-800" />
+
+        <div className="relative z-10 max-w-lg mx-auto">
+          <div className="text-center mb-8">
+            <div className="flex items-center justify-center gap-2 mb-4">
+              <Flame className="w-6 h-6" style={{ color: RED }} />
+              <span
+                className="text-sm uppercase tracking-[0.3em]"
+                style={{ color: AMBER }}
+              >
+                Secure Your Spot
+              </span>
+              <Flame className="w-6 h-6" style={{ color: RED }} />
+            </div>
+            <h2
+              className="text-4xl sm:text-5xl font-bold mb-3"
+              style={{ fontFamily: 'var(--font-bebas)', letterSpacing: '0.05em' }}
+            >
+              CLAIM YOUR <span style={{ color: RED }}>CERTIFICATE</span>
+            </h2>
+            <p className="text-gray-400">
+              Before the clock runs out and this price disappears.
+            </p>
+          </div>
+
+          <div className="rounded-2xl p-8 border border-gray-800" style={{ backgroundColor: '#111' }}>
+            {/* Mini countdown in form */}
+            <div className="flex items-center justify-center gap-3 mb-6 pb-6 border-b border-gray-800">
+              <Clock className="w-4 h-4" style={{ color: RED }} />
+              <CountdownTimer variant="minimal" accentColor={RED} />
+              <span className="text-gray-500 text-sm">remaining</span>
+            </div>
+
+            <PayNowForm
+              variant="dark"
+              accentColor={RED}
+              buttonText="CLAIM MY CERTIFICATE"
+            />
+          </div>
+
+          <div className="mt-6">
+            <TrustBadges variant="compact" textColor="#6B7280" />
+          </div>
+        </div>
+      </section>
+
+      {/* FAQ */}
+      <InfluencerBuzz variant="dark" />
+
+      <section className="py-16 px-4" style={{ backgroundColor: '#0a0a0a' }}>
+        <div className="max-w-3xl mx-auto">
+          <h2
+            className="text-3xl font-bold text-center mb-10"
+            style={{ fontFamily: 'var(--font-bebas)', letterSpacing: '0.05em' }}
+          >
+            QUESTIONS? <span style={{ color: AMBER }}>ANSWERED.</span>
+          </h2>
+          <FAQAccordion variant="dark" />
+        </div>
+      </section>
+
+      {/* Final CTA */}
+      <section className="py-16 px-4 border-t border-gray-800">
+        <div className="max-w-3xl mx-auto text-center">
+          <h2
+            className="text-3xl sm:text-4xl font-bold mb-6"
+            style={{ fontFamily: 'var(--font-bebas)', letterSpacing: '0.05em' }}
+          >
+            THE CLOCK IS <span style={{ color: RED }}>TICKING</span>
+          </h2>
+          <div className="flex justify-center mb-6">
+            <CountdownTimer variant="flip" bgColor="#1a1a1a" textColor="#FFFFFF" accentColor={RED} />
+          </div>
+          <a
+            href="#signup-form"
+            className="inline-flex items-center gap-3 px-10 py-5 rounded-lg font-bold text-lg uppercase tracking-wider hover:scale-105 transition-transform"
+            style={{
+              backgroundColor: RED,
+              fontFamily: 'var(--font-bebas)',
+              letterSpacing: '0.15em',
+            }}
+          >
+            Last Chance &mdash; Get It Now
+            <ArrowRight className="w-6 h-6" />
+          </a>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="py-8 px-4 text-center border-t border-gray-900">
+        <p className="text-gray-600 text-sm">
+          Mexico Paradise Vacations. All rights reserved.
+        </p>
+      </footer>
+
+      <StickyMobileCTA accentColor={RED} buttonText="Claim Now" />
+    </div>
+  )
+}
diff --git a/src/components/lp/pages/LP11TheGuide.tsx b/src/components/lp/pages/LP11TheGuide.tsx
new file mode 100644
index 0000000..b1a3926
--- /dev/null
+++ b/src/components/lp/pages/LP11TheGuide.tsx
@@ -0,0 +1,429 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { BookOpen, Clock, User, ChevronRight, MapPin } from 'lucide-react'
+import EbookCaptureForm from '@/components/lp/shared/EbookCaptureForm'
+import PayNowForm from '@/components/lp/shared/PayNowForm'
+import FAQAccordion from '@/components/lp/shared/FAQAccordion'
+import StickyMobileCTA from '@/components/lp/shared/StickyMobileCTA'
+import TrustBadges from '@/components/lp/shared/TrustBadges'
+import TestimonialCard from '@/components/lp/shared/TestimonialCard'
+import UrgencyBanner from '@/components/lp/shared/UrgencyBanner'
+import InfluencerBuzz from '@/components/lp/shared/InfluencerBuzz'
+import { TESTIMONIALS, DESTINATIONS, PAYMENT_CONFIG } from '@/app/lp/_config/types'
+
+export default function LP11TheGuide() {
+  const [scrollProgress, setScrollProgress] = useState(0)
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const scrollTop = window.scrollY
+      const docHeight = document.documentElement.scrollHeight - window.innerHeight
+      const progress = docHeight > 0 ? (scrollTop / docHeight) * 100 : 0
+      setScrollProgress(Math.min(progress, 100))
+    }
+    window.addEventListener('scroll', handleScroll, { passive: true })
+    return () => window.removeEventListener('scroll', handleScroll)
+  }, [])
+
+  return (
+    <div
+      className="min-h-screen bg-white"
+      style={{ fontFamily: 'var(--font-open-sans), system-ui, sans-serif' }}
+    >
+      <UrgencyBanner variant="countdown" />
+
+      {/* Reading Progress Bar */}
+      <div className="fixed top-0 left-0 right-0 z-50 h-1 bg-gray-200">
+        <div
+          className="h-full transition-all duration-150 ease-out"
+          style={{
+            width: `${scrollProgress}%`,
+            backgroundColor: '#1B5E20',
+          }}
+        />
+      </div>
+
+      {/* Top Navigation Bar */}
+      <nav className="sticky top-1 z-40 bg-white/95 backdrop-blur-sm border-b border-gray-100 pt-20">
+        <div className="max-w-3xl mx-auto px-4 py-3 flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <MapPin className="w-5 h-5" style={{ color: '#1B5E20' }} />
+            <span
+              className="text-lg font-bold"
+              style={{
+                fontFamily: 'var(--font-merriweather), Georgia, serif',
+                color: '#1B5E20',
+              }}
+            >
+              Mexico Paradise Journal
+            </span>
+          </div>
+          <button
+            onClick={() => document.getElementById('ebook-capture')?.scrollIntoView({ behavior: 'smooth' })}
+            className="text-sm font-semibold px-4 py-2 rounded-full text-white"
+            style={{ backgroundColor: '#FF9800' }}
+          >
+            Free Guide
+          </button>
+        </div>
+      </nav>
+
+      {/* Article Header */}
+      <header className="max-w-3xl mx-auto px-4 pt-10 pb-6">
+        <div className="flex items-center gap-3 mb-4 text-sm text-gray-500">
+          <span className="px-3 py-1 rounded-full text-xs font-semibold text-white" style={{ backgroundColor: '#1B5E20' }}>
+            Travel Guide
+          </span>
+          <span className="flex items-center gap-1">
+            <Clock className="w-3.5 h-3.5" />
+            12 min read
+          </span>
+          <span className="flex items-center gap-1">
+            <User className="w-3.5 h-3.5" />
+            Editorial Team
+          </span>
+        </div>
+
+        <h1
+          className="text-3xl sm:text-4xl md:text-5xl leading-tight mb-4"
+          style={{
+            fontFamily: 'var(--font-merriweather), Georgia, serif',
+            color: '#1B5E20',
+            fontWeight: 700,
+          }}
+        >
+          5 Secrets to Luxury Mexico Vacations on a Budget
+        </h1>
+
+        <p className="text-lg text-gray-600 leading-relaxed mb-6">
+          How savvy travelers are staying at 5-star all-inclusive resorts in Cancun, Cabo,
+          and the Riviera Maya for less than $1.30 a day. Yes, you read that right.
+        </p>
+
+        <div className="flex items-center gap-4 pb-6 border-b border-gray-200">
+          <img
+            src="/images/cdn/photo-1472099645785-5658abf4ff4e.jpg"
+            alt="Author"
+            className="w-12 h-12 rounded-full object-cover"
+          />
+          <div>
+            <p className="font-semibold text-gray-900">Marco Rivera</p>
+            <p className="text-sm text-gray-500">Travel Editor -- Updated March 2026</p>
+          </div>
+        </div>
+      </header>
+
+      {/* Hero Image */}
+      <div className="max-w-4xl mx-auto px-4 mb-10">
+        <div className="relative rounded-2xl overflow-hidden aspect-[16/9]">
+          <img
+            src="/images/cdn/photo-1510097467424-192d713fd8b2.jpg"
+            alt="Cancun beach resort at sunset"
+            className="w-full h-full object-cover"
+          />
+          <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent p-6">
+            <p className="text-white/80 text-sm">Cancun, Mexico -- One of four destinations in the program</p>
+          </div>
+        </div>
+      </div>
+
+      {/* Article Body */}
+      <article className="max-w-3xl mx-auto px-4">
+        {/* Intro paragraph */}
+        <p className="text-lg text-gray-700 leading-relaxed mb-6">
+          Every year, millions of Americans dream of a tropical getaway but convince themselves
+          it&apos;s out of reach. The average all-inclusive Mexico vacation costs between $2,500 and
+          $4,000 per couple. But what if there was a way to enjoy the same crystal-clear waters,
+          gourmet dining, and luxury suites for a fraction of that price?
+        </p>
+
+        <p className="text-lg text-gray-700 leading-relaxed mb-8">
+          After spending three years investigating vacation certificate programs across the
+          industry, our editorial team uncovered a legitimate pathway that thousands of travelers
+          are already using. Here&apos;s what we found.
+        </p>
+
+        {/* Secret #1 */}
+        <h2
+          className="text-2xl sm:text-3xl mb-4"
+          style={{
+            fontFamily: 'var(--font-merriweather), Georgia, serif',
+            color: '#1B5E20',
+            fontWeight: 700,
+          }}
+        >
+          Secret #1: The Resort Presentation Model
+        </h2>
+
+        <p className="text-lg text-gray-700 leading-relaxed mb-4">
+          Here&apos;s what most people don&apos;t realize: luxury resorts in Mexico have a massive
+          customer acquisition problem. Their rooms are often half-empty during shoulder seasons,
+          and they&apos;re willing to offer deeply discounted stays to potential future members.
+        </p>
+
+        <p className="text-lg text-gray-700 leading-relaxed mb-4">
+          The catch? You attend a 90-minute resort presentation during your stay. No obligation
+          to buy anything. You listen, you say &quot;no thank you&quot; if it&apos;s not for you,
+          and you go back to sipping margaritas by the infinity pool.
+        </p>
+
+        <p className="text-lg text-gray-700 leading-relaxed mb-8">
+          This model has existed for decades in the timeshare industry, but a new wave of
+          vacation certificate programs has made it accessible, transparent, and genuinely
+          affordable. The result? A 5-night, all-inclusive stay at a resort that normally
+          charges $400+/night, available for as little as $39/month.
+        </p>
+
+        {/* Inline destination images */}
+        <div className="grid grid-cols-2 gap-3 mb-8 rounded-xl overflow-hidden">
+          <img
+            src="/images/cdn/photo-1580415200778-625cb1890ab5.jpg"
+            alt="Cabo San Lucas"
+            className="w-full h-48 object-cover rounded-lg"
+          />
+          <img
+            src="/images/cdn/photo-1518638150340-f706e86654de.jpg"
+            alt="Riviera Maya"
+            className="w-full h-48 object-cover rounded-lg"
+          />
+        </div>
+
+        {/* Secret #2 */}
+        <h2
+          className="text-2xl sm:text-3xl mb-4"
+          style={{
+            fontFamily: 'var(--font-merriweather), Georgia, serif',
+            color: '#1B5E20',
+            fontWeight: 700,
+          }}
+        >
+          Secret #2: Timing Is Everything
+        </h2>
+
+        <p className="text-lg text-gray-700 leading-relaxed mb-4">
+          The second secret experienced budget-luxury travelers know is that <em>when</em> you
+          travel matters just as much as <em>how</em> you book. Mexico&apos;s shoulder seasons --
+          May through mid-June and September through November -- offer the same stunning weather
+          with a fraction of the crowds.
+        </p>
+
+        <p className="text-lg text-gray-700 leading-relaxed mb-8">
+          Certificate programs give you an 18-month window to book, which means you can
+          strategically choose dates when resorts roll out their best perks: room upgrades,
+          spa credits, and premium dining packages. One couple we interviewed scored a
+          suite upgrade that would have cost $200/night extra -- simply by traveling in
+          early October.
+        </p>
+
+        {/* Secret #3 preview */}
+        <h2
+          className="text-2xl sm:text-3xl mb-4"
+          style={{
+            fontFamily: 'var(--font-merriweather), Georgia, serif',
+            color: '#1B5E20',
+            fontWeight: 700,
+          }}
+        >
+          Secret #3: The All-Inclusive Advantage
+        </h2>
+
+        <p className="text-lg text-gray-700 leading-relaxed mb-6">
+          Most travelers underestimate how much they spend on food, drinks, and activities
+          during a vacation. Our research found the average couple spends $150-$250 <em>per day</em> on
+          dining and entertainment alone. With an all-inclusive certificate, every meal, every
+          cocktail, every poolside snack is already covered.
+        </p>
+
+        {/* Callout box */}
+        <div
+          className="rounded-xl p-6 mb-8 border-l-4"
+          style={{ backgroundColor: '#E8F5E9', borderColor: '#1B5E20' }}
+        >
+          <p className="text-sm font-semibold mb-1" style={{ color: '#1B5E20' }}>
+            By the numbers
+          </p>
+          <p className="text-2xl font-bold text-gray-900 mb-1">
+            ${PAYMENT_CONFIG.monthlyPrice}/month x {PAYMENT_CONFIG.totalMonths} months = ${PAYMENT_CONFIG.totalPrice} total
+          </p>
+          <p className="text-sm text-gray-600">
+            vs. the average all-inclusive vacation cost of $3,200+ per couple.
+            That&apos;s over $2,800 in savings.
+          </p>
+        </div>
+
+        <p className="text-lg text-gray-700 leading-relaxed mb-4">
+          But there are two more secrets that can save you even more -- and they&apos;re the
+          ones most &quot;travel hack&quot; articles won&apos;t tell you about...
+        </p>
+
+        {/* Content Gate - Fade out effect */}
+        <div className="relative mb-2">
+          <p className="text-lg text-gray-700 leading-relaxed">
+            Secret #4 involves a little-known booking strategy that experienced certificate
+            holders use to maximize their stay. And Secret #5? It&apos;s the one thing that
+            separates travelers who have a &quot;good&quot; vacation from those who have the
+            trip of a lifetime...
+          </p>
+          <div className="absolute bottom-0 left-0 right-0 h-24 bg-gradient-to-t from-white to-transparent" />
+        </div>
+      </article>
+
+      {/* Ebook Capture Section */}
+      <section id="ebook-capture" className="max-w-3xl mx-auto px-4 py-10">
+        <div
+          className="rounded-2xl p-8 text-center"
+          style={{ backgroundColor: '#F1F8E9' }}
+        >
+          <BookOpen className="w-12 h-12 mx-auto mb-4" style={{ color: '#1B5E20' }} />
+          <h3
+            className="text-2xl sm:text-3xl mb-2"
+            style={{
+              fontFamily: 'var(--font-merriweather), Georgia, serif',
+              color: '#1B5E20',
+              fontWeight: 700,
+            }}
+          >
+            Read the Full Guide -- Free
+          </h3>
+          <p className="text-gray-600 mb-6 max-w-md mx-auto">
+            Get all 5 secrets plus our destination comparison chart, packing checklist,
+            and insider resort ratings. Delivered instantly to your inbox.
+          </p>
+          <div className="max-w-md mx-auto">
+            <EbookCaptureForm
+              variant="card"
+              accentColor="#FF9800"
+              buttonText="Send Me the Full Guide"
+              sourceLp="the-guide"
+              showIcon={false}
+            />
+          </div>
+          <p className="text-xs text-gray-500 mt-4">
+            Join 12,400+ readers who downloaded this guide.
+          </p>
+        </div>
+      </section>
+
+      {/* Destination Preview */}
+      <section className="max-w-3xl mx-auto px-4 py-10">
+        <h2
+          className="text-2xl sm:text-3xl mb-6 text-center"
+          style={{
+            fontFamily: 'var(--font-merriweather), Georgia, serif',
+            color: '#1B5E20',
+            fontWeight: 700,
+          }}
+        >
+          Four Destinations, One Certificate
+        </h2>
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+          {DESTINATIONS.map((dest) => (
+            <div key={dest.name} className="relative rounded-xl overflow-hidden group cursor-pointer">
+              <img
+                src={dest.images[0]}
+                alt={dest.name}
+                className="w-full h-56 object-cover transition-transform duration-500 group-hover:scale-105"
+              />
+              <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent" />
+              <div className="absolute bottom-0 left-0 right-0 p-4">
+                <h3
+                  className="text-xl font-bold text-white mb-1"
+                  style={{ fontFamily: 'var(--font-merriweather), Georgia, serif' }}
+                >
+                  {dest.name}
+                </h3>
+                <p className="text-white/80 text-sm">{dest.tagline}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* Testimonials */}
+      <section className="max-w-3xl mx-auto px-4 py-10">
+        <h2
+          className="text-2xl sm:text-3xl mb-6 text-center"
+          style={{
+            fontFamily: 'var(--font-merriweather), Georgia, serif',
+            color: '#1B5E20',
+            fontWeight: 700,
+          }}
+        >
+          What Travelers Are Saying
+        </h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {TESTIMONIALS.slice(0, 4).map((t, i) => (
+            <TestimonialCard
+              key={i}
+              quote={t.quote}
+              name={t.name}
+              location={t.location}
+              photo={t.photo}
+            />
+          ))}
+        </div>
+      </section>
+
+      {/* Secondary PayNow Section */}
+      <section className="max-w-3xl mx-auto px-4 py-10" id="signup-form">
+        <div className="rounded-2xl border border-gray-200 p-8">
+          <h2
+            className="text-2xl sm:text-3xl mb-2 text-center"
+            style={{
+              fontFamily: 'var(--font-merriweather), Georgia, serif',
+              color: '#1B5E20',
+              fontWeight: 700,
+            }}
+          >
+            Ready to Skip the Guide?
+          </h2>
+          <p className="text-gray-600 text-center mb-6 max-w-md mx-auto">
+            Claim your 5-day, 4-night all-inclusive Mexico vacation certificate now.
+            Just ${PAYMENT_CONFIG.monthlyPrice}/month or ${PAYMENT_CONFIG.oneTimePrice} one-time.
+          </p>
+          <div className="max-w-md mx-auto">
+            <PayNowForm
+              accentColor="#1B5E20"
+              buttonText="Get My Vacation Certificate"
+            />
+          </div>
+          <TrustBadges variant="compact" className="mt-6" />
+        </div>
+      </section>
+
+      <InfluencerBuzz />
+
+      {/* FAQ */}
+      <section className="max-w-3xl mx-auto px-4 py-10 pb-20">
+        <h2
+          className="text-2xl sm:text-3xl mb-6 text-center"
+          style={{
+            fontFamily: 'var(--font-merriweather), Georgia, serif',
+            color: '#1B5E20',
+            fontWeight: 700,
+          }}
+        >
+          Frequently Asked Questions
+        </h2>
+        <FAQAccordion />
+      </section>
+
+      {/* Footer */}
+      <footer className="border-t border-gray-200 py-8 text-center text-sm text-gray-500">
+        <p>Mexico Paradise Vacations -- All rights reserved</p>
+        <div className="flex items-center justify-center gap-4 mt-2">
+          <a href="#" className="hover:text-gray-700">Privacy Policy</a>
+          <a href="#" className="hover:text-gray-700">Terms of Service</a>
+          <a href="#" className="hover:text-gray-700">Contact</a>
+        </div>
+      </footer>
+
+      <StickyMobileCTA
+        accentColor="#FF9800"
+        buttonText="Get Free Guide"
+        targetId="ebook-capture"
+      />
+    </div>
+  )
+}
diff --git a/src/components/lp/pages/LP12Dreamboard.tsx b/src/components/lp/pages/LP12Dreamboard.tsx
new file mode 100644
index 0000000..a2428e8
--- /dev/null
+++ b/src/components/lp/pages/LP12Dreamboard.tsx
@@ -0,0 +1,389 @@
+'use client'
+
+import { useState } from 'react'
+import { Heart, Sparkles, Plane, Star } from 'lucide-react'
+import EbookCaptureForm from '@/components/lp/shared/EbookCaptureForm'
+import PayNowForm from '@/components/lp/shared/PayNowForm'
+import StickyMobileCTA from '@/components/lp/shared/StickyMobileCTA'
+import TestimonialCard from '@/components/lp/shared/TestimonialCard'
+import TrustBadges from '@/components/lp/shared/TrustBadges'
+import PricingDisplay from '@/components/lp/shared/PricingDisplay'
+import UrgencyBanner from '@/components/lp/shared/UrgencyBanner'
+import InfluencerBuzz from '@/components/lp/shared/InfluencerBuzz'
+import { TESTIMONIALS, PAYMENT_CONFIG } from '@/app/lp/_config/types'
+
+const DREAM_PHOTOS = [
+  {
+    src: '/images/cdn/photo-1552074284-5e88ef1aef18.jpg',
+    label: 'Cancun Sunsets',
+    height: 'h-72',
+  },
+  {
+    src: '/images/cdn/photo-1507525428034-b723cf961d3e.jpg',
+    label: 'Pristine Beaches',
+    height: 'h-48',
+  },
+  {
+    src: '/images/cdn/photo-1551882547-ff40c63fe5fa.jpg',
+    label: 'Luxury Pools',
+    height: 'h-64',
+  },
+  {
+    src: '/images/cdn/photo-1581710862235-eb6e05d8783f.jpg',
+    label: 'Riviera Maya',
+    height: 'h-56',
+  },
+  {
+    src: '/images/cdn/photo-1544551763-46a013bb70d5.jpg',
+    label: 'Crystal Waters',
+    height: 'h-80',
+  },
+  {
+    src: '/images/cdn/photo-1580846629083-02669741360a.jpg',
+    label: 'Cabo Magic',
+    height: 'h-48',
+  },
+  {
+    src: '/images/cdn/photo-1581710862235-eb6e05d8783f.jpg',
+    label: 'Ocean Views',
+    height: 'h-60',
+  },
+  {
+    src: '/images/cdn/photo-1585793753011-397e6e4668d6.jpg',
+    label: 'Golden Horizons',
+    height: 'h-72',
+  },
+  {
+    src: '/images/cdn/photo-1519046904884-53103b34b206.jpg',
+    label: 'Beach Bliss',
+    height: 'h-52',
+  },
+  {
+    src: '/images/cdn/photo-1571896349842-33c89424de2d.jpg',
+    label: 'Resort Paradise',
+    height: 'h-72',
+  },
+  {
+    src: '/images/cdn/photo-1473116763249-2faaef81ccda.jpg',
+    label: 'Puerto Vallarta',
+    height: 'h-56',
+  },
+  {
+    src: '/images/cdn/photo-1540541338287-41700207dee6.jpg',
+    label: 'Coastal Dreams',
+    height: 'h-64',
+  },
+]
+
+export default function LP12Dreamboard() {
+  const [likedPhotos, setLikedPhotos] = useState<Set<number>>(new Set())
+
+  const toggleLike = (index: number) => {
+    setLikedPhotos((prev) => {
+      const next = new Set(prev)
+      if (next.has(index)) {
+        next.delete(index)
+      } else {
+        next.add(index)
+      }
+      return next
+    })
+  }
+
+  return (
+    <div
+      className="min-h-screen"
+      style={{
+        fontFamily: 'var(--font-quicksand), system-ui, sans-serif',
+        background: 'linear-gradient(180deg, #FFF0F5 0%, #FFFFFF 30%, #F3E5F5 70%, #FFF0F5 100%)',
+      }}
+    >
+      <UrgencyBanner variant="countdown" />
+
+      {/* Hero Section */}
+      <section className="relative overflow-hidden py-16 sm:py-24 px-4 pt-20">
+        {/* Decorative circles */}
+        <div className="absolute top-10 right-10 w-40 h-40 rounded-full opacity-20" style={{ backgroundColor: '#F8BBD0' }} />
+        <div className="absolute bottom-10 left-10 w-60 h-60 rounded-full opacity-15" style={{ backgroundColor: '#CE93D8' }} />
+        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 rounded-full opacity-10" style={{ backgroundColor: '#F8BBD0' }} />
+
+        <div className="relative max-w-3xl mx-auto text-center">
+          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full mb-6" style={{ backgroundColor: '#FCE4EC' }}>
+            <Sparkles className="w-4 h-4" style={{ color: '#880E4F' }} />
+            <span className="text-sm font-semibold" style={{ color: '#880E4F' }}>
+              Build Your Dream Vacation Board
+            </span>
+          </div>
+
+          <h1
+            className="text-4xl sm:text-5xl md:text-6xl leading-tight mb-6"
+            style={{
+              fontFamily: 'var(--font-poppins), system-ui, sans-serif',
+              fontWeight: 800,
+              color: '#4A148C',
+            }}
+          >
+            Where Will Your
+            <br />
+            <span
+              className="bg-clip-text text-transparent"
+              style={{
+                backgroundImage: 'linear-gradient(135deg, #880E4F, #4A148C, #F8BBD0)',
+              }}
+            >
+              Dreams Take You?
+            </span>
+          </h1>
+
+          <p className="text-lg sm:text-xl text-gray-600 max-w-xl mx-auto mb-8 leading-relaxed">
+            Close your eyes. Picture yourself on a pristine Mexican beach, cocktail in hand,
+            waves lapping at your feet. Now open them -- and start planning.
+          </p>
+
+          <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
+            <button
+              onClick={() => document.getElementById('dream-ebook')?.scrollIntoView({ behavior: 'smooth' })}
+              className="px-8 py-4 rounded-full text-white font-bold text-lg shadow-lg transition-transform hover:scale-105"
+              style={{
+                backgroundImage: 'linear-gradient(135deg, #880E4F, #4A148C)',
+              }}
+            >
+              Get Your Free Travel Guide
+            </button>
+            <span className="text-sm text-gray-500">
+              <Star className="w-4 h-4 inline mr-1 fill-yellow-400 text-yellow-400" />
+              Downloaded by 12,400+ dreamers
+            </span>
+          </div>
+        </div>
+      </section>
+
+      {/* Masonry Photo Grid */}
+      <section className="max-w-6xl mx-auto px-4 py-10">
+        <h2
+          className="text-2xl sm:text-3xl text-center mb-2"
+          style={{
+            fontFamily: 'var(--font-poppins), system-ui, sans-serif',
+            fontWeight: 700,
+            color: '#4A148C',
+          }}
+        >
+          Your Vacation Mood Board
+        </h2>
+        <p className="text-center text-gray-500 mb-8">
+          Tap the heart on your favorites -- your dream vacation is closer than you think
+        </p>
+
+        <div
+          className="gap-4"
+          style={{
+            columnCount: 3,
+            columnGap: '1rem',
+          }}
+        >
+          {DREAM_PHOTOS.map((photo, i) => (
+            <div
+              key={i}
+              className="relative mb-4 rounded-2xl overflow-hidden group cursor-pointer break-inside-avoid"
+            >
+              <img
+                src={photo.src}
+                alt={photo.label}
+                className={`w-full object-cover transition-transform duration-500 group-hover:scale-105 ${photo.height}`}
+              />
+              <div className="absolute inset-0 bg-gradient-to-t from-black/50 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+
+              {/* Like button */}
+              <button
+                onClick={() => toggleLike(i)}
+                className="absolute top-3 right-3 w-10 h-10 rounded-full bg-white/80 backdrop-blur-sm flex items-center justify-center transition-transform hover:scale-110 shadow-md"
+              >
+                <Heart
+                  className={`w-5 h-5 transition-colors ${
+                    likedPhotos.has(i) ? 'fill-pink-500 text-pink-500' : 'text-gray-400'
+                  }`}
+                />
+              </button>
+
+              {/* Label */}
+              <div className="absolute bottom-0 left-0 right-0 p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+                <p className="text-white font-semibold text-sm">{photo.label}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {likedPhotos.size > 0 && (
+          <div className="text-center mt-6">
+            <p className="text-sm" style={{ color: '#880E4F' }}>
+              <Heart className="w-4 h-4 inline fill-pink-500 text-pink-500 mr-1" />
+              You&apos;ve saved {likedPhotos.size} dream{likedPhotos.size !== 1 ? 's' : ''} -- get the guide to make them real!
+            </p>
+          </div>
+        )}
+      </section>
+
+      {/* Ebook Capture Overlay Section */}
+      <section id="dream-ebook" className="py-16 px-4">
+        <div className="max-w-lg mx-auto relative">
+          {/* Decorative background */}
+          <div
+            className="absolute inset-0 rounded-3xl -rotate-2 scale-105"
+            style={{
+              backgroundImage: 'linear-gradient(135deg, #F8BBD0, #CE93D8)',
+              opacity: 0.3,
+            }}
+          />
+          <div className="relative rounded-3xl bg-white p-8 sm:p-10 shadow-xl">
+            <div className="text-center mb-6">
+              <div
+                className="w-16 h-16 rounded-2xl mx-auto flex items-center justify-center mb-4"
+                style={{ backgroundColor: '#FCE4EC' }}
+              >
+                <Sparkles className="w-8 h-8" style={{ color: '#880E4F' }} />
+              </div>
+              <h3
+                className="text-2xl sm:text-3xl mb-2"
+                style={{
+                  fontFamily: 'var(--font-poppins), system-ui, sans-serif',
+                  fontWeight: 700,
+                  color: '#4A148C',
+                }}
+              >
+                Turn Dreams into Plans
+              </h3>
+              <p className="text-gray-500">
+                Get our free &quot;Budget Luxury Travel&quot; guide with 5 secrets to
+                luxury Mexico vacations on a budget.
+              </p>
+            </div>
+
+            <EbookCaptureForm
+              variant="card"
+              accentColor="#880E4F"
+              buttonText="Send Me the Free Guide"
+              sourceLp="dreamboard"
+              showIcon={false}
+            />
+          </div>
+        </div>
+      </section>
+
+      {/* Destinations showcase */}
+      <section className="max-w-4xl mx-auto px-4 py-16">
+        <h2
+          className="text-2xl sm:text-3xl text-center mb-10"
+          style={{
+            fontFamily: 'var(--font-poppins), system-ui, sans-serif',
+            fontWeight: 700,
+            color: '#4A148C',
+          }}
+        >
+          Four Dreamy Destinations
+        </h2>
+
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+          {[
+            { name: 'Cancun', img: '/images/cdn/photo-1552074284-5e88ef1aef18.jpg' },
+            { name: 'Cabo San Lucas', img: '/images/cdn/photo-1580846629083-02669741360a.jpg' },
+            { name: 'Riviera Maya', img: '/images/cdn/photo-1581710862235-eb6e05d8783f.jpg' },
+            { name: 'Puerto Vallarta', img: '/images/cdn/photo-1473116763249-2faaef81ccda.jpg' },
+          ].map((d) => (
+            <div key={d.name} className="relative rounded-2xl overflow-hidden group">
+              <img
+                src={d.img}
+                alt={d.name}
+                className="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110"
+              />
+              <div className="absolute inset-0 bg-gradient-to-t from-purple-900/70 to-transparent" />
+              <div className="absolute bottom-0 left-0 right-0 p-4 text-center">
+                <p
+                  className="text-white font-bold text-sm sm:text-base"
+                  style={{ fontFamily: 'var(--font-poppins), system-ui, sans-serif' }}
+                >
+                  {d.name}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* Testimonials */}
+      <section className="max-w-4xl mx-auto px-4 py-10">
+        <h2
+          className="text-2xl sm:text-3xl text-center mb-8"
+          style={{
+            fontFamily: 'var(--font-poppins), system-ui, sans-serif',
+            fontWeight: 700,
+            color: '#4A148C',
+          }}
+        >
+          Dreamers Who Made It Real
+        </h2>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          {TESTIMONIALS.slice(0, 3).map((t, i) => (
+            <TestimonialCard
+              key={i}
+              quote={t.quote}
+              name={t.name}
+              location={t.location}
+              photo={t.photo}
+            />
+          ))}
+        </div>
+      </section>
+
+      {/* PayNow Section */}
+      <section className="max-w-lg mx-auto px-4 py-16" id="signup-form">
+        <div
+          className="rounded-3xl p-8 sm:p-10 text-center"
+          style={{ backgroundColor: '#FCE4EC' }}
+        >
+          <Plane className="w-10 h-10 mx-auto mb-4" style={{ color: '#880E4F' }} />
+          <h2
+            className="text-2xl sm:text-3xl mb-2"
+            style={{
+              fontFamily: 'var(--font-poppins), system-ui, sans-serif',
+              fontWeight: 700,
+              color: '#4A148C',
+            }}
+          >
+            Your Dream Vacation Starts Here
+          </h2>
+          <p className="text-gray-600 mb-6">
+            5 days, 4 nights all-inclusive in Mexico.
+            Starting at just ${PAYMENT_CONFIG.monthlyPrice}/month.
+          </p>
+
+          <PricingDisplay accentColor="#880E4F" className="mb-6" />
+
+          <PayNowForm
+            accentColor="#880E4F"
+            buttonText="Claim My Dream Vacation"
+          />
+
+          <TrustBadges variant="compact" className="mt-6" />
+        </div>
+      </section>
+
+      <InfluencerBuzz />
+
+      {/* Footer */}
+      <footer className="py-8 text-center text-sm text-gray-500 px-4">
+        <p>Mexico Paradise Vacations -- All rights reserved</p>
+        <div className="flex items-center justify-center gap-4 mt-2">
+          <a href="#" className="hover:text-gray-700">Privacy</a>
+          <a href="#" className="hover:text-gray-700">Terms</a>
+          <a href="#" className="hover:text-gray-700">Contact</a>
+        </div>
+      </footer>
+
+      <StickyMobileCTA
+        accentColor="#880E4F"
+        buttonText="Get Free Guide"
+        targetId="dream-ebook"
+      />
+    </div>
+  )
+}
diff --git a/src/components/lp/pages/LP13QuizFunnel.tsx b/src/components/lp/pages/LP13QuizFunnel.tsx
new file mode 100644
index 0000000..1b3f362
--- /dev/null
+++ b/src/components/lp/pages/LP13QuizFunnel.tsx
@@ -0,0 +1,508 @@
+'use client'
+
+import { useState } from 'react'
+import { ChevronRight, ChevronLeft, Compass, Sun, Moon, Users, Wallet, MapPin, Sparkles, Check } from 'lucide-react'
+import EbookCaptureForm from '@/components/lp/shared/EbookCaptureForm'
+import PayNowForm from '@/components/lp/shared/PayNowForm'
+import StickyMobileCTA from '@/components/lp/shared/StickyMobileCTA'
+import TrustBadges from '@/components/lp/shared/TrustBadges'
+import TestimonialCard from '@/components/lp/shared/TestimonialCard'
+import UrgencyBanner from '@/components/lp/shared/UrgencyBanner'
+import InfluencerBuzz from '@/components/lp/shared/InfluencerBuzz'
+import { TESTIMONIALS, PAYMENT_CONFIG } from '@/app/lp/_config/types'
+
+interface QuizOption {
+  label: string
+  value: string
+  icon: React.ReactNode
+  description: string
+}
+
+interface QuizQuestion {
+  id: number
+  question: string
+  subtitle: string
+  options: QuizOption[]
+}
+
+const QUESTIONS: QuizQuestion[] = [
+  {
+    id: 1,
+    question: 'What calls to you more?',
+    subtitle: 'Choose the vibe that matches your dream vacation',
+    options: [
+      {
+        label: 'Beach & Relaxation',
+        value: 'beach',
+        icon: <Sun className="w-8 h-8" />,
+        description: 'Soft sand, turquoise water, total bliss',
+      },
+      {
+        label: 'Adventure & Exploration',
+        value: 'adventure',
+        icon: <Compass className="w-8 h-8" />,
+        description: 'Ruins, cenotes, snorkeling, zip-lines',
+      },
+    ],
+  },
+  {
+    id: 2,
+    question: 'How do you spend your evenings?',
+    subtitle: 'Your ideal vacation night looks like...',
+    options: [
+      {
+        label: 'Vibrant Nightlife',
+        value: 'nightlife',
+        icon: <Moon className="w-8 h-8" />,
+        description: 'Clubs, bars, live music, dancing',
+      },
+      {
+        label: 'Peaceful Relaxation',
+        value: 'relaxation',
+        icon: <Sun className="w-8 h-8" />,
+        description: 'Spa, sunset cocktails, stargazing',
+      },
+    ],
+  },
+  {
+    id: 3,
+    question: "What's your budget style?",
+    subtitle: 'How you like to plan your spending',
+    options: [
+      {
+        label: 'Spread It Out',
+        value: 'monthly',
+        icon: <Wallet className="w-8 h-8" />,
+        description: `$${PAYMENT_CONFIG.monthlyPrice}/month -- easy payments`,
+      },
+      {
+        label: 'Pay Once & Done',
+        value: 'one-time',
+        icon: <Wallet className="w-8 h-8" />,
+        description: `$${PAYMENT_CONFIG.oneTimePrice} one-time -- save more`,
+      },
+    ],
+  },
+  {
+    id: 4,
+    question: "Who's coming with you?",
+    subtitle: 'Your travel crew matters for the perfect destination',
+    options: [
+      {
+        label: 'Partner / Couple',
+        value: 'partner',
+        icon: <Users className="w-8 h-8" />,
+        description: 'Romantic getaway for two',
+      },
+      {
+        label: 'Friends / Group',
+        value: 'group',
+        icon: <Users className="w-8 h-8" />,
+        description: 'Fun times with the crew',
+      },
+    ],
+  },
+]
+
+interface DestinationResult {
+  name: string
+  tagline: string
+  description: string
+  image: string
+  highlights: string[]
+}
+
+const RESULTS: Record<string, DestinationResult> = {
+  cancun: {
+    name: 'Cancun',
+    tagline: 'Your Perfect Match!',
+    description:
+      'With its stunning beaches, vibrant nightlife, and easy accessibility, Cancun is the ideal destination for your travel style. Enjoy world-class resorts, crystal-clear Caribbean waters, and endless entertainment options.',
+    image: '/images/cdn/photo-1510097467424-192d713fd8b2.jpg',
+    highlights: ['Pristine white sand beaches', 'World-class nightlife scene', 'Nearby Mayan ruins', 'Water sports paradise'],
+  },
+  cabo: {
+    name: 'Cabo San Lucas',
+    tagline: 'Your Dream Destination Awaits!',
+    description:
+      'Dramatic desert landscapes meet the sea in Cabo San Lucas. Perfect for couples seeking romance and adventure alike, with whale watching, sunset cruises, and luxury dining.',
+    image: '/images/cdn/photo-1580415200778-625cb1890ab5.jpg',
+    highlights: ['Iconic El Arco landmark', 'Luxury resort experiences', 'Whale watching season', 'Desert-meets-ocean scenery'],
+  },
+  riviera: {
+    name: 'Riviera Maya',
+    tagline: 'Adventure Meets Paradise!',
+    description:
+      'The Riviera Maya offers the best of both worlds -- ancient Mayan ruins, mysterious cenotes, and pristine Caribbean coastline. An explorer\'s dream with all the luxury you deserve.',
+    image: '/images/cdn/photo-1518638150340-f706e86654de.jpg',
+    highlights: ['Sacred cenote swimming', 'Tulum ruins by the sea', 'Eco-adventure parks', 'Secluded beach coves'],
+  },
+  vallarta: {
+    name: 'Puerto Vallarta',
+    tagline: 'Culture & Coast Combined!',
+    description:
+      'Puerto Vallarta charms with its cobblestone streets, vibrant art scene, and breathtaking Pacific sunsets. The warmth of Mexican culture shines brightest here.',
+    image: '/images/cdn/photo-1585793753011-397e6e4668d6.jpg',
+    highlights: ['Stunning Pacific sunsets', 'Rich cultural heritage', 'Malecon boardwalk', 'Authentic Mexican cuisine'],
+  },
+}
+
+function getResult(answers: Record<number, string>): DestinationResult {
+  const a1 = answers[1]
+  const a2 = answers[2]
+  const a4 = answers[4]
+
+  if (a1 === 'adventure' && a2 === 'relaxation') return RESULTS.riviera
+  if (a1 === 'beach' && a2 === 'nightlife') return RESULTS.cancun
+  if (a1 === 'beach' && a4 === 'partner') return RESULTS.cabo
+  if (a1 === 'adventure' && a2 === 'nightlife') return RESULTS.cancun
+  if (a4 === 'partner' && a2 === 'relaxation') return RESULTS.cabo
+  if (a1 === 'adventure') return RESULTS.riviera
+  if (a4 === 'group') return RESULTS.cancun
+  return RESULTS.vallarta
+}
+
+export default function LP13QuizFunnel() {
+  const [step, setStep] = useState<'intro' | 'quiz' | 'result'>('intro')
+  const [currentQuestion, setCurrentQuestion] = useState(0)
+  const [answers, setAnswers] = useState<Record<number, string>>({})
+
+  const handleAnswer = (questionId: number, value: string) => {
+    const newAnswers = { ...answers, [questionId]: value }
+    setAnswers(newAnswers)
+
+    // Auto-advance after short delay
+    setTimeout(() => {
+      if (currentQuestion < QUESTIONS.length - 1) {
+        setCurrentQuestion((prev) => prev + 1)
+      } else {
+        setStep('result')
+      }
+    }, 400)
+  }
+
+  const goBack = () => {
+    if (currentQuestion > 0) {
+      setCurrentQuestion((prev) => prev - 1)
+    } else {
+      setStep('intro')
+    }
+  }
+
+  const result = step === 'result' ? getResult(answers) : null
+  const progress = step === 'quiz' ? ((currentQuestion + 1) / QUESTIONS.length) * 100 : 0
+
+  return (
+    <div
+      className="min-h-screen"
+      style={{
+        fontFamily: 'var(--font-inter), system-ui, sans-serif',
+        backgroundColor: '#1E1B4B',
+      }}
+    >
+      <UrgencyBanner variant="countdown" />
+
+      {/* Intro Screen */}
+      {step === 'intro' && (
+        <div className="min-h-screen flex flex-col items-center justify-center px-4 py-16 pt-20 relative overflow-hidden">
+          {/* Background decoration */}
+          <div className="absolute top-20 left-10 w-72 h-72 rounded-full bg-indigo-500/10 blur-3xl" />
+          <div className="absolute bottom-20 right-10 w-96 h-96 rounded-full bg-emerald-500/10 blur-3xl" />
+
+          <div className="relative text-center max-w-lg">
+            <div className="w-20 h-20 rounded-2xl bg-indigo-500/20 flex items-center justify-center mx-auto mb-8">
+              <Compass className="w-10 h-10 text-indigo-400" />
+            </div>
+
+            <h1
+              className="text-4xl sm:text-5xl md:text-6xl font-bold text-white mb-4 leading-tight"
+              style={{ fontFamily: 'var(--font-manrope), system-ui, sans-serif' }}
+            >
+              Find Your Perfect
+              <br />
+              <span className="bg-clip-text text-transparent" style={{ backgroundImage: 'linear-gradient(135deg, #6366F1, #10B981)' }}>
+                Mexico Destination
+              </span>
+            </h1>
+
+            <p className="text-lg text-indigo-200 mb-10 max-w-md mx-auto">
+              Answer 4 quick questions and we&apos;ll match you with your ideal vacation spot --
+              plus get a free travel guide tailored to your style.
+            </p>
+
+            <button
+              onClick={() => setStep('quiz')}
+              className="group px-10 py-4 rounded-2xl text-white font-bold text-lg transition-all hover:scale-105 shadow-xl shadow-indigo-500/30"
+              style={{ backgroundImage: 'linear-gradient(135deg, #6366F1, #4F46E5)' }}
+            >
+              Start the Quiz
+              <ChevronRight className="w-5 h-5 inline ml-2 transition-transform group-hover:translate-x-1" />
+            </button>
+
+            <p className="text-indigo-400 text-sm mt-6">Takes less than 60 seconds</p>
+
+            {/* Feature grid */}
+            <div className="grid grid-cols-3 gap-4 mt-12 text-center">
+              {[
+                { icon: <MapPin className="w-5 h-5" />, label: '4 Destinations' },
+                { icon: <Sparkles className="w-5 h-5" />, label: 'Personalized' },
+                { icon: <Compass className="w-5 h-5" />, label: 'Free Guide' },
+              ].map((f) => (
+                <div key={f.label} className="text-indigo-300">
+                  <div className="flex justify-center mb-2">{f.icon}</div>
+                  <p className="text-xs">{f.label}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Quiz Steps */}
+      {step === 'quiz' && (
+        <div className="min-h-screen flex flex-col px-4 py-8">
+          {/* Progress Bar */}
+          <div className="max-w-lg mx-auto w-full mb-8">
+            <div className="flex items-center justify-between mb-3">
+              <button
+                onClick={goBack}
+                className="flex items-center gap-1 text-indigo-300 hover:text-white transition-colors text-sm"
+              >
+                <ChevronLeft className="w-4 h-4" />
+                Back
+              </button>
+              <span className="text-indigo-400 text-sm">
+                Question {currentQuestion + 1} of {QUESTIONS.length}
+              </span>
+            </div>
+            <div className="w-full h-2 bg-indigo-900/50 rounded-full overflow-hidden">
+              <div
+                className="h-full rounded-full transition-all duration-500 ease-out"
+                style={{
+                  width: `${progress}%`,
+                  backgroundImage: 'linear-gradient(90deg, #6366F1, #10B981)',
+                }}
+              />
+            </div>
+          </div>
+
+          {/* Question */}
+          <div className="flex-1 flex items-center justify-center">
+            <div className="max-w-lg w-full">
+              <h2
+                className="text-3xl sm:text-4xl font-bold text-white text-center mb-2"
+                style={{ fontFamily: 'var(--font-manrope), system-ui, sans-serif' }}
+              >
+                {QUESTIONS[currentQuestion].question}
+              </h2>
+              <p className="text-indigo-300 text-center mb-10">
+                {QUESTIONS[currentQuestion].subtitle}
+              </p>
+
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                {QUESTIONS[currentQuestion].options.map((option) => {
+                  const isSelected = answers[QUESTIONS[currentQuestion].id] === option.value
+                  return (
+                    <button
+                      key={option.value}
+                      onClick={() => handleAnswer(QUESTIONS[currentQuestion].id, option.value)}
+                      className={`relative p-6 rounded-2xl border-2 text-left transition-all duration-300 hover:scale-[1.02] ${
+                        isSelected
+                          ? 'border-indigo-400 bg-indigo-500/20'
+                          : 'border-indigo-800 bg-indigo-900/30 hover:border-indigo-600'
+                      }`}
+                    >
+                      {isSelected && (
+                        <div className="absolute top-3 right-3 w-6 h-6 rounded-full bg-green-500 flex items-center justify-center">
+                          <Check className="w-4 h-4 text-white" />
+                        </div>
+                      )}
+                      <div className="text-indigo-400 mb-3">{option.icon}</div>
+                      <h3 className="text-lg font-bold text-white mb-1">{option.label}</h3>
+                      <p className="text-sm text-indigo-300">{option.description}</p>
+                    </button>
+                  )
+                })}
+              </div>
+            </div>
+          </div>
+
+          {/* Step dots */}
+          <div className="flex justify-center gap-2 mt-8 pb-4">
+            {QUESTIONS.map((_, i) => (
+              <div
+                key={i}
+                className={`w-2.5 h-2.5 rounded-full transition-colors ${
+                  i === currentQuestion
+                    ? 'bg-indigo-400'
+                    : i < currentQuestion
+                    ? 'bg-green-500'
+                    : 'bg-indigo-800'
+                }`}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Result Screen */}
+      {step === 'result' && result && (
+        <div className="min-h-screen">
+          {/* Result Hero */}
+          <div className="relative">
+            <img
+              src={result.image}
+              alt={result.name}
+              className="w-full h-64 sm:h-80 object-cover"
+            />
+            <div className="absolute inset-0 bg-gradient-to-t from-[#1E1B4B] via-[#1E1B4B]/60 to-transparent" />
+            <div className="absolute bottom-0 left-0 right-0 p-6 sm:p-10">
+              <div className="max-w-2xl mx-auto">
+                <p className="text-emerald-400 font-semibold text-sm mb-2 flex items-center gap-2">
+                  <Sparkles className="w-4 h-4" />
+                  Based on your answers...
+                </p>
+                <h2
+                  className="text-3xl sm:text-4xl md:text-5xl font-bold text-white mb-1"
+                  style={{ fontFamily: 'var(--font-manrope), system-ui, sans-serif' }}
+                >
+                  {result.name}
+                </h2>
+                <p className="text-xl text-indigo-200">{result.tagline}</p>
+              </div>
+            </div>
+          </div>
+
+          {/* Result Content */}
+          <div className="max-w-2xl mx-auto px-4 py-10">
+            <p className="text-lg text-indigo-200 leading-relaxed mb-8">
+              {result.description}
+            </p>
+
+            {/* Highlights */}
+            <div className="grid grid-cols-2 gap-3 mb-10">
+              {result.highlights.map((h) => (
+                <div
+                  key={h}
+                  className="flex items-center gap-2 p-3 rounded-xl bg-indigo-900/50 border border-indigo-800"
+                >
+                  <Check className="w-4 h-4 text-emerald-400 shrink-0" />
+                  <span className="text-sm text-indigo-200">{h}</span>
+                </div>
+              ))}
+            </div>
+
+            {/* Ebook Gate */}
+            <div
+              id="ebook-capture"
+              className="rounded-2xl p-8 text-center mb-10"
+              style={{ backgroundColor: 'rgba(99, 102, 241, 0.15)', border: '1px solid rgba(99, 102, 241, 0.3)' }}
+            >
+              <h3
+                className="text-2xl font-bold text-white mb-2"
+                style={{ fontFamily: 'var(--font-manrope), system-ui, sans-serif' }}
+              >
+                Get Your Personalized {result.name} Guide
+              </h3>
+              <p className="text-indigo-300 mb-6">
+                Our free &quot;Budget Luxury Travel&quot; guide includes insider tips
+                specific to {result.name} -- best times to visit, hidden gems, and how to
+                get 5-star experiences on a budget.
+              </p>
+              <div className="max-w-sm mx-auto">
+                <EbookCaptureForm
+                  variant="inline"
+                  accentColor="#6366F1"
+                  buttonText="Get My Free Guide"
+                  sourceLp="quiz-funnel"
+                />
+              </div>
+              <p className="text-xs text-indigo-500 mt-3">
+                Instant download -- no spam, ever.
+              </p>
+            </div>
+
+            {/* Pricing teaser */}
+            <div className="text-center mb-10">
+              <p className="text-indigo-300 mb-2">Your {result.name} vacation starts at</p>
+              <p className="text-5xl font-bold text-white mb-1">
+                ${PAYMENT_CONFIG.monthlyPrice}<span className="text-xl text-indigo-400">/mo</span>
+              </p>
+              <p className="text-sm text-indigo-400">
+                5 days, 4 nights all-inclusive -- or ${PAYMENT_CONFIG.oneTimePrice} one-time
+              </p>
+            </div>
+
+            {/* Testimonials */}
+            <div className="space-y-4 mb-10">
+              <h3 className="text-xl font-bold text-white text-center mb-4" style={{ fontFamily: 'var(--font-manrope), system-ui, sans-serif' }}>
+                What Other Travelers Say
+              </h3>
+              {TESTIMONIALS.slice(0, 3).map((t, i) => (
+                <TestimonialCard
+                  key={i}
+                  quote={t.quote}
+                  name={t.name}
+                  location={t.location}
+                  photo={t.photo}
+                  variant="dark"
+                />
+              ))}
+            </div>
+
+            {/* PayNow Section */}
+            <div id="signup-form" className="rounded-2xl p-8 bg-indigo-900/50 border border-indigo-800">
+              <h3
+                className="text-2xl font-bold text-white text-center mb-2"
+                style={{ fontFamily: 'var(--font-manrope), system-ui, sans-serif' }}
+              >
+                Ready to Book {result.name}?
+              </h3>
+              <p className="text-indigo-300 text-center mb-6">
+                Claim your all-inclusive vacation certificate now
+              </p>
+              <PayNowForm
+                variant="dark"
+                accentColor="#6366F1"
+                buttonText={`Book My ${result.name} Trip`}
+              />
+              <TrustBadges variant="compact" textColor="#818CF8" className="mt-6" />
+            </div>
+
+            {/* Retake */}
+            <div className="text-center mt-8">
+              <button
+                onClick={() => {
+                  setStep('intro')
+                  setCurrentQuestion(0)
+                  setAnswers({})
+                }}
+                className="text-indigo-400 hover:text-indigo-300 text-sm underline underline-offset-4"
+              >
+                Retake the quiz
+              </button>
+            </div>
+          </div>
+
+          <InfluencerBuzz />
+
+          {/* Footer */}
+          <footer className="border-t border-indigo-900 py-8 text-center text-sm text-indigo-500 px-4">
+            <p>Mexico Paradise Vacations -- All rights reserved</p>
+            <div className="flex items-center justify-center gap-4 mt-2">
+              <a href="#" className="hover:text-indigo-300">Privacy</a>
+              <a href="#" className="hover:text-indigo-300">Terms</a>
+              <a href="#" className="hover:text-indigo-300">Contact</a>
+            </div>
+          </footer>
+
+          <StickyMobileCTA
+            accentColor="#6366F1"
+            buttonText="Get Free Guide"
+            targetId="ebook-capture"
+          />
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/src/components/lp/pages/LP14SocialWall.tsx b/src/components/lp/pages/LP14SocialWall.tsx
new file mode 100644
index 0000000..9310df6
--- /dev/null
+++ b/src/components/lp/pages/LP14SocialWall.tsx
@@ -0,0 +1,392 @@
+'use client'
+
+import { useState } from 'react'
+import { Heart, MessageCircle, Send, Bookmark, MoreHorizontal, Camera, Users } from 'lucide-react'
+import EbookCaptureForm from '@/components/lp/shared/EbookCaptureForm'
+import PayNowForm from '@/components/lp/shared/PayNowForm'
+import StickyMobileCTA from '@/components/lp/shared/StickyMobileCTA'
+import TestimonialCard from '@/components/lp/shared/TestimonialCard'
+import TrustBadges from '@/components/lp/shared/TrustBadges'
+import PricingDisplay from '@/components/lp/shared/PricingDisplay'
+import UrgencyBanner from '@/components/lp/shared/UrgencyBanner'
+import InfluencerBuzz from '@/components/lp/shared/InfluencerBuzz'
+import { TESTIMONIALS, PAYMENT_CONFIG } from '@/app/lp/_config/types'
+
+interface SocialPost {
+  id: number
+  username: string
+  avatar: string
+  image: string
+  caption: string
+  likes: number
+  comments: number
+  timeAgo: string
+  location: string
+}
+
+const SOCIAL_POSTS: SocialPost[] = [
+  {
+    id: 1,
+    username: 'sarahtravels_',
+    avatar: '/images/cdn/photo-1494790108377-be9c29b29330.jpg',
+    image: '/images/cdn/photo-1510097467424-192d713fd8b2.jpg',
+    caption: 'Still can\'t believe this was real life. Cancun you have my heart forever. Best $39/month I ever spent! #MexicoParadise #BudgetLuxury',
+    likes: 847,
+    comments: 43,
+    timeAgo: '2d',
+    location: 'Cancun, Mexico',
+  },
+  {
+    id: 2,
+    username: 'mike.and.jen',
+    avatar: '/images/cdn/photo-1472099645785-5658abf4ff4e.jpg',
+    image: '/images/cdn/photo-1580415200778-625cb1890ab5.jpg',
+    caption: 'El Arco at sunset hits different when you know you paid less than $400 for the whole trip. The resort was 5-star quality! #CaboSanLucas #VacationCertificate',
+    likes: 1243,
+    comments: 67,
+    timeAgo: '3d',
+    location: 'Cabo San Lucas, Mexico',
+  },
+  {
+    id: 3,
+    username: 'wanderlust.maria',
+    avatar: '/images/cdn/photo-1438761681033-6461ffad8d80.jpg',
+    image: '/images/cdn/photo-1518638150340-f706e86654de.jpg',
+    caption: 'Swimming in cenotes is a spiritual experience. The Riviera Maya exceeded every expectation. All meals included, all drinks included. This was the smartest travel decision I ever made.',
+    likes: 2104,
+    comments: 89,
+    timeAgo: '5d',
+    location: 'Riviera Maya, Mexico',
+  },
+  {
+    id: 4,
+    username: 'dave_explores',
+    avatar: '/images/cdn/photo-1500648767791-00dcc994a43e.jpg',
+    image: '/images/cdn/photo-1585793753011-397e6e4668d6.jpg',
+    caption: 'Puerto Vallarta sunsets are unmatched. We extended 3 extra nights because we couldn\'t leave. The food alone was worth 10x what we paid. #PuertoVallarta #Sunset',
+    likes: 956,
+    comments: 38,
+    timeAgo: '1w',
+    location: 'Puerto Vallarta, Mexico',
+  },
+  {
+    id: 5,
+    username: 'beach.rachel',
+    avatar: '/images/cdn/photo-1544005313-94ddf0286df2.jpg',
+    image: '/images/cdn/photo-1507525428034-b723cf961d3e.jpg',
+    caption: 'POV: You\'re paying $1.30/day for THIS. My friends thought I was joking when I told them the price. Nope, just smart travel planning. Download the free guide, seriously. #BudgetTravel',
+    likes: 3201,
+    comments: 156,
+    timeAgo: '4d',
+    location: 'Cancun, Mexico',
+  },
+  {
+    id: 6,
+    username: 'james.patricia',
+    avatar: '/images/cdn/photo-1522529599102-193c0d76b5b6.jpg',
+    image: '/images/cdn/photo-1551882547-ff40c63fe5fa.jpg',
+    caption: 'The infinity pool at our resort in Cabo. All-inclusive means all-inclusive -- every cocktail, every meal, every sunset. We saved over $2,800 compared to booking directly. Not a typo.',
+    likes: 1678,
+    comments: 72,
+    timeAgo: '6d',
+    location: 'Cabo San Lucas, Mexico',
+  },
+  {
+    id: 7,
+    username: 'travelwith.lisa',
+    avatar: '/images/cdn/photo-1494790108377-be9c29b29330.jpg',
+    image: '/images/cdn/photo-1581710862235-eb6e05d8783f.jpg',
+    caption: 'When people ask how we afford to travel so much... I just smile. The vacation certificate program changed everything for us. 5 nights for what most people pay for 1.',
+    likes: 2489,
+    comments: 104,
+    timeAgo: '1w',
+    location: 'Riviera Maya, Mexico',
+  },
+  {
+    id: 8,
+    username: 'sunset.chris',
+    avatar: '/images/cdn/photo-1472099645785-5658abf4ff4e.jpg',
+    image: '/images/cdn/photo-1468413253725-0d5181091f76.jpg',
+    caption: 'Day 4 in Puerto Vallarta and I never want to leave. The Malecon at golden hour is pure magic. If you\'re still on the fence, just get the free guide -- you\'ll see. #GoldenHour',
+    likes: 1102,
+    comments: 51,
+    timeAgo: '3d',
+    location: 'Puerto Vallarta, Mexico',
+  },
+]
+
+function formatLikes(n: number): string {
+  if (n >= 1000) return `${(n / 1000).toFixed(1)}k`
+  return n.toString()
+}
+
+function SocialPostCard({ post }: { post: SocialPost }) {
+  const [liked, setLiked] = useState(false)
+  const [saved, setSaved] = useState(false)
+  const displayLikes = liked ? post.likes + 1 : post.likes
+
+  return (
+    <div className="bg-white rounded-xl overflow-hidden shadow-sm border border-gray-100">
+      {/* Header */}
+      <div className="flex items-center justify-between px-4 py-3">
+        <div className="flex items-center gap-3">
+          <img
+            src={post.avatar}
+            alt={post.username}
+            className="w-9 h-9 rounded-full object-cover ring-2 ring-pink-400 ring-offset-1"
+          />
+          <div>
+            <p className="text-sm font-semibold text-gray-900">{post.username}</p>
+            <p className="text-xs text-gray-500">{post.location}</p>
+          </div>
+        </div>
+        <MoreHorizontal className="w-5 h-5 text-gray-400" />
+      </div>
+
+      {/* Image */}
+      <img
+        src={post.image}
+        alt={post.caption}
+        className="w-full aspect-square object-cover"
+      />
+
+      {/* Action buttons */}
+      <div className="flex items-center justify-between px-4 py-3">
+        <div className="flex items-center gap-4">
+          <button onClick={() => setLiked(!liked)}>
+            <Heart
+              className={`w-6 h-6 transition-colors ${
+                liked ? 'fill-red-500 text-red-500' : 'text-gray-800 hover:text-gray-500'
+              }`}
+            />
+          </button>
+          <MessageCircle className="w-6 h-6 text-gray-800" />
+          <Send className="w-6 h-6 text-gray-800" />
+        </div>
+        <button onClick={() => setSaved(!saved)}>
+          <Bookmark
+            className={`w-6 h-6 transition-colors ${
+              saved ? 'fill-gray-800 text-gray-800' : 'text-gray-800 hover:text-gray-500'
+            }`}
+          />
+        </button>
+      </div>
+
+      {/* Likes & Caption */}
+      <div className="px-4 pb-4">
+        <p className="text-sm font-semibold text-gray-900 mb-1">
+          {formatLikes(displayLikes)} likes
+        </p>
+        <p className="text-sm text-gray-800">
+          <span className="font-semibold">{post.username}</span>{' '}
+          {post.caption}
+        </p>
+        <p className="text-xs text-gray-400 mt-2">
+          View all {post.comments} comments -- {post.timeAgo} ago
+        </p>
+      </div>
+    </div>
+  )
+}
+
+export default function LP14SocialWall() {
+  return (
+    <div
+      className="min-h-screen bg-gray-50"
+      style={{ fontFamily: 'var(--font-dm-sans), system-ui, sans-serif' }}
+    >
+      <UrgencyBanner variant="countdown" />
+
+      {/* Hero */}
+      <section
+        className="relative overflow-hidden py-16 sm:py-24 px-4 pt-20"
+        style={{
+          background: 'linear-gradient(135deg, #833AB4 0%, #FD1D1D 50%, #FCAF45 100%)',
+        }}
+      >
+        <div className="absolute inset-0 bg-black/20" />
+        <div className="relative max-w-3xl mx-auto text-center">
+          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/20 backdrop-blur-sm text-white text-sm font-semibold mb-6">
+            <Camera className="w-4 h-4" />
+            <span>#MexicoParadise</span>
+          </div>
+
+          <h1 className="text-4xl sm:text-5xl md:text-6xl font-bold text-white mb-4 leading-tight">
+            Join 2,847
+            <br />
+            Happy Travelers
+          </h1>
+
+          <p className="text-lg sm:text-xl text-white/90 max-w-xl mx-auto mb-8">
+            Real people. Real vacations. Real savings. See what our travelers
+            are posting from their all-inclusive Mexico getaways.
+          </p>
+
+          <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
+            <button
+              onClick={() => document.getElementById('social-ebook')?.scrollIntoView({ behavior: 'smooth' })}
+              className="px-8 py-4 rounded-full bg-white text-gray-900 font-bold text-lg shadow-xl transition-transform hover:scale-105"
+            >
+              Get the Free Travel Guide
+            </button>
+            <div className="flex items-center gap-2 text-white/80">
+              <Users className="w-5 h-5" />
+              <span className="text-sm">12,400+ downloads</span>
+            </div>
+          </div>
+
+          {/* Traveler avatars */}
+          <div className="flex items-center justify-center mt-8">
+            <div className="flex -space-x-3">
+              {TESTIMONIALS.slice(0, 5).map((t, i) => (
+                <img
+                  key={i}
+                  src={t.photo}
+                  alt={t.name}
+                  className="w-10 h-10 rounded-full border-2 border-white object-cover"
+                />
+              ))}
+            </div>
+            <span className="ml-3 text-white text-sm">
+              + 2,842 more travelers
+            </span>
+          </div>
+        </div>
+      </section>
+
+      {/* Social Post Grid */}
+      <section className="max-w-5xl mx-auto px-4 py-12">
+        <h2 className="text-2xl sm:text-3xl font-bold text-gray-900 text-center mb-2">
+          Straight from Their Feeds
+        </h2>
+        <p className="text-gray-500 text-center mb-10">
+          What travelers are sharing about their Mexico Paradise experience
+        </p>
+
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+          {SOCIAL_POSTS.slice(0, 6).map((post) => (
+            <SocialPostCard key={post.id} post={post} />
+          ))}
+        </div>
+      </section>
+
+      {/* Stats Bar */}
+      <section
+        className="py-10 px-4"
+        style={{
+          background: 'linear-gradient(135deg, #833AB4 0%, #FD1D1D 50%, #FCAF45 100%)',
+        }}
+      >
+        <div className="max-w-4xl mx-auto grid grid-cols-2 sm:grid-cols-4 gap-6 text-center text-white">
+          {[
+            { value: '2,847', label: 'Happy Travelers' },
+            { value: '4.8/5', label: 'Average Rating' },
+            { value: '$2,800+', label: 'Avg. Savings' },
+            { value: '18 mo', label: 'Booking Window' },
+          ].map((stat) => (
+            <div key={stat.label}>
+              <p className="text-3xl sm:text-4xl font-bold">{stat.value}</p>
+              <p className="text-sm text-white/80 mt-1">{stat.label}</p>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* More posts */}
+      <section className="max-w-5xl mx-auto px-4 py-12">
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
+          {SOCIAL_POSTS.slice(6).map((post) => (
+            <SocialPostCard key={post.id} post={post} />
+          ))}
+        </div>
+      </section>
+
+      {/* Ebook Capture */}
+      <section id="social-ebook" className="max-w-lg mx-auto px-4 py-16">
+        <div className="rounded-2xl bg-white p-8 shadow-xl border border-gray-100 text-center">
+          <div
+            className="w-16 h-16 rounded-2xl mx-auto flex items-center justify-center mb-4"
+            style={{
+              background: 'linear-gradient(135deg, #833AB4 0%, #FD1D1D 50%, #FCAF45 100%)',
+            }}
+          >
+            <Camera className="w-8 h-8 text-white" />
+          </div>
+          <h3 className="text-2xl sm:text-3xl font-bold text-gray-900 mb-2">
+            Your Turn to Post
+          </h3>
+          <p className="text-gray-500 mb-6">
+            Get our free &quot;Budget Luxury Travel&quot; guide and discover 5 secrets
+            to luxury Mexico vacations on a budget. Your feed is about to level up.
+          </p>
+          <EbookCaptureForm
+            variant="card"
+            accentColor="#FD1D1D"
+            buttonText="Get My Free Travel Guide"
+            sourceLp="social-wall"
+            showIcon={false}
+          />
+        </div>
+      </section>
+
+      {/* Testimonials */}
+      <section className="max-w-4xl mx-auto px-4 py-10">
+        <h2 className="text-2xl sm:text-3xl font-bold text-gray-900 text-center mb-8">
+          Verified Reviews
+        </h2>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          {TESTIMONIALS.slice(0, 3).map((t, i) => (
+            <TestimonialCard
+              key={i}
+              quote={t.quote}
+              name={t.name}
+              location={t.location}
+              photo={t.photo}
+            />
+          ))}
+        </div>
+      </section>
+
+      {/* PayNow Section */}
+      <section className="max-w-lg mx-auto px-4 py-16" id="signup-form">
+        <div className="rounded-2xl bg-gray-900 p-8 sm:p-10 text-center">
+          <h2 className="text-2xl sm:text-3xl font-bold text-white mb-2">
+            Join the Community
+          </h2>
+          <p className="text-gray-400 mb-6">
+            5 days, 4 nights all-inclusive in Mexico.
+            Starting at just ${PAYMENT_CONFIG.monthlyPrice}/month.
+          </p>
+
+          <PricingDisplay accentColor="#FD1D1D" variant="dark" className="mb-6" />
+
+          <PayNowForm
+            variant="dark"
+            accentColor="#FD1D1D"
+            buttonText="Claim My Vacation"
+          />
+
+          <TrustBadges variant="compact" textColor="#6B7280" className="mt-6" />
+        </div>
+      </section>
+
+      <InfluencerBuzz />
+
+      {/* Footer */}
+      <footer className="border-t border-gray-200 py-8 text-center text-sm text-gray-500 px-4">
+        <p>Mexico Paradise Vacations -- All rights reserved</p>
+        <div className="flex items-center justify-center gap-4 mt-2">
+          <a href="#" className="hover:text-gray-700">Privacy</a>
+          <a href="#" className="hover:text-gray-700">Terms</a>
+          <a href="#" className="hover:text-gray-700">Contact</a>
+        </div>
+      </footer>
+
+      <StickyMobileCTA
+        accentColor="#FD1D1D"
+        buttonText="Get Free Guide"
+        targetId="social-ebook"
+      />
+    </div>
+  )
+}
diff --git a/src/components/lp/pages/LP15SavingsJournal.tsx b/src/components/lp/pages/LP15SavingsJournal.tsx
new file mode 100644
index 0000000..6b7dda6
--- /dev/null
+++ b/src/components/lp/pages/LP15SavingsJournal.tsx
@@ -0,0 +1,465 @@
+'use client'
+
+import { DollarSign, TrendingDown, Coffee, Plane, PiggyBank, Calculator, ArrowDown, Check } from 'lucide-react'
+import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts'
+import EbookCaptureForm from '@/components/lp/shared/EbookCaptureForm'
+import PayNowForm from '@/components/lp/shared/PayNowForm'
+import FAQAccordion from '@/components/lp/shared/FAQAccordion'
+import StickyMobileCTA from '@/components/lp/shared/StickyMobileCTA'
+import TrustBadges from '@/components/lp/shared/TrustBadges'
+import TestimonialCard from '@/components/lp/shared/TestimonialCard'
+import PricingDisplay from '@/components/lp/shared/PricingDisplay'
+import UrgencyBanner from '@/components/lp/shared/UrgencyBanner'
+import InfluencerBuzz from '@/components/lp/shared/InfluencerBuzz'
+import { TESTIMONIALS, PAYMENT_CONFIG } from '@/app/lp/_config/types'
+
+const DAILY_COMPARISONS = [
+  { label: 'Morning Latte', cost: 5.50, icon: Coffee, color: '#795548' },
+  { label: 'Fast Food Lunch', cost: 12.00, icon: DollarSign, color: '#F44336' },
+  { label: 'Streaming Subs', cost: 4.30, icon: DollarSign, color: '#9C27B0' },
+  { label: 'Mexico Vacation', cost: 1.30, icon: Plane, color: '#2E7D32' },
+]
+
+const SAVINGS_CHART_DATA = [
+  { name: 'Booking Direct', cost: 3200, fill: '#EF5350' },
+  { name: 'Travel Agent', cost: 2800, fill: '#FF7043' },
+  { name: 'Online Deal', cost: 2100, fill: '#FFA726' },
+  { name: 'Certificate', cost: 399, fill: '#2E7D32' },
+]
+
+const COST_BREAKDOWN = [
+  { item: 'Hotel (4 nights)', regular: 1600, certificate: 0 },
+  { item: 'All meals', regular: 600, certificate: 0 },
+  { item: 'Drinks', regular: 300, certificate: 0 },
+  { item: 'Resort amenities', regular: 200, certificate: 0 },
+  { item: 'Certificate cost', regular: 0, certificate: 399 },
+]
+
+export default function LP15SavingsJournal() {
+  const totalRegular = COST_BREAKDOWN.reduce((sum, item) => sum + item.regular, 0)
+  const totalCertificate = COST_BREAKDOWN.reduce((sum, item) => sum + item.certificate, 0)
+  const savings = totalRegular - totalCertificate
+
+  return (
+    <div
+      className="min-h-screen bg-white"
+      style={{ fontFamily: 'var(--font-source-sans), system-ui, sans-serif' }}
+    >
+      <UrgencyBanner variant="countdown" />
+
+      {/* Hero */}
+      <section className="relative overflow-hidden py-16 sm:py-24 px-4 pt-20" style={{ backgroundColor: '#F9FBE7' }}>
+        {/* Decorative pattern */}
+        <div className="absolute inset-0 opacity-[0.03]" style={{
+          backgroundImage: `url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 20.5V18H0v-2h20v-2H0v-2h20v-2H0V8h20V6H0V4h20V2H0V0h22v20h2V0h2v20h2V0h2v20h2V0h2v20h2V0h4v2h-2v2h2v2h-2v2h2v2h-2v2h2v2h-2v2h2v2h-2v2h2v2.5H20z' fill='%23000' fill-opacity='1' fill-rule='evenodd'/%3E%3C/svg%3E")`,
+        }} />
+
+        <div className="relative max-w-3xl mx-auto text-center">
+          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full mb-6" style={{ backgroundColor: '#E8F5E9' }}>
+            <Calculator className="w-4 h-4" style={{ color: '#2E7D32' }} />
+            <span className="text-sm font-semibold" style={{ color: '#2E7D32' }}>
+              The Savings Calculator
+            </span>
+          </div>
+
+          <h1
+            className="text-4xl sm:text-5xl md:text-6xl leading-tight mb-4"
+            style={{
+              fontFamily: 'var(--font-bitter), Georgia, serif',
+              fontWeight: 700,
+              color: '#1B5E20',
+            }}
+          >
+            The Numbers That
+            <br />
+            <span style={{ color: '#FFC107' }}>Will Surprise You</span>
+          </h1>
+
+          <p className="text-lg sm:text-xl text-gray-600 max-w-xl mx-auto mb-8">
+            A 5-star Mexico vacation for less than your daily coffee habit.
+            Let&apos;s break down the math.
+          </p>
+
+          {/* Daily cost hero stat */}
+          <div className="inline-block rounded-2xl p-8 bg-white shadow-xl border border-gray-100">
+            <p className="text-sm text-gray-500 mb-1 font-medium">Your daily vacation cost</p>
+            <div className="flex items-baseline justify-center gap-1">
+              <span className="text-6xl sm:text-7xl font-bold" style={{ color: '#2E7D32' }}>
+                $1.30
+              </span>
+              <span className="text-xl text-gray-400">/day</span>
+            </div>
+            <p className="text-sm text-gray-500 mt-2">
+              That&apos;s less than a morning latte.
+            </p>
+            <ArrowDown className="w-5 h-5 mx-auto mt-3 text-gray-400 animate-bounce" />
+          </div>
+        </div>
+      </section>
+
+      {/* Daily Cost Comparison */}
+      <section className="max-w-3xl mx-auto px-4 py-16">
+        <h2
+          className="text-2xl sm:text-3xl text-center mb-2"
+          style={{
+            fontFamily: 'var(--font-bitter), Georgia, serif',
+            fontWeight: 700,
+            color: '#1B5E20',
+          }}
+        >
+          What $1.30 a Day Looks Like
+        </h2>
+        <p className="text-gray-500 text-center mb-10">
+          Things you spend more on every day without thinking twice
+        </p>
+
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+          {DAILY_COMPARISONS.map((item) => {
+            const IconComponent = item.icon
+            const isVacation = item.label === 'Mexico Vacation'
+            return (
+              <div
+                key={item.label}
+                className={`rounded-xl p-6 flex items-center gap-4 transition-all ${
+                  isVacation
+                    ? 'border-2 shadow-lg scale-[1.02]'
+                    : 'border border-gray-200'
+                }`}
+                style={isVacation ? { borderColor: '#2E7D32', backgroundColor: '#E8F5E9' } : {}}
+              >
+                <div
+                  className="w-14 h-14 rounded-xl flex items-center justify-center shrink-0"
+                  style={{ backgroundColor: isVacation ? '#2E7D32' : '#F5F5F5' }}
+                >
+                  <IconComponent className={`w-7 h-7 ${isVacation ? 'text-white' : ''}`} style={!isVacation ? { color: item.color } : {}} />
+                </div>
+                <div className="flex-1">
+                  <p className="text-sm text-gray-500">{item.label}</p>
+                  <p className="text-2xl font-bold" style={{ color: item.color }}>
+                    ${item.cost.toFixed(2)}<span className="text-sm text-gray-400 font-normal">/day</span>
+                  </p>
+                </div>
+                {isVacation && (
+                  <span className="px-3 py-1 rounded-full text-xs font-bold text-white" style={{ backgroundColor: '#2E7D32' }}>
+                    BEST
+                  </span>
+                )}
+              </div>
+            )
+          })}
+        </div>
+
+        <div className="text-center mt-8 p-6 rounded-xl" style={{ backgroundColor: '#FFF8E1' }}>
+          <PiggyBank className="w-8 h-8 mx-auto mb-2" style={{ color: '#FFC107' }} />
+          <p className="text-lg font-semibold text-gray-800">
+            Skip your latte 4 days a month and your vacation pays for itself.
+          </p>
+          <p className="text-sm text-gray-500 mt-1">
+            4 lattes = $22.00 -- that&apos;s more than half a monthly payment of ${PAYMENT_CONFIG.monthlyPrice}.
+          </p>
+        </div>
+      </section>
+
+      {/* Savings Chart */}
+      <section className="py-16 px-4" style={{ backgroundColor: '#FAFAFA' }}>
+        <div className="max-w-3xl mx-auto">
+          <h2
+            className="text-2xl sm:text-3xl text-center mb-2"
+            style={{
+              fontFamily: 'var(--font-bitter), Georgia, serif',
+              fontWeight: 700,
+              color: '#1B5E20',
+            }}
+          >
+            How Booking Methods Compare
+          </h2>
+          <p className="text-gray-500 text-center mb-10">
+            Average cost for 5 nights all-inclusive Mexico vacation (per couple)
+          </p>
+
+          <div className="bg-white rounded-2xl p-6 sm:p-8 shadow-sm border border-gray-100">
+            <div className="h-80">
+              <ResponsiveContainer width="100%" height="100%">
+                <BarChart data={SAVINGS_CHART_DATA} layout="vertical" margin={{ left: 20, right: 20, top: 10, bottom: 10 }}>
+                  <XAxis
+                    type="number"
+                    tickFormatter={(value: number) => `$${value}`}
+                    axisLine={false}
+                    tickLine={false}
+                    tick={{ fontSize: 12, fill: '#9CA3AF' }}
+                  />
+                  <YAxis
+                    type="category"
+                    dataKey="name"
+                    axisLine={false}
+                    tickLine={false}
+                    tick={{ fontSize: 13, fill: '#374151', fontWeight: 500 }}
+                    width={110}
+                  />
+                  <Tooltip
+                    formatter={(value: number) => [`$${value}`, 'Cost']}
+                    contentStyle={{
+                      borderRadius: '8px',
+                      border: '1px solid #E5E7EB',
+                      boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)',
+                    }}
+                  />
+                  <Bar dataKey="cost" radius={[0, 6, 6, 0]} barSize={36} />
+                </BarChart>
+              </ResponsiveContainer>
+            </div>
+
+            <div className="flex items-center justify-center gap-2 mt-4 p-3 rounded-lg" style={{ backgroundColor: '#E8F5E9' }}>
+              <TrendingDown className="w-5 h-5" style={{ color: '#2E7D32' }} />
+              <p className="text-sm font-semibold" style={{ color: '#2E7D32' }}>
+                Certificate holders save an average of $2,801 per vacation
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Cost Breakdown Table */}
+      <section className="max-w-3xl mx-auto px-4 py-16">
+        <h2
+          className="text-2xl sm:text-3xl text-center mb-2"
+          style={{
+            fontFamily: 'var(--font-bitter), Georgia, serif',
+            fontWeight: 700,
+            color: '#1B5E20',
+          }}
+        >
+          The Full Breakdown
+        </h2>
+        <p className="text-gray-500 text-center mb-8">
+          What&apos;s included in your certificate vs. paying full price
+        </p>
+
+        <div className="bg-white rounded-2xl border border-gray-200 overflow-hidden shadow-sm">
+          <table className="w-full">
+            <thead>
+              <tr className="border-b border-gray-200">
+                <th className="text-left px-6 py-4 text-sm font-semibold text-gray-600">Item</th>
+                <th className="text-right px-6 py-4 text-sm font-semibold text-red-600">Regular Price</th>
+                <th className="text-right px-6 py-4 text-sm font-semibold" style={{ color: '#2E7D32' }}>Certificate</th>
+              </tr>
+            </thead>
+            <tbody>
+              {COST_BREAKDOWN.map((row) => (
+                <tr key={row.item} className="border-b border-gray-100 last:border-0">
+                  <td className="px-6 py-4 text-sm text-gray-800">{row.item}</td>
+                  <td className="px-6 py-4 text-sm text-right text-gray-600">
+                    {row.regular > 0 ? `$${row.regular.toLocaleString()}` : '--'}
+                  </td>
+                  <td className="px-6 py-4 text-sm text-right font-semibold" style={{ color: '#2E7D32' }}>
+                    {row.certificate > 0 ? `$${row.certificate}` : (
+                      <span className="flex items-center justify-end gap-1">
+                        <Check className="w-4 h-4" />
+                        Included
+                      </span>
+                    )}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+            <tfoot>
+              <tr className="border-t-2 border-gray-200" style={{ backgroundColor: '#F9FBE7' }}>
+                <td className="px-6 py-4 text-sm font-bold text-gray-900">Total</td>
+                <td className="px-6 py-4 text-sm text-right font-bold text-red-600 line-through">
+                  ${totalRegular.toLocaleString()}
+                </td>
+                <td className="px-6 py-4 text-sm text-right font-bold text-lg" style={{ color: '#2E7D32' }}>
+                  ${totalCertificate}
+                </td>
+              </tr>
+              <tr style={{ backgroundColor: '#E8F5E9' }}>
+                <td className="px-6 py-4 text-sm font-bold" style={{ color: '#2E7D32' }} colSpan={2}>
+                  You save
+                </td>
+                <td className="px-6 py-4 text-right font-bold text-xl" style={{ color: '#2E7D32' }}>
+                  ${savings.toLocaleString()}
+                </td>
+              </tr>
+            </tfoot>
+          </table>
+        </div>
+      </section>
+
+      {/* Ebook Capture */}
+      <section id="ebook-capture" className="py-16 px-4" style={{ backgroundColor: '#F9FBE7' }}>
+        <div className="max-w-lg mx-auto text-center">
+          <div
+            className="w-16 h-16 rounded-2xl mx-auto flex items-center justify-center mb-4"
+            style={{ backgroundColor: '#2E7D32' }}
+          >
+            <PiggyBank className="w-8 h-8 text-white" />
+          </div>
+          <h3
+            className="text-2xl sm:text-3xl mb-2"
+            style={{
+              fontFamily: 'var(--font-bitter), Georgia, serif',
+              fontWeight: 700,
+              color: '#1B5E20',
+            }}
+          >
+            Get the Full Savings Guide
+          </h3>
+          <p className="text-gray-600 mb-6">
+            Our free &quot;Budget Luxury Travel&quot; guide reveals 5 more strategies to
+            maximize your savings -- including a trick that can save you up to $500 extra
+            on your trip.
+          </p>
+          <div className="max-w-md mx-auto">
+            <EbookCaptureForm
+              variant="card"
+              accentColor="#FFC107"
+              buttonText="Download Free Savings Guide"
+              sourceLp="savings-journal"
+              showIcon={false}
+            />
+          </div>
+          <p className="text-xs text-gray-500 mt-4">
+            Join 12,400+ smart travelers who downloaded this guide
+          </p>
+        </div>
+      </section>
+
+      {/* Payment option highlight */}
+      <section className="max-w-3xl mx-auto px-4 py-16">
+        <h2
+          className="text-2xl sm:text-3xl text-center mb-2"
+          style={{
+            fontFamily: 'var(--font-bitter), Georgia, serif',
+            fontWeight: 700,
+            color: '#1B5E20',
+          }}
+        >
+          Two Ways to Save
+        </h2>
+        <p className="text-gray-500 text-center mb-8">
+          Choose the payment plan that fits your budget
+        </p>
+
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
+          {/* Monthly */}
+          <div className="rounded-2xl border-2 border-gray-200 p-6 text-center hover:border-green-300 transition-colors">
+            <p className="text-sm font-semibold text-gray-500 mb-2">Monthly Plan</p>
+            <p className="text-4xl font-bold mb-1" style={{ color: '#2E7D32' }}>
+              ${PAYMENT_CONFIG.monthlyPrice}<span className="text-lg text-gray-400">/mo</span>
+            </p>
+            <p className="text-sm text-gray-500 mb-3">
+              for {PAYMENT_CONFIG.totalMonths} months (${PAYMENT_CONFIG.totalPrice} total)
+            </p>
+            <p className="text-xs text-gray-400 mb-2">
+              That&apos;s just ${(PAYMENT_CONFIG.monthlyPrice / 30).toFixed(2)}/day
+            </p>
+            <div className="text-xs px-3 py-1 rounded-full inline-block" style={{ backgroundColor: '#E8F5E9', color: '#2E7D32' }}>
+              Most Popular
+            </div>
+          </div>
+
+          {/* One-time */}
+          <div className="rounded-2xl border-2 p-6 text-center hover:border-yellow-400 transition-colors" style={{ borderColor: '#FFC107' }}>
+            <p className="text-sm font-semibold text-gray-500 mb-2">One-Time Payment</p>
+            <p className="text-4xl font-bold mb-1" style={{ color: '#FFC107' }}>
+              ${PAYMENT_CONFIG.oneTimePrice}
+            </p>
+            <p className="text-sm text-gray-500 mb-3">
+              single payment -- done!
+            </p>
+            <p className="text-xs text-gray-400 mb-2">
+              That&apos;s ${(PAYMENT_CONFIG.oneTimePrice / 365).toFixed(2)}/day over a year
+            </p>
+            <div className="text-xs px-3 py-1 rounded-full inline-block" style={{ backgroundColor: '#FFF8E1', color: '#F57F17' }}>
+              Best Value
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Testimonials */}
+      <section className="max-w-3xl mx-auto px-4 py-10">
+        <h2
+          className="text-2xl sm:text-3xl text-center mb-8"
+          style={{
+            fontFamily: 'var(--font-bitter), Georgia, serif',
+            fontWeight: 700,
+            color: '#1B5E20',
+          }}
+        >
+          Smart Travelers, Happy Reviews
+        </h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {TESTIMONIALS.slice(0, 4).map((t, i) => (
+            <TestimonialCard
+              key={i}
+              quote={t.quote}
+              name={t.name}
+              location={t.location}
+              photo={t.photo}
+            />
+          ))}
+        </div>
+      </section>
+
+      {/* PayNow Section */}
+      <section className="max-w-lg mx-auto px-4 py-16" id="signup-form">
+        <div className="rounded-2xl border border-gray-200 p-8 shadow-sm">
+          <h2
+            className="text-2xl sm:text-3xl text-center mb-2"
+            style={{
+              fontFamily: 'var(--font-bitter), Georgia, serif',
+              fontWeight: 700,
+              color: '#1B5E20',
+            }}
+          >
+            Start Saving Today
+          </h2>
+          <p className="text-gray-500 text-center mb-6">
+            Claim your 5-day, 4-night all-inclusive Mexico vacation certificate
+          </p>
+
+          <PayNowForm
+            accentColor="#2E7D32"
+            buttonText="Get My Vacation Certificate"
+          />
+
+          <TrustBadges variant="compact" className="mt-6" />
+        </div>
+      </section>
+
+      <InfluencerBuzz />
+
+      {/* FAQ */}
+      <section className="max-w-3xl mx-auto px-4 py-10 pb-20">
+        <h2
+          className="text-2xl sm:text-3xl text-center mb-6"
+          style={{
+            fontFamily: 'var(--font-bitter), Georgia, serif',
+            fontWeight: 700,
+            color: '#1B5E20',
+          }}
+        >
+          Questions About Pricing & Value
+        </h2>
+        <FAQAccordion />
+      </section>
+
+      {/* Footer */}
+      <footer className="border-t border-gray-200 py-8 text-center text-sm text-gray-500 px-4">
+        <p>Mexico Paradise Vacations -- All rights reserved</p>
+        <div className="flex items-center justify-center gap-4 mt-2">
+          <a href="#" className="hover:text-gray-700">Privacy</a>
+          <a href="#" className="hover:text-gray-700">Terms</a>
+          <a href="#" className="hover:text-gray-700">Contact</a>
+        </div>
+      </footer>
+
+      <StickyMobileCTA
+        accentColor="#2E7D32"
+        buttonText="Get Savings Guide"
+        targetId="ebook-capture"
+      />
+    </div>
+  )
+}
diff --git a/src/components/lp/pages/LP16CouplesRetreat.tsx b/src/components/lp/pages/LP16CouplesRetreat.tsx
new file mode 100644
index 0000000..d5e7e0c
--- /dev/null
+++ b/src/components/lp/pages/LP16CouplesRetreat.tsx
@@ -0,0 +1,445 @@
+'use client'
+
+import { useState } from 'react'
+import { Heart, Sparkles, Wine, Sunset, Star, MapPin, Gift, Music } from 'lucide-react'
+import EbookCaptureForm from '@/components/lp/shared/EbookCaptureForm'
+import PayNowForm from '@/components/lp/shared/PayNowForm'
+import TestimonialCard from '@/components/lp/shared/TestimonialCard'
+import DestinationCarousel from '@/components/lp/shared/DestinationCarousel'
+import FAQAccordion from '@/components/lp/shared/FAQAccordion'
+import TrustBadges from '@/components/lp/shared/TrustBadges'
+import StickyMobileCTA from '@/components/lp/shared/StickyMobileCTA'
+import UrgencyBanner from '@/components/lp/shared/UrgencyBanner'
+import InfluencerBuzz from '@/components/lp/shared/InfluencerBuzz'
+import { PAYMENT_CONFIG, TESTIMONIALS, FAQ_ITEMS } from '@/app/lp/_config/types'
+
+const ROSE = '#880E4F'
+const WINE_COLOR = '#4A0025'
+const GOLD = '#D4AF37'
+
+const couplesTestimonials = [
+  {
+    quote: "We renewed our vows on the beach at sunset. This trip brought us closer together than we've been in years.",
+    name: "Sarah & Mike",
+    location: "Chicago, IL",
+    photo: "/images/cdn/photo-1522529599102-193c0d76b5b6.jpg",
+  },
+  {
+    quote: "Our anniversary trip to Cabo was pure magic. Candlelit dinners, couples massages, and the most breathtaking views together.",
+    name: "Jennifer & Tom",
+    location: "New York, NY",
+    photo: "/images/cdn/photo-1494790108377-be9c29b29330.jpg",
+  },
+  {
+    quote: "We fell in love all over again in the Riviera Maya. The romance package made everything feel so special and intimate.",
+    name: "David & Lisa",
+    location: "Denver, CO",
+    photo: "/images/cdn/photo-1472099645785-5658abf4ff4e.jpg",
+  },
+]
+
+const romanticBenefits = [
+  {
+    icon: Wine,
+    title: "Private Candlelit Dinners",
+    description: "Dine together under the stars with gourmet cuisine and premium wines included in your all-inclusive stay.",
+  },
+  {
+    icon: Sparkles,
+    title: "Couples Spa Experiences",
+    description: "Side-by-side massages, aromatherapy baths, and relaxation rituals designed for the two of you.",
+  },
+  {
+    icon: Sunset,
+    title: "Sunset Beach Walks",
+    description: "Miles of pristine shoreline reserved for your private moments together as the sky paints itself gold.",
+  },
+  {
+    icon: Music,
+    title: "Live Music & Dancing",
+    description: "Sway together to live Latin rhythms at the resort's intimate lounges and open-air terraces.",
+  },
+  {
+    icon: MapPin,
+    title: "Romantic Excursions",
+    description: "Snorkeling together in crystal cenotes, sailing at sunset, or exploring ancient ruins hand in hand.",
+  },
+  {
+    icon: Gift,
+    title: "Special Touches",
+    description: "Rose petal turndowns, champagne on arrival, and little surprises that make your getaway unforgettable.",
+  },
+]
+
+export default function LP16CouplesRetreat() {
+  const [showAllBenefits, setShowAllBenefits] = useState(false)
+
+  return (
+    <div
+      className="min-h-screen"
+      style={{ fontFamily: 'var(--font-karla), sans-serif' }}
+    >
+      <UrgencyBanner variant="countdown" />
+
+      {/* Hero Section */}
+      <section className="relative min-h-[90vh] flex items-center justify-center overflow-hidden pt-20">
+        <div className="absolute inset-0">
+          <img
+            src="/images/cdn/photo-1507525428034-b723cf961d3e.jpg"
+            alt="Romantic couple on beach at sunset"
+            className="w-full h-full object-cover"
+          />
+          <div
+            className="absolute inset-0"
+            style={{
+              background: `linear-gradient(135deg, ${WINE_COLOR}dd 0%, ${ROSE}aa 50%, transparent 100%)`,
+            }}
+          />
+          <div className="absolute inset-0 bg-black/20" />
+        </div>
+
+        <div className="relative z-10 max-w-3xl mx-auto px-6 text-center text-white">
+          <div className="flex items-center justify-center gap-2 mb-6">
+            <Heart className="w-5 h-5" style={{ color: GOLD }} fill={GOLD} />
+            <span
+              className="text-sm tracking-[0.3em] uppercase"
+              style={{ color: GOLD, fontFamily: 'var(--font-lora), serif' }}
+            >
+              A Romantic Escape for Two
+            </span>
+            <Heart className="w-5 h-5" style={{ color: GOLD }} fill={GOLD} />
+          </div>
+
+          <h1
+            className="text-4xl md:text-6xl lg:text-7xl font-bold mb-6 leading-tight"
+            style={{ fontFamily: 'var(--font-lora), serif' }}
+          >
+            You Both <span style={{ color: GOLD }}>Deserve</span> This
+          </h1>
+
+          <p className="text-lg md:text-xl text-white/90 mb-4 max-w-2xl mx-auto leading-relaxed">
+            5 days and 4 nights at an all-inclusive Mexican paradise.
+            Just the two of you, the ocean, and nothing on your calendar.
+          </p>
+
+          <p className="text-base text-white/70 mb-10">
+            Starting at just <span className="font-bold text-white">${PAYMENT_CONFIG.monthlyPrice}/month</span> together
+          </p>
+
+          <div className="max-w-md mx-auto" id="ebook-form">
+            <p className="text-sm text-white/80 mb-3">
+              Get our free couples travel guide first:
+            </p>
+            <EbookCaptureForm
+              sourceLp="couples-retreat"
+              accentColor={GOLD}
+              buttonText="Send Us the Free Guide"
+              variant="inline"
+            />
+          </div>
+        </div>
+
+        {/* Decorative candlelight glow */}
+        <div
+          className="absolute bottom-0 left-0 right-0 h-32"
+          style={{
+            background: `linear-gradient(to top, ${WINE_COLOR} 0%, transparent 100%)`,
+          }}
+        />
+      </section>
+
+      {/* What Awaits You Both */}
+      <section
+        className="py-20 px-6"
+        style={{ backgroundColor: WINE_COLOR }}
+      >
+        <div className="max-w-5xl mx-auto">
+          <div className="text-center mb-16">
+            <p
+              className="text-sm tracking-[0.2em] uppercase mb-3"
+              style={{ color: GOLD }}
+            >
+              Your Romantic Itinerary
+            </p>
+            <h2
+              className="text-3xl md:text-5xl font-bold text-white mb-4"
+              style={{ fontFamily: 'var(--font-lora), serif' }}
+            >
+              What Awaits You Both
+            </h2>
+            <p className="text-white/60 max-w-xl mx-auto">
+              Every detail of your escape is designed for connection, relaxation, and romance.
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {romanticBenefits
+              .slice(0, showAllBenefits ? undefined : 3)
+              .map((benefit) => (
+                <div
+                  key={benefit.title}
+                  className="rounded-2xl p-6 border border-white/10 backdrop-blur-sm"
+                  style={{ backgroundColor: 'rgba(255,255,255,0.05)' }}
+                >
+                  <benefit.icon
+                    className="w-8 h-8 mb-4"
+                    style={{ color: GOLD }}
+                  />
+                  <h3
+                    className="text-lg font-bold text-white mb-2"
+                    style={{ fontFamily: 'var(--font-lora), serif' }}
+                  >
+                    {benefit.title}
+                  </h3>
+                  <p className="text-sm text-white/60 leading-relaxed">
+                    {benefit.description}
+                  </p>
+                </div>
+              ))}
+          </div>
+
+          {!showAllBenefits && (
+            <div className="text-center mt-8">
+              <button
+                onClick={() => setShowAllBenefits(true)}
+                className="text-sm underline underline-offset-4"
+                style={{ color: GOLD }}
+              >
+                See all romantic experiences
+              </button>
+            </div>
+          )}
+        </div>
+      </section>
+
+      {/* Side-by-side image + quote */}
+      <section className="relative">
+        <div className="grid md:grid-cols-2">
+          <div className="aspect-square md:aspect-auto">
+            <img
+              src="/images/cdn/photo-1519046904884-53103b34b206.jpg"
+              alt="Romantic resort setting"
+              className="w-full h-full object-cover"
+            />
+          </div>
+          <div
+            className="flex items-center p-10 md:p-16"
+            style={{ backgroundColor: ROSE }}
+          >
+            <div>
+              <Heart className="w-8 h-8 mb-6" style={{ color: GOLD }} fill={GOLD} />
+              <blockquote
+                className="text-2xl md:text-3xl text-white font-light leading-relaxed mb-6"
+                style={{ fontFamily: 'var(--font-lora), serif' }}
+              >
+                &ldquo;The best thing we ever did for our relationship was stop saying
+                &lsquo;someday&rsquo; and book the trip.&rdquo;
+              </blockquote>
+              <p className="text-white/60 text-sm">
+                &mdash; Every couple who finally went
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Destination Carousel */}
+      <section
+        className="py-20 px-6"
+        style={{ backgroundColor: WINE_COLOR }}
+      >
+        <div className="max-w-4xl mx-auto">
+          <div className="text-center mb-12">
+            <p
+              className="text-sm tracking-[0.2em] uppercase mb-3"
+              style={{ color: GOLD }}
+            >
+              Choose Your Escape Together
+            </p>
+            <h2
+              className="text-3xl md:text-4xl font-bold text-white"
+              style={{ fontFamily: 'var(--font-lora), serif' }}
+            >
+              Four Romantic Destinations
+            </h2>
+          </div>
+
+          <DestinationCarousel variant="dark" />
+        </div>
+      </section>
+
+      {/* Ebook Capture Section */}
+      <section
+        className="py-20 px-6"
+        style={{
+          background: `linear-gradient(135deg, ${WINE_COLOR} 0%, ${ROSE} 100%)`,
+        }}
+      >
+        <div className="max-w-2xl mx-auto text-center" id="signup-form">
+          <Sparkles className="w-10 h-10 mx-auto mb-4" style={{ color: GOLD }} />
+          <h2
+            className="text-3xl md:text-4xl font-bold text-white mb-3"
+            style={{ fontFamily: 'var(--font-lora), serif' }}
+          >
+            Free Couples Travel Guide
+          </h2>
+          <p className="text-white/70 mb-8 max-w-lg mx-auto">
+            Discover 5 secrets to planning a luxury Mexico vacation together &mdash;
+            without the luxury price tag. Written for couples, by couples.
+          </p>
+
+          <EbookCaptureForm
+            sourceLp="couples-retreat"
+            variant="card"
+            accentColor={GOLD}
+            buttonText="Get Our Free Couples Guide"
+            className="bg-white/10 border-white/20 text-white max-w-md mx-auto"
+          />
+
+          <p className="text-xs text-white/40 mt-4">
+            Join 12,000+ couples who downloaded our guide
+          </p>
+        </div>
+      </section>
+
+      {/* Pricing + Pay Now */}
+      <section
+        className="py-20 px-6"
+        style={{ backgroundColor: WINE_COLOR }}
+      >
+        <div className="max-w-xl mx-auto">
+          <div className="text-center mb-10">
+            <p
+              className="text-sm tracking-[0.2em] uppercase mb-3"
+              style={{ color: GOLD }}
+            >
+              Your Romantic Getaway
+            </p>
+            <h2
+              className="text-3xl md:text-4xl font-bold text-white mb-3"
+              style={{ fontFamily: 'var(--font-lora), serif' }}
+            >
+              Ready to Go Together?
+            </h2>
+            <p className="text-white/60">
+              5 days, 4 nights, all-inclusive &mdash; for both of you.
+            </p>
+          </div>
+
+          <div className="rounded-2xl p-8 border border-white/10 backdrop-blur-sm"
+            style={{ backgroundColor: 'rgba(255,255,255,0.05)' }}
+          >
+            <div className="text-center mb-6">
+              <span
+                className="text-5xl font-bold"
+                style={{ color: GOLD, fontFamily: 'var(--font-lora), serif' }}
+              >
+                ${PAYMENT_CONFIG.monthlyPrice}
+              </span>
+              <span className="text-white/60 text-lg">/mo for {PAYMENT_CONFIG.totalMonths} months</span>
+              <p className="text-white/40 text-sm mt-1">
+                or ${PAYMENT_CONFIG.oneTimePrice} one-time
+              </p>
+            </div>
+
+            <PayNowForm
+              accentColor={GOLD}
+              buttonText="Book Our Romantic Escape"
+              variant="dark"
+            />
+          </div>
+
+          <TrustBadges
+            variant="compact"
+            textColor="rgba(255,255,255,0.5)"
+            className="mt-6"
+          />
+        </div>
+      </section>
+
+      {/* Couples Testimonials */}
+      <section
+        className="py-20 px-6"
+        style={{
+          background: `linear-gradient(180deg, ${WINE_COLOR} 0%, ${ROSE}dd 100%)`,
+        }}
+      >
+        <div className="max-w-5xl mx-auto">
+          <div className="text-center mb-12">
+            <h2
+              className="text-3xl md:text-4xl font-bold text-white"
+              style={{ fontFamily: 'var(--font-lora), serif' }}
+            >
+              Love Stories from Paradise
+            </h2>
+          </div>
+
+          <div className="grid md:grid-cols-3 gap-6">
+            {couplesTestimonials.map((t) => (
+              <TestimonialCard
+                key={t.name}
+                quote={t.quote}
+                name={t.name}
+                location={t.location}
+                photo={t.photo}
+                variant="dark"
+              />
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <InfluencerBuzz />
+
+      {/* FAQ */}
+      <section
+        className="py-20 px-6"
+        style={{ backgroundColor: WINE_COLOR }}
+      >
+        <div className="max-w-2xl mx-auto">
+          <h2
+            className="text-3xl font-bold text-white text-center mb-10"
+            style={{ fontFamily: 'var(--font-lora), serif' }}
+          >
+            Questions Couples Ask
+          </h2>
+
+          <FAQAccordion variant="dark" />
+        </div>
+      </section>
+
+      {/* Final CTA */}
+      <section
+        className="py-16 px-6 text-center"
+        style={{
+          background: `linear-gradient(135deg, ${ROSE} 0%, ${WINE_COLOR} 100%)`,
+        }}
+      >
+        <Heart className="w-8 h-8 mx-auto mb-4" style={{ color: GOLD }} fill={GOLD} />
+        <h2
+          className="text-2xl md:text-3xl font-bold text-white mb-3"
+          style={{ fontFamily: 'var(--font-lora), serif' }}
+        >
+          Your Love Story Deserves a Beautiful Setting
+        </h2>
+        <p className="text-white/60 mb-8 max-w-lg mx-auto">
+          Start with our free guide. Dream together tonight, travel together soon.
+        </p>
+        <div className="max-w-md mx-auto">
+          <EbookCaptureForm
+            sourceLp="couples-retreat"
+            accentColor={GOLD}
+            buttonText="Get the Free Couples Guide"
+            variant="inline"
+          />
+        </div>
+      </section>
+
+      <StickyMobileCTA
+        accentColor={GOLD}
+        buttonText="Plan Our Escape"
+        targetId="signup-form"
+      />
+    </div>
+  )
+}
diff --git a/src/components/lp/pages/LP17Postcards.tsx b/src/components/lp/pages/LP17Postcards.tsx
new file mode 100644
index 0000000..703bfc0
--- /dev/null
+++ b/src/components/lp/pages/LP17Postcards.tsx
@@ -0,0 +1,535 @@
+'use client'
+
+import { useState } from 'react'
+import { Plane, Send, MapPin, Stamp } from 'lucide-react'
+import EbookCaptureForm from '@/components/lp/shared/EbookCaptureForm'
+import PayNowForm from '@/components/lp/shared/PayNowForm'
+import FAQAccordion from '@/components/lp/shared/FAQAccordion'
+import TrustBadges from '@/components/lp/shared/TrustBadges'
+import StickyMobileCTA from '@/components/lp/shared/StickyMobileCTA'
+import UrgencyBanner from '@/components/lp/shared/UrgencyBanner'
+import InfluencerBuzz from '@/components/lp/shared/InfluencerBuzz'
+import { PAYMENT_CONFIG, DESTINATIONS, FAQ_ITEMS } from '@/app/lp/_config/types'
+
+const BROWN = '#5D4037'
+const AIRMAIL_BLUE = '#1565C0'
+const RED = '#D32F2F'
+const CREAM = '#FFF8E1'
+const PAPER = '#FFFDF5'
+
+interface PostcardData {
+  destination: string
+  image: string
+  message: string
+  stamp: string
+  dateline: string
+}
+
+const postcards: PostcardData[] = [
+  {
+    destination: 'Cancun',
+    image: '/images/cdn/photo-1510097467424-192d713fd8b2.jpg',
+    message: "Dear Future You,\n\nThe water here is the most unreal shade of turquoise. We spent all day at the pool bar and didn't spend a dime — everything's included! Tomorrow we're snorkeling. Wish you were here already.\n\nWith love from paradise,\nYour Future Self",
+    stamp: 'MX',
+    dateline: 'Cancun, Mexico',
+  },
+  {
+    destination: 'Cabo San Lucas',
+    image: '/images/cdn/photo-1580415200778-625cb1890ab5.jpg',
+    message: "Querido amigo,\n\nThe arch at Land's End is even more stunning in person. Had the best fish tacos of my life today, and the sunset from our balcony — I can't even describe it. Why didn't we come sooner?\n\nNever leaving,\nYour Happy Self",
+    stamp: 'MX',
+    dateline: 'Cabo San Lucas, Mexico',
+  },
+  {
+    destination: 'Riviera Maya',
+    image: '/images/cdn/photo-1518638150340-f706e86654de.jpg',
+    message: "Hey there,\n\nSwam in a cenote today. Underground. Crystal clear water surrounded by ancient limestone. Then explored Mayan ruins. This place is pure magic — history and paradise mixed together.\n\nCome see for yourself,\nYour Adventurous Side",
+    stamp: 'MX',
+    dateline: 'Riviera Maya, Mexico',
+  },
+  {
+    destination: 'Puerto Vallarta',
+    image: '/images/cdn/photo-1585793753011-397e6e4668d6.jpg',
+    message: "Hola from PV!\n\nWalked the Malecon at sunset. Street musicians, amazing art, and the most gorgeous views of the bay. Had dinner at a rooftop restaurant — all included! This town has so much soul.\n\nSending sunshine,\nThe Relaxed You",
+    stamp: 'MX',
+    dateline: 'Puerto Vallarta, Mexico',
+  },
+]
+
+function PostcardCard({ postcard }: { postcard: PostcardData }) {
+  const [flipped, setFlipped] = useState(false)
+
+  return (
+    <div
+      className="cursor-pointer group"
+      onClick={() => setFlipped(!flipped)}
+      style={{ perspective: '1000px' }}
+    >
+      <div
+        className="relative w-full transition-transform duration-700"
+        style={{
+          transformStyle: 'preserve-3d',
+          transform: flipped ? 'rotateY(180deg)' : 'rotateY(0deg)',
+        }}
+      >
+        {/* Front — Photo side */}
+        <div
+          className="relative rounded-lg overflow-hidden shadow-xl"
+          style={{ backfaceVisibility: 'hidden' }}
+        >
+          {/* Airmail border */}
+          <div
+            className="absolute inset-0 z-10 pointer-events-none rounded-lg"
+            style={{
+              border: '4px solid transparent',
+              borderImage: `repeating-linear-gradient(
+                90deg,
+                ${RED} 0px, ${RED} 12px,
+                white 12px, white 24px,
+                ${AIRMAIL_BLUE} 24px, ${AIRMAIL_BLUE} 36px,
+                white 36px, white 48px
+              ) 4`,
+            }}
+          />
+
+          <div className="aspect-[4/3]">
+            <img
+              src={postcard.image}
+              alt={postcard.destination}
+              className="w-full h-full object-cover"
+            />
+          </div>
+
+          <div
+            className="absolute bottom-0 left-0 right-0 p-4"
+            style={{
+              background: 'linear-gradient(to top, rgba(0,0,0,0.7), transparent)',
+            }}
+          >
+            <div className="flex items-center justify-between">
+              <div>
+                <h3
+                  className="text-xl font-bold text-white"
+                  style={{ fontFamily: 'var(--font-josefin), sans-serif' }}
+                >
+                  {postcard.destination}
+                </h3>
+                <p className="text-white/70 text-sm flex items-center gap-1">
+                  <MapPin className="w-3 h-3" /> {postcard.dateline}
+                </p>
+              </div>
+              <span
+                className="text-xs px-2 py-1 rounded bg-white/20 text-white"
+                style={{ fontFamily: 'var(--font-dancing), cursive' }}
+              >
+                Flip me!
+              </span>
+            </div>
+          </div>
+        </div>
+
+        {/* Back — Message side */}
+        <div
+          className="absolute inset-0 rounded-lg shadow-xl p-6 flex flex-col justify-between"
+          style={{
+            backfaceVisibility: 'hidden',
+            transform: 'rotateY(180deg)',
+            backgroundColor: PAPER,
+            backgroundImage: `
+              repeating-linear-gradient(
+                transparent,
+                transparent 31px,
+                #e0d8c8 31px,
+                #e0d8c8 32px
+              )
+            `,
+            border: '4px solid transparent',
+            borderImage: `repeating-linear-gradient(
+              90deg,
+              ${RED} 0px, ${RED} 12px,
+              white 12px, white 24px,
+              ${AIRMAIL_BLUE} 24px, ${AIRMAIL_BLUE} 36px,
+              white 36px, white 48px
+            ) 4`,
+          }}
+        >
+          <div>
+            <p
+              className="text-xs uppercase tracking-widest mb-1"
+              style={{ color: RED }}
+            >
+              {postcard.dateline}
+            </p>
+            <p
+              className="text-base leading-relaxed whitespace-pre-line"
+              style={{
+                fontFamily: 'var(--font-dancing), cursive',
+                color: BROWN,
+                fontSize: '1.1rem',
+              }}
+            >
+              {postcard.message}
+            </p>
+          </div>
+
+          <div className="flex justify-between items-end mt-4">
+            <span
+              className="text-xs"
+              style={{ color: AIRMAIL_BLUE }}
+            >
+              Click to flip back
+            </span>
+            <div
+              className="w-14 h-14 rounded border-2 flex items-center justify-center"
+              style={{
+                borderColor: RED,
+                backgroundColor: `${CREAM}`,
+              }}
+            >
+              <div className="text-center">
+                <Stamp className="w-5 h-5 mx-auto" style={{ color: RED }} />
+                <span className="text-[10px] font-bold" style={{ color: RED }}>
+                  {postcard.stamp}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default function LP17Postcards() {
+  return (
+    <div
+      className="min-h-screen"
+      style={{
+        fontFamily: 'var(--font-nunito-sans), sans-serif',
+        backgroundColor: CREAM,
+      }}
+    >
+      <UrgencyBanner variant="countdown" />
+
+      {/* Hero */}
+      <section className="relative min-h-[85vh] flex items-center justify-center overflow-hidden pt-20">
+        <div className="absolute inset-0">
+          <img
+            src="/images/cdn/photo-1581710862235-eb6e05d8783f.jpg"
+            alt="Beautiful Mexico coastline"
+            className="w-full h-full object-cover"
+          />
+          <div
+            className="absolute inset-0"
+            style={{
+              background: `linear-gradient(to bottom, ${BROWN}cc 0%, ${BROWN}88 50%, ${BROWN}ee 100%)`,
+            }}
+          />
+        </div>
+
+        <div className="relative z-10 max-w-3xl mx-auto px-6 text-center text-white">
+          {/* Airmail decoration */}
+          <div className="flex items-center justify-center gap-3 mb-8">
+            <div
+              className="h-0.5 w-12"
+              style={{
+                background: `repeating-linear-gradient(90deg, ${RED} 0px, ${RED} 6px, transparent 6px, transparent 12px, ${AIRMAIL_BLUE} 12px, ${AIRMAIL_BLUE} 18px, transparent 18px, transparent 24px)`,
+              }}
+            />
+            <Plane className="w-6 h-6" style={{ color: AIRMAIL_BLUE }} />
+            <div
+              className="h-0.5 w-12"
+              style={{
+                background: `repeating-linear-gradient(90deg, ${AIRMAIL_BLUE} 0px, ${AIRMAIL_BLUE} 6px, transparent 6px, transparent 12px, ${RED} 12px, ${RED} 18px, transparent 18px, transparent 24px)`,
+              }}
+            />
+          </div>
+
+          <h1
+            className="text-5xl md:text-7xl font-bold mb-4"
+            style={{ fontFamily: 'var(--font-josefin), sans-serif' }}
+          >
+            Wish You Were Here
+          </h1>
+
+          <p
+            className="text-2xl md:text-3xl mb-6 text-white/90"
+            style={{ fontFamily: 'var(--font-dancing), cursive' }}
+          >
+            Soon you will be...
+          </p>
+
+          <p className="text-base text-white/80 mb-10 max-w-xl mx-auto">
+            5 days, 4 nights, all-inclusive at a luxury Mexican resort.
+            Starting at just ${PAYMENT_CONFIG.monthlyPrice}/month.
+            Your next postcard writes itself.
+          </p>
+
+          <div className="max-w-md mx-auto">
+            <p
+              className="text-sm text-white/70 mb-3"
+              style={{ fontFamily: 'var(--font-dancing), cursive', fontSize: '1rem' }}
+            >
+              Start planning with our free travel guide:
+            </p>
+            <EbookCaptureForm
+              sourceLp="postcards"
+              accentColor={RED}
+              buttonText="Send Me the Free Guide"
+              variant="inline"
+            />
+          </div>
+        </div>
+      </section>
+
+      {/* Postcard Collection */}
+      <section className="py-20 px-6" style={{ backgroundColor: CREAM }}>
+        <div className="max-w-5xl mx-auto">
+          <div className="text-center mb-14">
+            <Send className="w-8 h-8 mx-auto mb-4" style={{ color: AIRMAIL_BLUE }} />
+            <h2
+              className="text-3xl md:text-4xl font-bold mb-3"
+              style={{
+                fontFamily: 'var(--font-josefin), sans-serif',
+                color: BROWN,
+              }}
+            >
+              Postcards from Paradise
+            </h2>
+            <p style={{ color: `${BROWN}99` }}>
+              Click each postcard to read the message on the back
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-2 gap-8">
+            {postcards.map((postcard) => (
+              <PostcardCard key={postcard.destination} postcard={postcard} />
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* What's Included — styled like a travel itinerary */}
+      <section
+        className="py-20 px-6"
+        style={{ backgroundColor: PAPER }}
+      >
+        <div className="max-w-3xl mx-auto">
+          <div className="text-center mb-12">
+            <h2
+              className="text-3xl md:text-4xl font-bold"
+              style={{
+                fontFamily: 'var(--font-josefin), sans-serif',
+                color: BROWN,
+              }}
+            >
+              Your Travel Itinerary
+            </h2>
+          </div>
+
+          <div
+            className="rounded-xl p-8 shadow-lg"
+            style={{
+              backgroundColor: 'white',
+              border: `2px solid ${BROWN}22`,
+            }}
+          >
+            <div className="flex items-center gap-3 mb-6 pb-4 border-b" style={{ borderColor: `${BROWN}22` }}>
+              <Stamp className="w-6 h-6" style={{ color: RED }} />
+              <span
+                className="text-lg font-bold"
+                style={{ color: BROWN, fontFamily: 'var(--font-josefin), sans-serif' }}
+              >
+                MEXICO PARADISE VACATIONS
+              </span>
+            </div>
+
+            {[
+              { day: 'Included', item: '5 Days / 4 Nights at a luxury all-inclusive resort' },
+              { day: 'Included', item: 'All meals — breakfast, lunch, dinner, and snacks' },
+              { day: 'Included', item: 'Unlimited drinks — cocktails, beer, wine, soft drinks' },
+              { day: 'Included', item: 'Resort pools, beaches, and amenities' },
+              { day: 'Included', item: 'Your choice of 4 stunning destinations' },
+              { day: 'Included', item: '18 months to book your travel dates' },
+            ].map((item, i) => (
+              <div
+                key={i}
+                className="flex items-start gap-4 py-3"
+                style={{ borderBottom: i < 5 ? `1px solid ${BROWN}11` : 'none' }}
+              >
+                <span
+                  className="text-xs font-bold px-2 py-1 rounded shrink-0"
+                  style={{
+                    backgroundColor: `${AIRMAIL_BLUE}15`,
+                    color: AIRMAIL_BLUE,
+                  }}
+                >
+                  {item.day}
+                </span>
+                <span style={{ color: BROWN }}>{item.item}</span>
+              </div>
+            ))}
+
+            <div
+              className="mt-6 pt-4 flex items-center justify-between"
+              style={{ borderTop: `2px solid ${BROWN}22` }}
+            >
+              <span
+                className="font-bold"
+                style={{ color: BROWN, fontFamily: 'var(--font-josefin), sans-serif' }}
+              >
+                TOTAL COST
+              </span>
+              <div className="text-right">
+                <span className="line-through text-sm" style={{ color: `${BROWN}66` }}>
+                  $1,500+
+                </span>
+                <span
+                  className="ml-3 text-2xl font-bold"
+                  style={{ color: RED }}
+                >
+                  ${PAYMENT_CONFIG.monthlyPrice}/mo
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Ebook Section */}
+      <section
+        className="py-20 px-6"
+        style={{
+          background: `linear-gradient(135deg, ${AIRMAIL_BLUE} 0%, ${BROWN} 100%)`,
+        }}
+      >
+        <div className="max-w-2xl mx-auto text-center" id="signup-form">
+          <Plane className="w-10 h-10 mx-auto mb-4 text-white" />
+          <h2
+            className="text-3xl md:text-4xl font-bold text-white mb-3"
+            style={{ fontFamily: 'var(--font-josefin), sans-serif' }}
+          >
+            Free: Budget Luxury Travel Guide
+          </h2>
+          <p className="text-white/70 mb-2">
+            5 secrets to luxury Mexico vacations on a budget
+          </p>
+          <p
+            className="text-white/90 mb-8 text-lg"
+            style={{ fontFamily: 'var(--font-dancing), cursive' }}
+          >
+            Your first class ticket to smarter travel planning
+          </p>
+
+          <EbookCaptureForm
+            sourceLp="postcards"
+            variant="card"
+            accentColor={RED}
+            buttonText="Send Me the Free Guide"
+            className="bg-white/10 border-white/20 text-white max-w-md mx-auto"
+          />
+        </div>
+      </section>
+
+      {/* Pay Now Section */}
+      <section className="py-20 px-6" style={{ backgroundColor: CREAM }}>
+        <div className="max-w-xl mx-auto">
+          <div className="text-center mb-10">
+            <h2
+              className="text-3xl md:text-4xl font-bold mb-3"
+              style={{
+                fontFamily: 'var(--font-josefin), sans-serif',
+                color: BROWN,
+              }}
+            >
+              Ready to Send Your Own Postcard?
+            </h2>
+            <p style={{ color: `${BROWN}88` }}>
+              Book your all-inclusive Mexico vacation today
+            </p>
+          </div>
+
+          <div
+            className="rounded-xl p-8 shadow-lg"
+            style={{
+              backgroundColor: 'white',
+              border: `2px solid ${BROWN}22`,
+            }}
+          >
+            <div className="text-center mb-6">
+              <span
+                className="text-4xl font-bold"
+                style={{ color: RED, fontFamily: 'var(--font-josefin), sans-serif' }}
+              >
+                ${PAYMENT_CONFIG.monthlyPrice}
+              </span>
+              <span style={{ color: `${BROWN}88` }}>/mo for {PAYMENT_CONFIG.totalMonths} months</span>
+              <p className="text-sm mt-1" style={{ color: `${BROWN}66` }}>
+                or ${PAYMENT_CONFIG.oneTimePrice} one-time
+              </p>
+            </div>
+
+            <PayNowForm
+              accentColor={RED}
+              buttonText="Book My Trip to Paradise"
+            />
+          </div>
+
+          <TrustBadges variant="compact" className="mt-6" />
+        </div>
+      </section>
+
+      <InfluencerBuzz />
+
+      {/* FAQ */}
+      <section className="py-20 px-6" style={{ backgroundColor: PAPER }}>
+        <div className="max-w-2xl mx-auto">
+          <h2
+            className="text-3xl font-bold text-center mb-10"
+            style={{
+              fontFamily: 'var(--font-josefin), sans-serif',
+              color: BROWN,
+            }}
+          >
+            Frequently Asked Questions
+          </h2>
+
+          <FAQAccordion />
+        </div>
+      </section>
+
+      {/* Final CTA */}
+      <section
+        className="py-16 px-6 text-center"
+        style={{ backgroundColor: BROWN }}
+      >
+        <p
+          className="text-3xl text-white mb-3"
+          style={{ fontFamily: 'var(--font-dancing), cursive' }}
+        >
+          Wish you were here?
+        </p>
+        <h2
+          className="text-2xl font-bold text-white mb-6"
+          style={{ fontFamily: 'var(--font-josefin), sans-serif' }}
+        >
+          Soon You Will Be.
+        </h2>
+        <div className="max-w-md mx-auto">
+          <EbookCaptureForm
+            sourceLp="postcards"
+            accentColor={RED}
+            buttonText="Get the Free Travel Guide"
+            variant="inline"
+          />
+        </div>
+      </section>
+
+      <StickyMobileCTA
+        accentColor={RED}
+        buttonText="Get Free Guide"
+        targetId="signup-form"
+      />
+    </div>
+  )
+}
diff --git a/src/components/lp/pages/LP18StressRelief.tsx b/src/components/lp/pages/LP18StressRelief.tsx
new file mode 100644
index 0000000..907e6b4
--- /dev/null
+++ b/src/components/lp/pages/LP18StressRelief.tsx
@@ -0,0 +1,464 @@
+'use client'
+
+import { Leaf, Waves, Sun, CloudSun, Heart, Wind, Droplets, TreePine } from 'lucide-react'
+import EbookCaptureForm from '@/components/lp/shared/EbookCaptureForm'
+import PayNowForm from '@/components/lp/shared/PayNowForm'
+import TestimonialCard from '@/components/lp/shared/TestimonialCard'
+import FAQAccordion from '@/components/lp/shared/FAQAccordion'
+import TrustBadges from '@/components/lp/shared/TrustBadges'
+import StickyMobileCTA from '@/components/lp/shared/StickyMobileCTA'
+import UrgencyBanner from '@/components/lp/shared/UrgencyBanner'
+import InfluencerBuzz from '@/components/lp/shared/InfluencerBuzz'
+import { PAYMENT_CONFIG, DESTINATIONS, FAQ_ITEMS } from '@/app/lp/_config/types'
+
+const TEAL = '#004D40'
+const MINT = '#E0F2F1'
+const SOFT_TEAL = '#00796B'
+const LIGHTEST = '#F1F8F7'
+
+const stressStats = [
+  { stat: '77%', label: 'of Americans report physical symptoms of stress regularly' },
+  { stat: '48%', label: 'say stress has increased in the past 5 years' },
+  { stat: '1 in 3', label: 'haven\'t taken a vacation in over 2 years' },
+]
+
+const wellnessBenefits = [
+  {
+    icon: Waves,
+    title: 'Ocean Therapy',
+    description: 'The sound of waves naturally lowers cortisol levels. Your resort sits steps from the shore.',
+  },
+  {
+    icon: Sun,
+    title: 'Vitamin D Reset',
+    description: 'Sunshine boosts serotonin production, helping restore your natural sleep-wake cycle.',
+  },
+  {
+    icon: Wind,
+    title: 'Digital Detox',
+    description: 'No deadlines, no meetings, no notifications. Five days of being truly present.',
+  },
+  {
+    icon: Droplets,
+    title: 'Spa & Wellness',
+    description: 'On-site spa facilities with massage, hydrotherapy, and relaxation areas included in your stay.',
+  },
+  {
+    icon: Leaf,
+    title: 'Nature Immersion',
+    description: 'Tropical gardens, cenotes, and jungle paths — nature is the original stress reliever.',
+  },
+  {
+    icon: Heart,
+    title: 'Connection',
+    description: 'Uninterrupted time with the people who matter most. No rushing, no agenda.',
+  },
+]
+
+const reliefTestimonials = [
+  {
+    quote: "I didn't realize how burned out I was until day two when I finally stopped thinking about work. By day four, I felt like a different person. I actually cried happy tears.",
+    name: "Maria G.",
+    location: "Houston, TX",
+    photo: "/images/cdn/photo-1438761681033-6461ffad8d80.jpg",
+  },
+  {
+    quote: "My therapist told me to take a real vacation. This was it. The sound of the ocean, no phone, good food — I came back genuinely rested for the first time in years.",
+    name: "Rachel T.",
+    location: "Phoenix, AZ",
+    photo: "/images/cdn/photo-1544005313-94ddf0286df2.jpg",
+  },
+  {
+    quote: "We both work stressful jobs. This trip was medicine. Waking up without an alarm, eating breakfast overlooking the ocean — we needed every second of it.",
+    name: "David & Lisa",
+    location: "Denver, CO",
+    photo: "/images/cdn/photo-1472099645785-5658abf4ff4e.jpg",
+  },
+]
+
+export default function LP18StressRelief() {
+  return (
+    <div
+      className="min-h-screen"
+      style={{
+        fontFamily: 'var(--font-jost), sans-serif',
+        backgroundColor: LIGHTEST,
+      }}
+    >
+      <UrgencyBanner variant="countdown" />
+
+      {/* Hero — Serene, minimal */}
+      <section className="relative min-h-[90vh] flex items-center justify-center overflow-hidden pt-20">
+        <div className="absolute inset-0">
+          <img
+            src="/images/cdn/photo-1506929562872-bb421503ef21.jpg"
+            alt="Peaceful beach meditation at sunrise"
+            className="w-full h-full object-cover"
+          />
+          <div
+            className="absolute inset-0"
+            style={{
+              background: `linear-gradient(180deg, ${TEAL}88 0%, ${TEAL}44 40%, ${MINT}cc 100%)`,
+            }}
+          />
+        </div>
+
+        <div className="relative z-10 max-w-2xl mx-auto px-6 text-center">
+          <Leaf className="w-8 h-8 mx-auto mb-8 text-white/80" />
+
+          <h1
+            className="text-4xl md:text-6xl font-light text-white mb-6 leading-tight tracking-tight"
+            style={{ fontFamily: 'var(--font-crimson), serif' }}
+          >
+            Your Mind Needs <br />
+            <span className="font-bold">a Beach</span>
+          </h1>
+
+          <p className="text-lg text-white/85 mb-4 max-w-lg mx-auto leading-relaxed font-light">
+            Five days of warm sand, gentle waves, and absolutely nothing
+            you have to do. All-inclusive. All taken care of.
+          </p>
+
+          <p className="text-sm text-white/60 mb-12">
+            From ${PAYMENT_CONFIG.monthlyPrice}/month &middot; No rush, no pressure
+          </p>
+
+          <div className="max-w-md mx-auto">
+            <p className="text-sm text-white/70 mb-3 font-light">
+              Start with a free guide to planning your escape:
+            </p>
+            <EbookCaptureForm
+              sourceLp="stress-relief"
+              accentColor={SOFT_TEAL}
+              buttonText="Send Me the Free Guide"
+              variant="inline"
+            />
+          </div>
+        </div>
+      </section>
+
+      {/* Breathing space */}
+      <div className="h-20" style={{ backgroundColor: MINT }} />
+
+      {/* Why You Need This */}
+      <section className="py-24 px-6" style={{ backgroundColor: MINT }}>
+        <div className="max-w-3xl mx-auto text-center">
+          <h2
+            className="text-3xl md:text-4xl font-light mb-6"
+            style={{
+              fontFamily: 'var(--font-crimson), serif',
+              color: TEAL,
+            }}
+          >
+            Why You Need This Escape
+          </h2>
+
+          <p
+            className="text-base leading-relaxed mb-16 max-w-2xl mx-auto"
+            style={{ color: `${TEAL}bb` }}
+          >
+            You already know. The tension in your shoulders. The racing thoughts at 2 AM.
+            The feeling that you are always behind on something. Your body and mind are
+            asking for a pause. This is that pause.
+          </p>
+
+          <div className="grid md:grid-cols-3 gap-8">
+            {stressStats.map((item) => (
+              <div key={item.stat} className="text-center">
+                <p
+                  className="text-4xl font-bold mb-2"
+                  style={{ color: TEAL }}
+                >
+                  {item.stat}
+                </p>
+                <p className="text-sm" style={{ color: `${TEAL}88` }}>
+                  {item.label}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Breathing space */}
+      <div className="h-4" style={{ backgroundColor: LIGHTEST }} />
+
+      {/* Wellness Benefits */}
+      <section className="py-24 px-6" style={{ backgroundColor: LIGHTEST }}>
+        <div className="max-w-4xl mx-auto">
+          <div className="text-center mb-16">
+            <h2
+              className="text-3xl md:text-4xl font-light mb-4"
+              style={{
+                fontFamily: 'var(--font-crimson), serif',
+                color: TEAL,
+              }}
+            >
+              How This Trip Heals
+            </h2>
+            <p style={{ color: `${TEAL}88` }}>
+              Science-backed reasons why vacation is medicine
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-2 gap-x-12 gap-y-10">
+            {wellnessBenefits.map((benefit) => (
+              <div key={benefit.title} className="flex gap-5">
+                <div
+                  className="w-12 h-12 rounded-full flex items-center justify-center shrink-0"
+                  style={{ backgroundColor: MINT }}
+                >
+                  <benefit.icon className="w-5 h-5" style={{ color: TEAL }} />
+                </div>
+                <div>
+                  <h3
+                    className="text-lg font-medium mb-1"
+                    style={{
+                      fontFamily: 'var(--font-crimson), serif',
+                      color: TEAL,
+                    }}
+                  >
+                    {benefit.title}
+                  </h3>
+                  <p className="text-sm leading-relaxed" style={{ color: `${TEAL}99` }}>
+                    {benefit.description}
+                  </p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Peaceful image break */}
+      <section className="relative h-[50vh]">
+        <img
+          src="/images/cdn/photo-1507525428034-b723cf961d3e.jpg"
+          alt="Serene ocean view"
+          className="w-full h-full object-cover"
+        />
+        <div
+          className="absolute inset-0 flex items-center justify-center"
+          style={{ backgroundColor: `${TEAL}44` }}
+        >
+          <p
+            className="text-3xl md:text-4xl text-white font-light text-center px-6 max-w-xl"
+            style={{ fontFamily: 'var(--font-crimson), serif' }}
+          >
+            &ldquo;Almost everything will work again if you unplug it for a few minutes&mdash;including you.&rdquo;
+          </p>
+        </div>
+      </section>
+
+      {/* Destinations — gentle presentation */}
+      <section className="py-24 px-6" style={{ backgroundColor: MINT }}>
+        <div className="max-w-4xl mx-auto">
+          <div className="text-center mb-14">
+            <h2
+              className="text-3xl md:text-4xl font-light mb-4"
+              style={{
+                fontFamily: 'var(--font-crimson), serif',
+                color: TEAL,
+              }}
+            >
+              Four Places to Find Your Peace
+            </h2>
+          </div>
+
+          <div className="grid md:grid-cols-2 gap-6">
+            {DESTINATIONS.map((dest) => (
+              <div
+                key={dest.name}
+                className="rounded-2xl overflow-hidden shadow-sm"
+                style={{ backgroundColor: 'white' }}
+              >
+                <div className="aspect-[16/10]">
+                  <img
+                    src={dest.images[0]}
+                    alt={dest.name}
+                    className="w-full h-full object-cover"
+                  />
+                </div>
+                <div className="p-5">
+                  <h3
+                    className="text-xl font-medium mb-1"
+                    style={{
+                      fontFamily: 'var(--font-crimson), serif',
+                      color: TEAL,
+                    }}
+                  >
+                    {dest.name}
+                  </h3>
+                  <p className="text-sm" style={{ color: `${TEAL}88` }}>
+                    {dest.tagline}
+                  </p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Ebook Section */}
+      <section className="py-24 px-6" style={{ backgroundColor: LIGHTEST }} id="signup-form">
+        <div className="max-w-2xl mx-auto text-center">
+          <CloudSun className="w-10 h-10 mx-auto mb-6" style={{ color: SOFT_TEAL }} />
+          <h2
+            className="text-3xl md:text-4xl font-light mb-3"
+            style={{
+              fontFamily: 'var(--font-crimson), serif',
+              color: TEAL,
+            }}
+          >
+            Your Free Travel Guide
+          </h2>
+          <p className="mb-2" style={{ color: `${TEAL}88` }}>
+            Budget Luxury Travel: 5 secrets to luxury Mexico vacations on a budget
+          </p>
+          <p className="text-sm mb-10" style={{ color: `${TEAL}66` }}>
+            No sales pitch. Just helpful information to start dreaming.
+          </p>
+
+          <EbookCaptureForm
+            sourceLp="stress-relief"
+            variant="card"
+            accentColor={SOFT_TEAL}
+            buttonText="Send Me the Free Guide"
+            className="max-w-md mx-auto border-teal-100"
+          />
+        </div>
+      </section>
+
+      {/* Gentle Pay Now */}
+      <section className="py-24 px-6" style={{ backgroundColor: MINT }}>
+        <div className="max-w-xl mx-auto">
+          <div className="text-center mb-10">
+            <h2
+              className="text-3xl font-light mb-3"
+              style={{
+                fontFamily: 'var(--font-crimson), serif',
+                color: TEAL,
+              }}
+            >
+              When You Are Ready
+            </h2>
+            <p style={{ color: `${TEAL}88` }}>
+              5 days, 4 nights, all-inclusive. Take your time deciding.
+            </p>
+          </div>
+
+          <div
+            className="rounded-2xl p-8 shadow-sm"
+            style={{ backgroundColor: 'white' }}
+          >
+            <div className="text-center mb-6">
+              <span
+                className="text-4xl font-light"
+                style={{
+                  color: TEAL,
+                  fontFamily: 'var(--font-crimson), serif',
+                }}
+              >
+                ${PAYMENT_CONFIG.monthlyPrice}
+              </span>
+              <span style={{ color: `${TEAL}88` }}>/month for {PAYMENT_CONFIG.totalMonths} months</span>
+              <p className="text-sm mt-1" style={{ color: `${TEAL}66` }}>
+                or ${PAYMENT_CONFIG.oneTimePrice} one-time &middot; 30-day refund guarantee
+              </p>
+            </div>
+
+            <PayNowForm
+              accentColor={SOFT_TEAL}
+              buttonText="Begin My Escape"
+            />
+          </div>
+
+          <TrustBadges variant="compact" className="mt-6" />
+        </div>
+      </section>
+
+      {/* Testimonials */}
+      <section className="py-24 px-6" style={{ backgroundColor: LIGHTEST }}>
+        <div className="max-w-4xl mx-auto">
+          <div className="text-center mb-14">
+            <h2
+              className="text-3xl font-light"
+              style={{
+                fontFamily: 'var(--font-crimson), serif',
+                color: TEAL,
+              }}
+            >
+              They Came Back Renewed
+            </h2>
+          </div>
+
+          <div className="grid md:grid-cols-3 gap-6">
+            {reliefTestimonials.map((t) => (
+              <TestimonialCard
+                key={t.name}
+                quote={t.quote}
+                name={t.name}
+                location={t.location}
+                photo={t.photo}
+              />
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <InfluencerBuzz />
+
+      {/* FAQ */}
+      <section className="py-24 px-6" style={{ backgroundColor: MINT }}>
+        <div className="max-w-2xl mx-auto">
+          <h2
+            className="text-3xl font-light text-center mb-10"
+            style={{
+              fontFamily: 'var(--font-crimson), serif',
+              color: TEAL,
+            }}
+          >
+            Common Questions
+          </h2>
+
+          <FAQAccordion />
+        </div>
+      </section>
+
+      {/* Gentle final CTA */}
+      <section
+        className="py-20 px-6 text-center"
+        style={{ backgroundColor: LIGHTEST }}
+      >
+        <TreePine className="w-8 h-8 mx-auto mb-6" style={{ color: SOFT_TEAL }} />
+        <h2
+          className="text-2xl md:text-3xl font-light mb-4"
+          style={{
+            fontFamily: 'var(--font-crimson), serif',
+            color: TEAL,
+          }}
+        >
+          Give Yourself Permission to Rest
+        </h2>
+        <p className="mb-8 max-w-md mx-auto" style={{ color: `${TEAL}88` }}>
+          Start with the free guide. No commitment, no rush.
+          Just a first step toward the break you deserve.
+        </p>
+        <div className="max-w-md mx-auto">
+          <EbookCaptureForm
+            sourceLp="stress-relief"
+            accentColor={SOFT_TEAL}
+            buttonText="Get the Free Guide"
+            variant="inline"
+          />
+        </div>
+      </section>
+
+      <StickyMobileCTA
+        accentColor={SOFT_TEAL}
+        buttonText="Get Free Guide"
+        targetId="signup-form"
+      />
+    </div>
+  )
+}
diff --git a/src/components/lp/pages/LP19FoodieParadise.tsx b/src/components/lp/pages/LP19FoodieParadise.tsx
new file mode 100644
index 0000000..1988398
--- /dev/null
+++ b/src/components/lp/pages/LP19FoodieParadise.tsx
@@ -0,0 +1,496 @@
+'use client'
+
+import { UtensilsCrossed, Wine, Coffee, IceCream, Flame, ChefHat, GlassWater, Beef } from 'lucide-react'
+import EbookCaptureForm from '@/components/lp/shared/EbookCaptureForm'
+import PayNowForm from '@/components/lp/shared/PayNowForm'
+import FAQAccordion from '@/components/lp/shared/FAQAccordion'
+import TrustBadges from '@/components/lp/shared/TrustBadges'
+import StickyMobileCTA from '@/components/lp/shared/StickyMobileCTA'
+import UrgencyBanner from '@/components/lp/shared/UrgencyBanner'
+import InfluencerBuzz from '@/components/lp/shared/InfluencerBuzz'
+import { PAYMENT_CONFIG, FAQ_ITEMS } from '@/app/lp/_config/types'
+
+const CHILE_RED = '#BF360C'
+const CHOCOLATE = '#3E2723'
+const AMBER = '#FF8F00'
+const CREAM = '#FFF8E1'
+const DARK_BG = '#1A0F0A'
+
+interface MenuItem {
+  name: string
+  description: string
+  tag?: string
+}
+
+interface MenuSection {
+  title: string
+  icon: React.ElementType
+  items: MenuItem[]
+}
+
+const menuSections: MenuSection[] = [
+  {
+    title: 'Breakfast Buffet',
+    icon: Coffee,
+    items: [
+      { name: 'Chilaquiles Verdes', description: 'Crispy tortillas in tangy tomatillo salsa, crema, queso fresco, and fried eggs', tag: 'Chef\'s Pick' },
+      { name: 'Tropical Fruit Station', description: 'Fresh mango, papaya, pineapple, dragon fruit, and coconut' },
+      { name: 'Huevos Rancheros', description: 'Farm eggs on corn tortillas with ranchero sauce, refried beans, and avocado' },
+      { name: 'Made-to-Order Omelettes', description: 'Choose your fillings: peppers, mushrooms, chorizo, Oaxaca cheese' },
+    ],
+  },
+  {
+    title: 'Poolside Lunch',
+    icon: GlassWater,
+    items: [
+      { name: 'Baja Fish Tacos', description: 'Beer-battered mahi-mahi, chipotle crema, mango pico, shredded cabbage', tag: 'Fan Favorite' },
+      { name: 'Ceviche Trio', description: 'Shrimp, octopus, and fish ceviche with avocado, lime, and tostadas' },
+      { name: 'Grilled Lobster Quesadilla', description: 'Butter-poached lobster, Oaxaca cheese, roasted corn salsa' },
+      { name: 'Guacamole Fresco', description: 'Tableside-prepared with Hass avocados, serrano chile, cilantro, lime' },
+    ],
+  },
+  {
+    title: 'Dinner Grill',
+    icon: Flame,
+    items: [
+      { name: 'Surf & Turf Mexicano', description: 'Grilled ribeye with chimichurri and garlic butter shrimp', tag: 'Signature' },
+      { name: 'Cochinita Pibil', description: 'Slow-roasted Yucatan pork in achiote, pickled red onion, habanero' },
+      { name: 'Mole Negro', description: 'Heritage recipe with 28 ingredients, served over free-range chicken' },
+      { name: 'Whole Grilled Red Snapper', description: 'Al pastor-seasoned, grilled over charcoal with roasted vegetables' },
+    ],
+  },
+  {
+    title: 'All-Day Bar',
+    icon: Wine,
+    items: [
+      { name: 'Premium Margaritas', description: 'Classic lime, mango habanero, tamarind, hibiscus, spicy watermelon', tag: 'Unlimited' },
+      { name: 'Mexican Craft Beer', description: 'Rotating selection of local craft breweries from across Mexico' },
+      { name: 'Fresh Juice Bar', description: 'Cold-pressed juices, smoothies, and agua frescas made to order' },
+      { name: 'Top-Shelf Spirits', description: 'Premium tequila, mezcal, rum, whiskey — all included in your stay' },
+    ],
+  },
+]
+
+const diningVenues = [
+  {
+    name: 'Oceanfront Grill',
+    description: 'Seafood and steaks with your toes in the sand',
+    image: '/images/cdn/photo-1414235077428-338989a2e8c0.jpg',
+  },
+  {
+    name: 'La Hacienda',
+    description: 'Authentic regional Mexican cuisine in a colonial courtyard',
+    image: '/images/cdn/photo-1555396273-367ea4eb4db5.jpg',
+  },
+  {
+    name: 'Teppanyaki Live',
+    description: 'Japanese-Mexican fusion with live tableside cooking',
+    image: '/images/cdn/photo-1517248135467-4c7edcad34c4.jpg',
+  },
+  {
+    name: 'Dolce Vita',
+    description: 'Italian-inspired dishes with a Mexican twist',
+    image: '/images/cdn/photo-1550966871-3ed3cdb51f3a.jpg',
+  },
+]
+
+export default function LP19FoodieParadise() {
+  return (
+    <div
+      className="min-h-screen"
+      style={{
+        fontFamily: 'var(--font-fira), sans-serif',
+        backgroundColor: CREAM,
+      }}
+    >
+      <UrgencyBanner variant="countdown" />
+
+      {/* Hero */}
+      <section className="relative min-h-[90vh] flex items-center justify-center overflow-hidden pt-20">
+        <div className="absolute inset-0">
+          <img
+            src="/images/cdn/photo-1504674900247-0877df9cc836.jpg"
+            alt="Gourmet Mexican cuisine spread"
+            className="w-full h-full object-cover"
+          />
+          <div
+            className="absolute inset-0"
+            style={{
+              background: `linear-gradient(to bottom, ${CHOCOLATE}ee 0%, ${CHOCOLATE}cc 40%, ${CHILE_RED}dd 100%)`,
+            }}
+          />
+        </div>
+
+        <div className="relative z-10 max-w-3xl mx-auto px-6 text-center text-white">
+          <div className="flex items-center justify-center gap-3 mb-6">
+            <UtensilsCrossed className="w-6 h-6" style={{ color: AMBER }} />
+            <span
+              className="text-sm tracking-[0.3em] uppercase"
+              style={{ color: AMBER }}
+            >
+              All-Inclusive Dining
+            </span>
+            <UtensilsCrossed className="w-6 h-6" style={{ color: AMBER }} />
+          </div>
+
+          <h1
+            className="text-4xl md:text-6xl lg:text-7xl font-bold mb-6 leading-tight"
+            style={{ fontFamily: 'var(--font-playfair), serif' }}
+          >
+            Unlimited <span style={{ color: AMBER }}>Everything</span>
+          </h1>
+
+          <p className="text-lg text-white/85 mb-3 max-w-2xl mx-auto leading-relaxed">
+            5 days, 4 nights of all-you-can-eat gourmet cuisine, unlimited premium drinks,
+            and world-class dining at a luxury Mexican resort.
+          </p>
+
+          <p className="text-base text-white/60 mb-10">
+            From ${PAYMENT_CONFIG.monthlyPrice}/month &middot; Every meal, every drink, every bite — included.
+          </p>
+
+          <div className="max-w-md mx-auto" id="ebook-form">
+            <p className="text-sm text-white/70 mb-3">
+              Get our free travel guide to eating your way through Mexico:
+            </p>
+            <EbookCaptureForm
+              sourceLp="foodie-paradise"
+              accentColor={AMBER}
+              buttonText="Get My Free Foodie Guide"
+              variant="inline"
+            />
+          </div>
+        </div>
+      </section>
+
+      {/* The Menu */}
+      <section className="py-20 px-6" style={{ backgroundColor: DARK_BG }}>
+        <div className="max-w-3xl mx-auto">
+          <div className="text-center mb-16">
+            <ChefHat className="w-10 h-10 mx-auto mb-4" style={{ color: AMBER }} />
+            <h2
+              className="text-3xl md:text-5xl font-bold text-white mb-3"
+              style={{ fontFamily: 'var(--font-playfair), serif' }}
+            >
+              The Menu
+            </h2>
+            <p className="text-white/50 text-sm tracking-widest uppercase">
+              A taste of what awaits — all included in your stay
+            </p>
+            <div
+              className="w-24 h-0.5 mx-auto mt-6"
+              style={{ backgroundColor: AMBER }}
+            />
+          </div>
+
+          {menuSections.map((section, sIndex) => (
+            <div key={section.title} className="mb-14">
+              <div className="flex items-center gap-3 mb-6">
+                <section.icon className="w-6 h-6" style={{ color: AMBER }} />
+                <h3
+                  className="text-xl font-bold text-white tracking-wide"
+                  style={{ fontFamily: 'var(--font-playfair), serif' }}
+                >
+                  {section.title}
+                </h3>
+                <div
+                  className="flex-1 h-px"
+                  style={{ backgroundColor: `${AMBER}33` }}
+                />
+              </div>
+
+              <div className="space-y-4 pl-2">
+                {section.items.map((item) => (
+                  <div
+                    key={item.name}
+                    className="flex justify-between items-start gap-4"
+                  >
+                    <div className="flex-1">
+                      <div className="flex items-center gap-2">
+                        <span
+                          className="font-semibold text-white"
+                          style={{ fontFamily: 'var(--font-playfair), serif' }}
+                        >
+                          {item.name}
+                        </span>
+                        {item.tag && (
+                          <span
+                            className="text-[10px] uppercase tracking-wider px-2 py-0.5 rounded-full"
+                            style={{
+                              backgroundColor: `${AMBER}22`,
+                              color: AMBER,
+                            }}
+                          >
+                            {item.tag}
+                          </span>
+                        )}
+                      </div>
+                      <p className="text-sm text-white/50 mt-0.5 leading-relaxed">
+                        {item.description}
+                      </p>
+                    </div>
+                    <span
+                      className="text-sm font-bold shrink-0 mt-0.5"
+                      style={{ color: AMBER }}
+                    >
+                      Included
+                    </span>
+                  </div>
+                ))}
+              </div>
+
+              {sIndex < menuSections.length - 1 && (
+                <div
+                  className="w-full h-px mt-10"
+                  style={{ backgroundColor: `${AMBER}15` }}
+                />
+              )}
+            </div>
+          ))}
+
+          <div
+            className="text-center rounded-xl p-6 mt-8"
+            style={{ backgroundColor: `${AMBER}11`, border: `1px solid ${AMBER}22` }}
+          >
+            <p className="text-white/80 text-sm">
+              Plus dessert buffets, 24-hour room service, late-night snack bars, and more.
+            </p>
+            <p
+              className="font-bold mt-2"
+              style={{ color: AMBER, fontFamily: 'var(--font-playfair), serif' }}
+            >
+              All included. Eat as much as you want.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      {/* Dining Venues */}
+      <section className="py-20 px-6" style={{ backgroundColor: CREAM }}>
+        <div className="max-w-5xl mx-auto">
+          <div className="text-center mb-14">
+            <h2
+              className="text-3xl md:text-4xl font-bold mb-3"
+              style={{
+                fontFamily: 'var(--font-playfair), serif',
+                color: CHOCOLATE,
+              }}
+            >
+              Multiple Restaurants, One Resort
+            </h2>
+            <p style={{ color: `${CHOCOLATE}88` }}>
+              No reservations needed. No checks at the end of the meal.
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-2 gap-6">
+            {diningVenues.map((venue) => (
+              <div
+                key={venue.name}
+                className="rounded-xl overflow-hidden shadow-md"
+                style={{ backgroundColor: 'white' }}
+              >
+                <div className="aspect-[3/2]">
+                  <img
+                    src={venue.image}
+                    alt={venue.name}
+                    className="w-full h-full object-cover"
+                  />
+                </div>
+                <div className="p-5">
+                  <h3
+                    className="text-lg font-bold mb-1"
+                    style={{
+                      fontFamily: 'var(--font-playfair), serif',
+                      color: CHOCOLATE,
+                    }}
+                  >
+                    {venue.name}
+                  </h3>
+                  <p className="text-sm" style={{ color: `${CHOCOLATE}88` }}>
+                    {venue.description}
+                  </p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* All You Can Eat emphasis */}
+      <section
+        className="py-16 px-6"
+        style={{
+          background: `linear-gradient(135deg, ${CHILE_RED} 0%, ${CHOCOLATE} 100%)`,
+        }}
+      >
+        <div className="max-w-3xl mx-auto text-center">
+          <Beef className="w-10 h-10 mx-auto mb-6" style={{ color: AMBER }} />
+          <h2
+            className="text-3xl md:text-5xl font-bold text-white mb-4"
+            style={{ fontFamily: 'var(--font-playfair), serif' }}
+          >
+            All You Can Eat &amp; Drink
+          </h2>
+          <p className="text-white/80 text-lg max-w-xl mx-auto mb-8 leading-relaxed">
+            Breakfast. Lunch. Dinner. Snacks. Cocktails. Premium liquor. Craft beer.
+            Fresh juice. Coffee. Room service. Every single bite and sip is included
+            in your certificate price. No hidden costs. No resort fees. No surprise bar tabs.
+          </p>
+
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+            {[
+              { icon: Coffee, label: 'Breakfast Buffet' },
+              { icon: UtensilsCrossed, label: 'Multi-Course Dinners' },
+              { icon: Wine, label: 'Premium Bar' },
+              { icon: IceCream, label: 'Dessert & Snacks' },
+            ].map((item) => (
+              <div key={item.label} className="text-center p-4">
+                <item.icon className="w-8 h-8 mx-auto mb-2 text-white/80" />
+                <p
+                  className="text-sm font-semibold"
+                  style={{ color: AMBER }}
+                >
+                  {item.label}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Ebook Section */}
+      <section className="py-20 px-6" style={{ backgroundColor: CREAM }} id="signup-form">
+        <div className="max-w-2xl mx-auto text-center">
+          <ChefHat className="w-10 h-10 mx-auto mb-4" style={{ color: CHILE_RED }} />
+          <h2
+            className="text-3xl md:text-4xl font-bold mb-3"
+            style={{
+              fontFamily: 'var(--font-playfair), serif',
+              color: CHOCOLATE,
+            }}
+          >
+            Free: Budget Luxury Travel Guide
+          </h2>
+          <p className="mb-2" style={{ color: `${CHOCOLATE}88` }}>
+            5 secrets to luxury Mexico vacations on a budget
+          </p>
+          <p className="text-sm mb-8" style={{ color: `${CHOCOLATE}66` }}>
+            Including insider tips on the best resort dining experiences
+          </p>
+
+          <EbookCaptureForm
+            sourceLp="foodie-paradise"
+            variant="card"
+            accentColor={CHILE_RED}
+            buttonText="Get My Free Foodie Guide"
+            className="max-w-md mx-auto"
+          />
+        </div>
+      </section>
+
+      {/* Pay Now */}
+      <section className="py-20 px-6" style={{ backgroundColor: DARK_BG }}>
+        <div className="max-w-xl mx-auto">
+          <div className="text-center mb-10">
+            <h2
+              className="text-3xl md:text-4xl font-bold text-white mb-3"
+              style={{ fontFamily: 'var(--font-playfair), serif' }}
+            >
+              Ready to Feast?
+            </h2>
+            <p className="text-white/50">
+              5 days, 4 nights, unlimited food and drink.
+            </p>
+          </div>
+
+          <div
+            className="rounded-xl p-8"
+            style={{
+              backgroundColor: `${CHOCOLATE}`,
+              border: `1px solid ${AMBER}33`,
+            }}
+          >
+            <div className="text-center mb-6">
+              <span
+                className="text-5xl font-bold"
+                style={{
+                  color: AMBER,
+                  fontFamily: 'var(--font-playfair), serif',
+                }}
+              >
+                ${PAYMENT_CONFIG.monthlyPrice}
+              </span>
+              <span className="text-white/60 text-lg">/mo for {PAYMENT_CONFIG.totalMonths} months</span>
+              <p className="text-white/40 text-sm mt-1">
+                or ${PAYMENT_CONFIG.oneTimePrice} one-time &middot; Every meal included
+              </p>
+            </div>
+
+            <PayNowForm
+              accentColor={AMBER}
+              buttonText="Book My Foodie Escape"
+              variant="dark"
+            />
+          </div>
+
+          <TrustBadges
+            variant="compact"
+            textColor="rgba(255,255,255,0.4)"
+            className="mt-6"
+          />
+        </div>
+      </section>
+
+      <InfluencerBuzz />
+
+      {/* FAQ */}
+      <section className="py-20 px-6" style={{ backgroundColor: CREAM }}>
+        <div className="max-w-2xl mx-auto">
+          <h2
+            className="text-3xl font-bold text-center mb-10"
+            style={{
+              fontFamily: 'var(--font-playfair), serif',
+              color: CHOCOLATE,
+            }}
+          >
+            Frequently Asked Questions
+          </h2>
+
+          <FAQAccordion />
+        </div>
+      </section>
+
+      {/* Final CTA */}
+      <section
+        className="py-16 px-6 text-center"
+        style={{ backgroundColor: CHOCOLATE }}
+      >
+        <UtensilsCrossed className="w-8 h-8 mx-auto mb-4" style={{ color: AMBER }} />
+        <h2
+          className="text-2xl md:text-3xl font-bold text-white mb-3"
+          style={{ fontFamily: 'var(--font-playfair), serif' }}
+        >
+          Your Table Is Waiting
+        </h2>
+        <p className="text-white/50 mb-8 max-w-md mx-auto">
+          Start with the free guide. Then come hungry.
+        </p>
+        <div className="max-w-md mx-auto">
+          <EbookCaptureForm
+            sourceLp="foodie-paradise"
+            accentColor={AMBER}
+            buttonText="Get the Free Guide"
+            variant="inline"
+          />
+        </div>
+      </section>
+
+      <StickyMobileCTA
+        accentColor={AMBER}
+        buttonText="Get Free Guide"
+        targetId="signup-form"
+      />
+    </div>
+  )
+}
diff --git a/src/components/lp/pages/LP20FamilyEscape.tsx b/src/components/lp/pages/LP20FamilyEscape.tsx
new file mode 100644
index 0000000..76d04d8
--- /dev/null
+++ b/src/components/lp/pages/LP20FamilyEscape.tsx
@@ -0,0 +1,532 @@
+'use client'
+
+import {
+  Sun, Waves, TreePalm, Gamepad2, Shield, Heart,
+  Umbrella, IceCream, Music, Fish, Castle, Palette,
+  Coffee, Sparkles, Users, Star, MapPin,
+} from 'lucide-react'
+import EbookCaptureForm from '@/components/lp/shared/EbookCaptureForm'
+import PayNowForm from '@/components/lp/shared/PayNowForm'
+import TestimonialCard from '@/components/lp/shared/TestimonialCard'
+import FAQAccordion from '@/components/lp/shared/FAQAccordion'
+import TrustBadges from '@/components/lp/shared/TrustBadges'
+import StickyMobileCTA from '@/components/lp/shared/StickyMobileCTA'
+import UrgencyBanner from '@/components/lp/shared/UrgencyBanner'
+import InfluencerBuzz from '@/components/lp/shared/InfluencerBuzz'
+import { PAYMENT_CONFIG, DESTINATIONS, FAQ_ITEMS } from '@/app/lp/_config/types'
+
+const OCEAN_BLUE = '#0277BD'
+const ORANGE = '#FF6F00'
+const GREEN = '#7CB342'
+const LIGHT_BLUE = '#E1F5FE'
+const SAND = '#FFF8E1'
+
+const kidsGet = [
+  { icon: Waves, text: 'Splash parks and kid-friendly pools' },
+  { icon: Castle, text: 'Kids club with supervised activities' },
+  { icon: IceCream, text: 'Unlimited ice cream and snacks' },
+  { icon: Gamepad2, text: 'Beach games, sandcastle contests' },
+  { icon: Fish, text: 'Snorkeling in shallow, calm waters' },
+  { icon: Palette, text: 'Arts & crafts and treasure hunts' },
+]
+
+const parentsGet = [
+  { icon: Coffee, text: 'Quiet adults-only pool and lounge' },
+  { icon: Sparkles, text: 'Spa treatments and massage' },
+  { icon: Music, text: 'Evening entertainment and live shows' },
+  { icon: Sun, text: 'Beach time without checking the clock' },
+  { icon: Heart, text: 'Date nights while kids are at the club' },
+  { icon: Umbrella, text: 'All meals handled — no cooking, no dishes' },
+]
+
+const familyActivities = [
+  {
+    title: 'Beach Adventures',
+    description: 'Build sandcastles, swim in warm turquoise waters, and spot tropical fish together.',
+    image: '/images/cdn/photo-1507525428034-b723cf961d3e.jpg',
+  },
+  {
+    title: 'Snorkeling for All Ages',
+    description: 'Calm, shallow reefs perfect for first-time snorkelers. Equipment provided for the whole family.',
+    image: '/images/cdn/photo-1544551763-46a013bb70d5.jpg',
+  },
+  {
+    title: 'Pool Party Every Day',
+    description: 'Waterslides, splash pads, and a swim-up bar (juice for the kids, cocktails for you).',
+    image: '/images/cdn/photo-1576610616656-d3aa5d1f4534.jpg',
+  },
+  {
+    title: 'Cultural Exploration',
+    description: 'Visit ancient Mayan ruins, local markets, and learn about Mexican culture as a family.',
+    image: '/images/cdn/photo-1518638150340-f706e86654de.jpg',
+  },
+]
+
+const familyTestimonials = [
+  {
+    quote: "Our kids still talk about this trip every single day. The kids club was amazing — they didn't want to leave! Meanwhile, we got actual relaxation time.",
+    name: "Sarah & Mike",
+    location: "Chicago, IL",
+    photo: "/images/cdn/photo-1522529599102-193c0d76b5b6.jpg",
+  },
+  {
+    quote: "Best family vacation ever. Not having to worry about meal costs with three hungry kids was a game-changer. Everything was included!",
+    name: "Jennifer & Tom",
+    location: "New York, NY",
+    photo: "/images/cdn/photo-1494790108377-be9c29b29330.jpg",
+  },
+  {
+    quote: "The kids learned to snorkel, built a hundred sandcastles, and made friends from all over. We actually came back rested — as parents! That never happens.",
+    name: "James & Patricia",
+    location: "Miami, FL",
+    photo: "/images/cdn/photo-1500648767791-00dcc994a43e.jpg",
+  },
+]
+
+export default function LP20FamilyEscape() {
+  return (
+    <div
+      className="min-h-screen"
+      style={{
+        fontFamily: 'var(--font-lexend), sans-serif',
+      }}
+    >
+      <UrgencyBanner variant="countdown" />
+
+      {/* Hero */}
+      <section className="relative min-h-[90vh] flex items-center justify-center overflow-hidden pt-20">
+        <div className="absolute inset-0">
+          <img
+            src="/images/cdn/photo-1581710862235-eb6e05d8783f.jpg"
+            alt="Beautiful family beach vacation"
+            className="w-full h-full object-cover"
+          />
+          <div
+            className="absolute inset-0"
+            style={{
+              background: `linear-gradient(135deg, ${OCEAN_BLUE}dd 0%, ${OCEAN_BLUE}88 50%, ${ORANGE}88 100%)`,
+            }}
+          />
+        </div>
+
+        <div className="relative z-10 max-w-3xl mx-auto px-6 text-center text-white">
+          <div className="flex items-center justify-center gap-2 mb-6">
+            <Sun className="w-8 h-8 text-yellow-300" />
+            <TreePalm className="w-8 h-8 text-green-300" />
+            <Waves className="w-8 h-8 text-blue-200" />
+          </div>
+
+          <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold mb-6 leading-tight">
+            Give Them the Vacation
+            <br />
+            <span style={{ color: '#FFD54F' }}>
+              They&apos;ve Been Asking For
+            </span>
+          </h1>
+
+          <p className="text-lg md:text-xl text-white/90 mb-3 max-w-2xl mx-auto leading-relaxed">
+            5 days, 4 nights at an all-inclusive Mexican resort.
+            Unlimited fun for the kids. Actual relaxation for you.
+          </p>
+
+          <p className="text-base text-white/70 mb-10">
+            Starting at just ${PAYMENT_CONFIG.monthlyPrice}/month for the whole family
+          </p>
+
+          <div className="max-w-md mx-auto" id="ebook-form">
+            <p className="text-sm text-white/80 mb-3">
+              Get our free family travel planning guide:
+            </p>
+            <EbookCaptureForm
+              sourceLp="family-escape"
+              accentColor={ORANGE}
+              buttonText="Get the Free Family Guide"
+              variant="inline"
+            />
+          </div>
+        </div>
+
+        {/* Playful wave divider */}
+        <div className="absolute bottom-0 left-0 right-0">
+          <svg viewBox="0 0 1440 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M0 60C240 20 480 80 720 50C960 20 1200 80 1440 40V100H0V60Z"
+              fill={LIGHT_BLUE}
+            />
+          </svg>
+        </div>
+      </section>
+
+      {/* Kids Get / Parents Get Split */}
+      <section className="py-20 px-6" style={{ backgroundColor: LIGHT_BLUE }}>
+        <div className="max-w-5xl mx-auto">
+          <div className="text-center mb-14">
+            <h2 className="text-3xl md:text-4xl font-bold mb-3" style={{ color: OCEAN_BLUE }}>
+              Something for Everyone
+            </h2>
+            <p style={{ color: `${OCEAN_BLUE}88` }}>
+              The whole family wins on this vacation
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-2 gap-8">
+            {/* Kids Column */}
+            <div
+              className="rounded-2xl p-8 shadow-md"
+              style={{
+                backgroundColor: 'white',
+                borderTop: `4px solid ${ORANGE}`,
+              }}
+            >
+              <div className="flex items-center gap-3 mb-6">
+                <div
+                  className="w-12 h-12 rounded-full flex items-center justify-center text-white text-xl font-bold"
+                  style={{ backgroundColor: ORANGE }}
+                >
+                  <Gamepad2 className="w-6 h-6" />
+                </div>
+                <h3 className="text-2xl font-bold" style={{ color: ORANGE }}>
+                  Kids Get...
+                </h3>
+              </div>
+
+              <div className="space-y-4">
+                {kidsGet.map((item) => (
+                  <div key={item.text} className="flex items-center gap-3">
+                    <div
+                      className="w-8 h-8 rounded-lg flex items-center justify-center shrink-0"
+                      style={{ backgroundColor: `${ORANGE}15` }}
+                    >
+                      <item.icon className="w-4 h-4" style={{ color: ORANGE }} />
+                    </div>
+                    <span className="text-sm" style={{ color: '#424242' }}>
+                      {item.text}
+                    </span>
+                  </div>
+                ))}
+              </div>
+
+              <div
+                className="mt-6 rounded-lg p-4 text-center"
+                style={{ backgroundColor: `${ORANGE}10` }}
+              >
+                <p className="text-sm font-semibold" style={{ color: ORANGE }}>
+                  &ldquo;This is the BEST vacation EVER!&rdquo;
+                </p>
+                <p className="text-xs mt-1" style={{ color: `${ORANGE}88` }}>
+                  &mdash; Every kid who visits
+                </p>
+              </div>
+            </div>
+
+            {/* Parents Column */}
+            <div
+              className="rounded-2xl p-8 shadow-md"
+              style={{
+                backgroundColor: 'white',
+                borderTop: `4px solid ${OCEAN_BLUE}`,
+              }}
+            >
+              <div className="flex items-center gap-3 mb-6">
+                <div
+                  className="w-12 h-12 rounded-full flex items-center justify-center text-white text-xl font-bold"
+                  style={{ backgroundColor: OCEAN_BLUE }}
+                >
+                  <Coffee className="w-6 h-6" />
+                </div>
+                <h3 className="text-2xl font-bold" style={{ color: OCEAN_BLUE }}>
+                  Parents Get...
+                </h3>
+              </div>
+
+              <div className="space-y-4">
+                {parentsGet.map((item) => (
+                  <div key={item.text} className="flex items-center gap-3">
+                    <div
+                      className="w-8 h-8 rounded-lg flex items-center justify-center shrink-0"
+                      style={{ backgroundColor: `${OCEAN_BLUE}15` }}
+                    >
+                      <item.icon className="w-4 h-4" style={{ color: OCEAN_BLUE }} />
+                    </div>
+                    <span className="text-sm" style={{ color: '#424242' }}>
+                      {item.text}
+                    </span>
+                  </div>
+                ))}
+              </div>
+
+              <div
+                className="mt-6 rounded-lg p-4 text-center"
+                style={{ backgroundColor: `${OCEAN_BLUE}10` }}
+              >
+                <p className="text-sm font-semibold" style={{ color: OCEAN_BLUE }}>
+                  &ldquo;We actually came back rested!&rdquo;
+                </p>
+                <p className="text-xs mt-1" style={{ color: `${OCEAN_BLUE}88` }}>
+                  &mdash; Every parent who visits
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Family Activities */}
+      <section className="py-20 px-6" style={{ backgroundColor: SAND }}>
+        <div className="max-w-5xl mx-auto">
+          <div className="text-center mb-14">
+            <h2 className="text-3xl md:text-4xl font-bold mb-3" style={{ color: OCEAN_BLUE }}>
+              Adventures the Whole Family Will Love
+            </h2>
+            <p style={{ color: `${OCEAN_BLUE}88` }}>
+              Create memories that last a lifetime
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-2 gap-6">
+            {familyActivities.map((activity) => (
+              <div
+                key={activity.title}
+                className="rounded-2xl overflow-hidden shadow-md"
+                style={{ backgroundColor: 'white' }}
+              >
+                <div className="aspect-[3/2]">
+                  <img
+                    src={activity.image}
+                    alt={activity.title}
+                    className="w-full h-full object-cover"
+                  />
+                </div>
+                <div className="p-5">
+                  <h3 className="text-lg font-bold mb-1" style={{ color: OCEAN_BLUE }}>
+                    {activity.title}
+                  </h3>
+                  <p className="text-sm" style={{ color: '#616161' }}>
+                    {activity.description}
+                  </p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* What's All Included banner */}
+      <section
+        className="py-16 px-6"
+        style={{
+          background: `linear-gradient(135deg, ${OCEAN_BLUE} 0%, ${GREEN} 100%)`,
+        }}
+      >
+        <div className="max-w-4xl mx-auto">
+          <h2 className="text-3xl md:text-4xl font-bold text-white text-center mb-10">
+            All-Inclusive Means <span style={{ color: '#FFD54F' }}>All-Inclusive</span>
+          </h2>
+
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-6 text-center">
+            {[
+              { icon: '🏨', label: 'Luxury Resort Room' },
+              { icon: '🍽️', label: 'All Meals Included' },
+              { icon: '🍹', label: 'Unlimited Drinks' },
+              { icon: '🏊', label: 'Pools & Beach' },
+              { icon: '🎭', label: 'Kids Club' },
+              { icon: '🎪', label: 'Evening Shows' },
+              { icon: '🏄', label: 'Water Sports' },
+              { icon: '🎯', label: '18 Months to Book' },
+            ].map((item) => (
+              <div key={item.label} className="p-3">
+                <span className="text-3xl block mb-2">{item.icon}</span>
+                <p className="text-sm font-semibold text-white">{item.label}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Destination Previews */}
+      <section className="py-20 px-6" style={{ backgroundColor: LIGHT_BLUE }}>
+        <div className="max-w-5xl mx-auto">
+          <div className="text-center mb-14">
+            <h2 className="text-3xl md:text-4xl font-bold mb-3" style={{ color: OCEAN_BLUE }}>
+              Pick Your Family&apos;s Paradise
+            </h2>
+            <p style={{ color: `${OCEAN_BLUE}88` }}>
+              Four family-friendly destinations to choose from
+            </p>
+          </div>
+
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+            {DESTINATIONS.map((dest) => (
+              <div
+                key={dest.name}
+                className="rounded-xl overflow-hidden shadow-md group cursor-pointer"
+                style={{ backgroundColor: 'white' }}
+              >
+                <div className="aspect-square overflow-hidden">
+                  <img
+                    src={dest.images[0]}
+                    alt={dest.name}
+                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+                  />
+                </div>
+                <div className="p-3 text-center">
+                  <h3 className="font-bold text-sm" style={{ color: OCEAN_BLUE }}>
+                    {dest.name}
+                  </h3>
+                  <p className="text-xs mt-0.5" style={{ color: '#757575' }}>
+                    {dest.tagline}
+                  </p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Ebook Section */}
+      <section
+        className="py-20 px-6"
+        style={{
+          background: `linear-gradient(135deg, ${ORANGE} 0%, ${OCEAN_BLUE} 100%)`,
+        }}
+        id="signup-form"
+      >
+        <div className="max-w-2xl mx-auto text-center">
+          <Users className="w-10 h-10 mx-auto mb-4 text-white" />
+          <h2 className="text-3xl md:text-4xl font-bold text-white mb-3">
+            Free Family Travel Guide
+          </h2>
+          <p className="text-white/80 mb-2">
+            Budget Luxury Travel: 5 secrets to luxury Mexico vacations on a budget
+          </p>
+          <p className="text-white/60 text-sm mb-8">
+            Tips on traveling with kids, packing lists, and picking the right resort
+          </p>
+
+          <EbookCaptureForm
+            sourceLp="family-escape"
+            variant="card"
+            accentColor={ORANGE}
+            buttonText="Get the Free Family Guide"
+            className="bg-white/10 border-white/20 text-white max-w-md mx-auto"
+          />
+        </div>
+      </section>
+
+      {/* Pay Now */}
+      <section className="py-20 px-6" style={{ backgroundColor: SAND }}>
+        <div className="max-w-xl mx-auto">
+          <div className="text-center mb-10">
+            <h2 className="text-3xl md:text-4xl font-bold mb-3" style={{ color: OCEAN_BLUE }}>
+              Ready for Family Fun?
+            </h2>
+            <p style={{ color: `${OCEAN_BLUE}88` }}>
+              5 days, 4 nights, all-inclusive &mdash; the whole family
+            </p>
+          </div>
+
+          <div
+            className="rounded-2xl p-8 shadow-lg"
+            style={{
+              backgroundColor: 'white',
+              borderTop: `4px solid ${OCEAN_BLUE}`,
+            }}
+          >
+            <div className="text-center mb-6">
+              <span
+                className="text-5xl font-bold"
+                style={{ color: OCEAN_BLUE }}
+              >
+                ${PAYMENT_CONFIG.monthlyPrice}
+              </span>
+              <span style={{ color: '#757575' }}>/mo for {PAYMENT_CONFIG.totalMonths} months</span>
+              <p className="text-sm mt-1" style={{ color: '#9E9E9E' }}>
+                or ${PAYMENT_CONFIG.oneTimePrice} one-time &middot; 30-day money-back guarantee
+              </p>
+            </div>
+
+            <PayNowForm
+              accentColor={OCEAN_BLUE}
+              buttonText="Book Our Family Vacation!"
+            />
+          </div>
+
+          <TrustBadges variant="compact" className="mt-6" />
+        </div>
+      </section>
+
+      {/* Family Testimonials */}
+      <section className="py-20 px-6" style={{ backgroundColor: LIGHT_BLUE }}>
+        <div className="max-w-5xl mx-auto">
+          <div className="text-center mb-12">
+            <h2 className="text-3xl md:text-4xl font-bold" style={{ color: OCEAN_BLUE }}>
+              Families Love It Here
+            </h2>
+          </div>
+
+          <div className="grid md:grid-cols-3 gap-6">
+            {familyTestimonials.map((t) => (
+              <TestimonialCard
+                key={t.name}
+                quote={t.quote}
+                name={t.name}
+                location={t.location}
+                photo={t.photo}
+              />
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <InfluencerBuzz />
+
+      {/* FAQ */}
+      <section className="py-20 px-6" style={{ backgroundColor: SAND }}>
+        <div className="max-w-2xl mx-auto">
+          <h2
+            className="text-3xl font-bold text-center mb-10"
+            style={{ color: OCEAN_BLUE }}
+          >
+            Family Travel FAQs
+          </h2>
+
+          <FAQAccordion />
+        </div>
+      </section>
+
+      {/* Final CTA */}
+      <section
+        className="py-16 px-6 text-center"
+        style={{
+          background: `linear-gradient(135deg, ${OCEAN_BLUE} 0%, ${GREEN} 100%)`,
+        }}
+      >
+        <div className="flex items-center justify-center gap-2 mb-4">
+          <Sun className="w-6 h-6 text-yellow-300" />
+          <TreePalm className="w-6 h-6 text-green-200" />
+          <Waves className="w-6 h-6 text-blue-200" />
+        </div>
+        <h2 className="text-2xl md:text-3xl font-bold text-white mb-3">
+          They&apos;ll Remember This Forever
+        </h2>
+        <p className="text-white/70 mb-8 max-w-lg mx-auto">
+          Start planning with our free guide. The best family memories are just ahead.
+        </p>
+        <div className="max-w-md mx-auto">
+          <EbookCaptureForm
+            sourceLp="family-escape"
+            accentColor={ORANGE}
+            buttonText="Get the Free Family Guide"
+            variant="inline"
+          />
+        </div>
+      </section>
+
+      <StickyMobileCTA
+        accentColor={ORANGE}
+        buttonText="Get Free Guide"
+        targetId="signup-form"
+      />
+    </div>
+  )
+}
diff --git a/src/components/lp/pages/LP21LastChance.tsx b/src/components/lp/pages/LP21LastChance.tsx
new file mode 100644
index 0000000..4eb8bad
--- /dev/null
+++ b/src/components/lp/pages/LP21LastChance.tsx
@@ -0,0 +1,465 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import {
+  AlertTriangle,
+  Flame,
+  Clock,
+  Check,
+  MapPin,
+  Star,
+  Shield,
+  Zap,
+  Gift,
+  Users,
+  Eye,
+  ArrowDown,
+} from 'lucide-react'
+import PayNowForm from '@/components/lp/shared/PayNowForm'
+import CountdownTimer from '@/components/lp/shared/CountdownTimer'
+import TrustBadges from '@/components/lp/shared/TrustBadges'
+import FAQAccordion from '@/components/lp/shared/FAQAccordion'
+import TestimonialCard from '@/components/lp/shared/TestimonialCard'
+import StickyMobileCTA from '@/components/lp/shared/StickyMobileCTA'
+import UrgencyBanner from '@/components/lp/shared/UrgencyBanner'
+import InfluencerBuzz from '@/components/lp/shared/InfluencerBuzz'
+import TikTokCarousel from '@/components/lp/shared/TikTokCarousel'
+import DestinationCarousel from '@/components/lp/shared/DestinationCarousel'
+import { PAYMENT_CONFIG, TESTIMONIALS, FAQ_ITEMS } from '@/app/lp/_config/types'
+
+const RED = '#F44336'
+const AMBER = '#FFC107'
+const DARK_BG = '#0D0D0D'
+
+const FEATURES = [
+  {
+    icon: MapPin,
+    title: '4 Premium Destinations',
+    description: 'Cancun, Cabo, Riviera Maya, or Puerto Vallarta',
+  },
+  {
+    icon: Clock,
+    title: '5 Days / 4 Nights',
+    description: 'A real vacation — not a weekend trip',
+  },
+  {
+    icon: Gift,
+    title: 'All-Inclusive',
+    description: 'Every meal, every drink, every activity included',
+  },
+  {
+    icon: Star,
+    title: '4-5 Star Resorts',
+    description: 'Luxury properties with world-class amenities',
+  },
+  {
+    icon: Shield,
+    title: '30-Day Refund',
+    description: 'Full money back if you change your mind',
+  },
+  {
+    icon: Zap,
+    title: '18 Months to Book',
+    description: 'Flexible scheduling on your terms',
+  },
+]
+
+function PulsingDot({ color = RED }: { color?: string }) {
+  return (
+    <span className="relative flex h-3 w-3">
+      <span
+        className="animate-ping absolute inline-flex h-full w-full rounded-full opacity-75"
+        style={{ backgroundColor: color }}
+      />
+      <span
+        className="relative inline-flex rounded-full h-3 w-3"
+        style={{ backgroundColor: color }}
+      />
+    </span>
+  )
+}
+
+function LiveVisitorCount() {
+  const [count, setCount] = useState(347)
+  const [claimed, setClaimed] = useState(23)
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCount(prev => prev + (Math.random() > 0.5 ? 1 : -1))
+      if (Math.random() > 0.8) {
+        setClaimed(prev => prev + 1)
+      }
+    }, 3000)
+    return () => clearInterval(interval)
+  }, [])
+
+  return (
+    <div className="flex flex-col sm:flex-row items-center gap-4 sm:gap-8">
+      <div className="flex items-center gap-2">
+        <Eye className="w-5 h-5 text-red-400" />
+        <span className="text-white/90 text-sm">
+          <strong className="text-white">{count}</strong> people visited this page today
+        </span>
+      </div>
+      <div className="flex items-center gap-2">
+        <PulsingDot />
+        <span className="text-red-300 text-sm font-semibold">
+          {claimed} certificates claimed in the last hour
+        </span>
+      </div>
+    </div>
+  )
+}
+
+function SpotsRemaining() {
+  const [spots, setSpots] = useState(12)
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setSpots(prev => {
+        if (prev <= 3) return prev
+        return Math.random() > 0.85 ? prev - 1 : prev
+      })
+    }, 8000)
+    return () => clearInterval(interval)
+  }, [])
+
+  return (
+    <div className="inline-flex items-center gap-2 bg-red-900/80 border border-red-500/50 rounded-full px-5 py-2.5">
+      <Flame className="w-5 h-5 text-red-400 animate-pulse" />
+      <span className="text-red-100 font-bold text-sm tracking-wide">
+        ONLY {spots} CERTIFICATES LEFT AT THIS PRICE
+      </span>
+    </div>
+  )
+}
+
+export default function LP21LastChance() {
+  const scrollToForm = () => {
+    document.getElementById('signup-form')?.scrollIntoView({ behavior: 'smooth' })
+  }
+
+  return (
+    <div className="min-h-screen" style={{ backgroundColor: DARK_BG, fontFamily: 'var(--font-barlow), sans-serif' }}>
+      <UrgencyBanner variant="combined" />
+
+      {/* ========== HERO ========== */}
+      <section className="pt-20 relative overflow-hidden">
+        {/* Background glow effect */}
+        <div className="absolute inset-0 bg-gradient-to-b from-red-950/40 via-transparent to-transparent pointer-events-none" />
+        <div className="absolute top-40 left-1/2 -translate-x-1/2 w-[600px] h-[600px] bg-red-600/10 rounded-full blur-[120px] pointer-events-none" />
+
+        <div className="relative max-w-5xl mx-auto px-4 py-16 sm:py-24 text-center">
+          {/* Warning badge */}
+          <div className="inline-flex items-center gap-2 bg-red-600/20 border border-red-500/40 rounded-full px-4 py-2 mb-8">
+            <AlertTriangle className="w-4 h-4 text-amber-400 animate-pulse" />
+            <span className="text-amber-300 text-sm font-bold tracking-wider uppercase">
+              Final warning — Price expires soon
+            </span>
+          </div>
+
+          {/* Headline */}
+          <h1
+            className="text-5xl sm:text-7xl lg:text-8xl font-black uppercase tracking-tight mb-6"
+            style={{ fontFamily: 'var(--font-bebas), sans-serif', color: '#FFFFFF' }}
+          >
+            This Price{' '}
+            <span className="text-transparent bg-clip-text bg-gradient-to-r from-red-500 to-amber-500">
+              Dies
+            </span>{' '}
+            When The Timer Hits Zero
+          </h1>
+
+          {/* Giant countdown */}
+          <div className="my-10">
+            <CountdownTimer
+              minutes={30}
+              variant="flip"
+              bgColor="#1A1A1A"
+              textColor="#FFFFFF"
+              accentColor={RED}
+            />
+          </div>
+
+          {/* Live visitor count */}
+          <div className="mb-8">
+            <LiveVisitorCount />
+          </div>
+
+          {/* Spots remaining */}
+          <div className="mb-10">
+            <SpotsRemaining />
+          </div>
+
+          {/* Price display with anchor */}
+          <div className="mb-10">
+            <p className="text-gray-500 text-lg line-through mb-1">Regular price: $59/mo</p>
+            <div className="flex items-center justify-center gap-3">
+              <span className="text-6xl sm:text-7xl font-black text-white">
+                ${PAYMENT_CONFIG.monthlyPrice}
+              </span>
+              <span className="text-2xl text-gray-400">/mo</span>
+            </div>
+            <p className="text-gray-400 text-sm mt-2">
+              {PAYMENT_CONFIG.totalMonths} months = ${PAYMENT_CONFIG.totalPrice} total | Or ${PAYMENT_CONFIG.oneTimePrice} one-time
+            </p>
+          </div>
+
+          {/* CTA 1: Pulsing red button */}
+          <button
+            onClick={scrollToForm}
+            className="relative inline-flex items-center gap-3 text-white font-black text-xl uppercase tracking-wider px-10 py-5 rounded-lg transition-transform hover:scale-105"
+            style={{
+              backgroundColor: RED,
+              fontFamily: 'var(--font-bebas), sans-serif',
+              boxShadow: `0 0 30px ${RED}66, 0 0 60px ${RED}33`,
+              animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+            }}
+          >
+            <Flame className="w-6 h-6" />
+            LOCK IN MY PRICE NOW
+            <Flame className="w-6 h-6" />
+          </button>
+
+          <p className="text-gray-500 text-xs mt-4">
+            30-day money-back guarantee. No questions asked.
+          </p>
+
+          <div className="mt-8 flex items-center justify-center">
+            <ArrowDown className="w-6 h-6 text-gray-600 animate-bounce" />
+          </div>
+        </div>
+      </section>
+
+      {/* ========== WHAT YOU LOSE ========== */}
+      <section className="py-16 border-t border-red-900/30">
+        <div className="max-w-5xl mx-auto px-4">
+          <div className="text-center mb-12">
+            <h2
+              className="text-4xl sm:text-5xl font-black uppercase text-white mb-4"
+              style={{ fontFamily: 'var(--font-bebas), sans-serif' }}
+            >
+              Don&apos;t Lose{' '}
+              <span className="text-red-500">Everything</span> You&apos;re About to Get
+            </h2>
+            <p className="text-gray-400 text-lg max-w-2xl mx-auto">
+              When this timer runs out, you lose access to the lowest price we&apos;ve ever offered
+              on a 5-day all-inclusive Mexico vacation.
+            </p>
+          </div>
+
+          {/* Second countdown */}
+          <div className="flex justify-center mb-12">
+            <CountdownTimer
+              minutes={30}
+              variant="digital"
+              bgColor="#1A1A1A"
+              textColor="#FFFFFF"
+              accentColor={AMBER}
+            />
+          </div>
+
+          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
+            {FEATURES.map((feature) => (
+              <div
+                key={feature.title}
+                className="bg-white/5 border border-white/10 rounded-xl p-6 hover:border-red-500/40 transition-colors"
+              >
+                <feature.icon className="w-8 h-8 text-amber-400 mb-4" />
+                <h3 className="text-white font-bold text-lg mb-2">{feature.title}</h3>
+                <p className="text-gray-400 text-sm">{feature.description}</p>
+              </div>
+            ))}
+          </div>
+
+          {/* CTA 2 */}
+          <div className="text-center mt-12">
+            <button
+              onClick={scrollToForm}
+              className="inline-flex items-center gap-2 text-white font-bold text-lg px-8 py-4 rounded-lg transition-transform hover:scale-105"
+              style={{
+                backgroundColor: RED,
+                boxShadow: `0 0 20px ${RED}44`,
+              }}
+            >
+              <AlertTriangle className="w-5 h-5" />
+              Don&apos;t Lose This Price — Claim Now
+            </button>
+          </div>
+        </div>
+      </section>
+
+      {/* ========== TIKTOK SECTION ========== */}
+      <section className="py-16 border-t border-red-900/30" style={{ backgroundColor: '#111111' }}>
+        <TikTokCarousel
+          title="Real Travelers. Real Vacations. Real Proof."
+          subtitle="These people locked in their price before it was too late."
+          className="[&_h2]:text-white [&_p]:text-gray-400"
+        />
+      </section>
+
+      {/* ========== TESTIMONIALS ========== */}
+      <section className="py-16 border-t border-red-900/30">
+        <div className="max-w-5xl mx-auto px-4">
+          <h2
+            className="text-4xl sm:text-5xl font-black uppercase text-white text-center mb-4"
+            style={{ fontFamily: 'var(--font-bebas), sans-serif' }}
+          >
+            They Almost Missed Out.{' '}
+            <span className="text-amber-400">They Didn&apos;t.</span>
+          </h2>
+          <p className="text-gray-400 text-center mb-12">
+            These travelers locked in the same price you see right now.
+          </p>
+
+          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
+            {TESTIMONIALS.slice(0, 3).map((t, i) => (
+              <TestimonialCard
+                key={i}
+                quote={t.quote}
+                name={t.name}
+                location={t.location}
+                photo={t.photo}
+                variant="dark"
+              />
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ========== THIRD COUNTDOWN STRIP ========== */}
+      <section className="py-8 bg-gradient-to-r from-red-900 via-red-700 to-red-900">
+        <div className="max-w-4xl mx-auto px-4 flex flex-col sm:flex-row items-center justify-center gap-4">
+          <AlertTriangle className="w-6 h-6 text-amber-300 animate-pulse shrink-0" />
+          <p
+            className="text-white font-black text-xl sm:text-2xl uppercase tracking-wide text-center"
+            style={{ fontFamily: 'var(--font-bebas), sans-serif' }}
+          >
+            Time remaining at this price:
+          </p>
+          <CountdownTimer
+            minutes={30}
+            variant="minimal"
+            accentColor={AMBER}
+            className="text-2xl"
+          />
+        </div>
+      </section>
+
+      {/* ========== DESTINATIONS ========== */}
+      <section className="py-16 border-t border-red-900/30">
+        <div className="max-w-4xl mx-auto px-4">
+          <h2
+            className="text-4xl font-black uppercase text-white text-center mb-10"
+            style={{ fontFamily: 'var(--font-bebas), sans-serif' }}
+          >
+            Choose Your <span className="text-amber-400">Paradise</span>
+          </h2>
+          <DestinationCarousel variant="dark" />
+        </div>
+      </section>
+
+      {/* ========== SIGNUP FORM ========== */}
+      <section className="py-20 border-t border-red-900/30" style={{ backgroundColor: '#111111' }}>
+        <div className="max-w-md mx-auto px-4" id="signup-form">
+          {/* Mini countdown above form */}
+          <div className="text-center mb-8">
+            <div className="inline-flex items-center gap-2 bg-red-900/60 border border-red-500/40 rounded-full px-4 py-2 mb-4">
+              <PulsingDot />
+              <span className="text-red-200 text-sm font-bold">
+                This price is only guaranteed for
+              </span>
+              <CountdownTimer minutes={30} variant="minimal" accentColor={AMBER} />
+            </div>
+
+            <h2
+              className="text-3xl sm:text-4xl font-black uppercase text-white mb-2"
+              style={{ fontFamily: 'var(--font-bebas), sans-serif' }}
+            >
+              Lock In Your Price Now
+            </h2>
+            <p className="text-gray-400 text-sm">
+              Don&apos;t lose the ${PAYMENT_CONFIG.monthlyPrice}/mo price.
+              It goes back to{' '}
+              <span className="line-through text-red-400">$59/mo</span> when the timer expires.
+            </p>
+          </div>
+
+          <div className="bg-white/5 border border-white/10 rounded-2xl p-6 sm:p-8">
+            <PayNowForm
+              variant="dark"
+              accentColor={RED}
+              buttonText="LOCK IN MY PRICE NOW"
+            />
+          </div>
+
+          <TrustBadges variant="horizontal" textColor="#6B7280" className="mt-6" />
+        </div>
+      </section>
+
+      {/* ========== FAQ ========== */}
+      <InfluencerBuzz variant="dark" />
+
+      <section className="py-16 border-t border-red-900/30">
+        <div className="max-w-2xl mx-auto px-4">
+          <h2
+            className="text-3xl font-black uppercase text-white text-center mb-8"
+            style={{ fontFamily: 'var(--font-bebas), sans-serif' }}
+          >
+            Questions? We&apos;ve Got Answers.
+          </h2>
+          <FAQAccordion variant="dark" />
+        </div>
+      </section>
+
+      {/* ========== FINAL CTA ========== */}
+      <section className="py-20 bg-gradient-to-b from-red-950/60 to-transparent">
+        <div className="max-w-3xl mx-auto px-4 text-center">
+          <h2
+            className="text-4xl sm:text-5xl font-black uppercase text-white mb-4"
+            style={{ fontFamily: 'var(--font-bebas), sans-serif' }}
+          >
+            Last Chance. <span className="text-red-500">We Mean It.</span>
+          </h2>
+          <p className="text-gray-400 text-lg mb-8">
+            This page will not be available at this price again. Every second you wait
+            is a second closer to losing ${PAYMENT_CONFIG.monthlyPrice}/mo forever.
+          </p>
+
+          <CountdownTimer
+            minutes={30}
+            variant="flip"
+            bgColor="#1A1A1A"
+            textColor="#FFFFFF"
+            accentColor={RED}
+          />
+
+          <div className="mt-10">
+            <button
+              onClick={scrollToForm}
+              className="inline-flex items-center gap-3 text-white font-black text-xl uppercase tracking-wider px-10 py-5 rounded-lg transition-transform hover:scale-105"
+              style={{
+                backgroundColor: RED,
+                fontFamily: 'var(--font-bebas), sans-serif',
+                boxShadow: `0 0 30px ${RED}66, 0 0 60px ${RED}33`,
+                animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+              }}
+            >
+              <Flame className="w-6 h-6" />
+              LOCK IN MY PRICE — LAST CHANCE
+              <Flame className="w-6 h-6" />
+            </button>
+          </div>
+
+          <p className="text-gray-600 text-xs mt-4">
+            5 days / 4 nights all-inclusive Mexico vacation.
+            ${PAYMENT_CONFIG.monthlyPrice}/mo x {PAYMENT_CONFIG.totalMonths} months or ${PAYMENT_CONFIG.oneTimePrice} one-time.
+            30-day money-back guarantee.
+          </p>
+        </div>
+      </section>
+
+      <StickyMobileCTA accentColor={RED} buttonText="LOCK IN PRICE" />
+    </div>
+  )
+}
diff --git a/src/components/lp/pages/LP22TheProof.tsx b/src/components/lp/pages/LP22TheProof.tsx
new file mode 100644
index 0000000..3fa0770
--- /dev/null
+++ b/src/components/lp/pages/LP22TheProof.tsx
@@ -0,0 +1,370 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import {
+  Star,
+  Check,
+  Users,
+  Award,
+  ThumbsUp,
+  ArrowRight,
+  Shield,
+  Clock,
+  MapPin,
+  Heart,
+  TrendingUp,
+  BadgeCheck,
+} from 'lucide-react'
+import PayNowForm from '@/components/lp/shared/PayNowForm'
+import CountdownTimer from '@/components/lp/shared/CountdownTimer'
+import TrustBadges from '@/components/lp/shared/TrustBadges'
+import FAQAccordion from '@/components/lp/shared/FAQAccordion'
+import TestimonialCard from '@/components/lp/shared/TestimonialCard'
+import StickyMobileCTA from '@/components/lp/shared/StickyMobileCTA'
+import UrgencyBanner from '@/components/lp/shared/UrgencyBanner'
+import InfluencerBuzz from '@/components/lp/shared/InfluencerBuzz'
+import TikTokCarousel from '@/components/lp/shared/TikTokCarousel'
+import ComparisonTable from '@/components/lp/shared/ComparisonTable'
+import SocialProofTicker from '@/components/lp/shared/SocialProofTicker'
+import DestinationCarousel from '@/components/lp/shared/DestinationCarousel'
+import { PAYMENT_CONFIG, TESTIMONIALS, FAQ_ITEMS } from '@/app/lp/_config/types'
+
+const GREEN = '#10B981'
+const DARK_TEXT = '#1F2937'
+
+function StatsBar() {
+  const [claimedCount, setClaimedCount] = useState(2847)
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      if (Math.random() > 0.6) {
+        setClaimedCount(prev => prev + 1)
+      }
+    }, 5000)
+    return () => clearInterval(interval)
+  }, [])
+
+  const stats = [
+    { value: claimedCount.toLocaleString(), label: 'Certificates Claimed', icon: Users },
+    { value: '4.8', label: 'Average Rating', icon: Star, suffix: '/5 ★' },
+    { value: '98%', label: 'Would Recommend', icon: ThumbsUp },
+    { value: '4+', label: 'Years in Business', icon: Award },
+  ]
+
+  return (
+    <div className="bg-gray-50 border-y border-gray-200">
+      <div className="max-w-5xl mx-auto px-4 py-8">
+        <div className="grid grid-cols-2 lg:grid-cols-4 gap-6">
+          {stats.map((stat) => (
+            <div key={stat.label} className="text-center">
+              <stat.icon className="w-6 h-6 mx-auto mb-2" style={{ color: GREEN }} />
+              <p className="text-2xl sm:text-3xl font-bold text-gray-900">
+                {stat.value}
+                {stat.suffix && <span className="text-lg text-amber-500">{stat.suffix}</span>}
+              </p>
+              <p className="text-sm text-gray-500 mt-1">{stat.label}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function RecentActivity() {
+  const [activities, setActivities] = useState([
+    { name: 'Sarah M.', location: 'TX', action: 'claimed a certificate', time: '2 min ago' },
+    { name: 'David K.', location: 'FL', action: 'booked Cancun', time: '5 min ago' },
+    { name: 'Jessica R.', location: 'CA', action: 'claimed a certificate', time: '8 min ago' },
+    { name: 'Mike T.', location: 'NY', action: 'chose Riviera Maya', time: '12 min ago' },
+    { name: 'Amanda L.', location: 'IL', action: 'claimed a certificate', time: '15 min ago' },
+  ])
+
+  return (
+    <div className="space-y-3">
+      {activities.map((activity, i) => (
+        <div
+          key={i}
+          className="flex items-center gap-3 bg-green-50 border border-green-100 rounded-lg px-4 py-3"
+        >
+          <span className="w-2 h-2 rounded-full bg-green-400 shrink-0 animate-pulse" />
+          <p className="text-sm text-gray-700">
+            <strong>{activity.name}</strong> from {activity.location} {activity.action}
+          </p>
+          <span className="text-xs text-gray-400 ml-auto shrink-0">{activity.time}</span>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+function VerifiedBadge() {
+  return (
+    <span className="inline-flex items-center gap-1 bg-green-100 text-green-700 px-2 py-0.5 rounded-full text-xs font-semibold">
+      <BadgeCheck className="w-3 h-3" />
+      Verified
+    </span>
+  )
+}
+
+export default function LP22TheProof() {
+  const scrollToForm = () => {
+    document.getElementById('signup-form')?.scrollIntoView({ behavior: 'smooth' })
+  }
+
+  return (
+    <div className="min-h-screen bg-white" style={{ fontFamily: 'var(--font-dm-sans), sans-serif' }}>
+      <UrgencyBanner variant="combined" />
+
+      {/* ========== HERO ========== */}
+      <section className="pt-20">
+        <div className="max-w-5xl mx-auto px-4 py-16 sm:py-20 text-center">
+          {/* Social proof badge */}
+          <div className="inline-flex items-center gap-2 bg-green-50 border border-green-200 rounded-full px-4 py-2 mb-8">
+            <Users className="w-4 h-4" style={{ color: GREEN }} />
+            <span className="text-sm font-semibold text-gray-700">
+              2,847+ happy travelers and counting
+            </span>
+            <VerifiedBadge />
+          </div>
+
+          <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-900 mb-6 leading-tight">
+            Don&apos;t Take Our Word For It —
+            <br />
+            <span style={{ color: GREEN }}>Watch Real Travelers</span>
+          </h1>
+
+          <p className="text-xl text-gray-500 max-w-2xl mx-auto mb-8">
+            Thousands of people just like you have already locked in their Mexico vacation
+            at ${PAYMENT_CONFIG.monthlyPrice}/mo. Here&apos;s what they&apos;re saying.
+          </p>
+
+          {/* Timer strip */}
+          <div className="inline-flex items-center gap-3 bg-gray-100 rounded-full px-5 py-2.5 mb-10">
+            <Clock className="w-4 h-4 text-gray-500" />
+            <span className="text-sm text-gray-600 font-medium">
+              Don&apos;t lose the <span className="line-through text-gray-400">$59/mo</span>{' '}
+              <strong className="text-gray-900">${PAYMENT_CONFIG.monthlyPrice}/mo</strong> price — expires in
+            </span>
+            <CountdownTimer minutes={30} variant="minimal" accentColor={GREEN} />
+          </div>
+
+          {/* CTA 1 */}
+          <div className="block">
+            <button
+              onClick={scrollToForm}
+              className="inline-flex items-center gap-2 text-white font-bold text-lg px-8 py-4 rounded-xl transition-transform hover:scale-105"
+              style={{ backgroundColor: GREEN }}
+            >
+              Join 2,847 Happy Travelers
+              <ArrowRight className="w-5 h-5" />
+            </button>
+          </div>
+        </div>
+      </section>
+
+      {/* ========== STATS BAR ========== */}
+      <StatsBar />
+
+      {/* ========== TIKTOK HERO SECTION ========== */}
+      <section className="py-16 bg-white">
+        <TikTokCarousel
+          title="Watch Real Travelers in Paradise"
+          subtitle="These aren't actors. These are real people on their Mexico Paradise vacation."
+        />
+      </section>
+
+      {/* ========== TESTIMONIAL WALL ========== */}
+      <section className="py-16 bg-gray-50">
+        <div className="max-w-5xl mx-auto px-4">
+          <div className="text-center mb-12">
+            <h2 className="text-3xl sm:text-4xl font-bold text-gray-900 mb-3">
+              Real Reviews From Real Travelers
+            </h2>
+            <p className="text-gray-500 text-lg">
+              Every single review is from a verified certificate holder
+            </p>
+            <div className="flex items-center justify-center gap-1 mt-4">
+              {Array.from({ length: 5 }).map((_, i) => (
+                <Star key={i} className="w-6 h-6 fill-amber-400 text-amber-400" />
+              ))}
+              <span className="text-gray-600 font-semibold ml-2">4.8 out of 5</span>
+              <span className="text-gray-400 ml-1">(2,847 reviews)</span>
+            </div>
+          </div>
+
+          {/* All 6 testimonials */}
+          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
+            {TESTIMONIALS.map((t, i) => (
+              <div key={i} className="relative">
+                <TestimonialCard
+                  quote={t.quote}
+                  name={t.name}
+                  location={t.location}
+                  photo={t.photo}
+                />
+                <div className="absolute top-4 right-4">
+                  <VerifiedBadge />
+                </div>
+              </div>
+            ))}
+          </div>
+
+          {/* CTA 2 */}
+          <div className="text-center mt-12">
+            <button
+              onClick={scrollToForm}
+              className="inline-flex items-center gap-2 text-white font-bold text-lg px-8 py-4 rounded-xl transition-transform hover:scale-105"
+              style={{ backgroundColor: GREEN }}
+            >
+              Don&apos;t Lose This Price — Join Them Now
+              <ArrowRight className="w-5 h-5" />
+            </button>
+          </div>
+        </div>
+      </section>
+
+      {/* ========== RECENT ACTIVITY ========== */}
+      <section className="py-16">
+        <div className="max-w-2xl mx-auto px-4">
+          <div className="text-center mb-8">
+            <h2 className="text-2xl font-bold text-gray-900 mb-2">
+              Happening Right Now
+            </h2>
+            <p className="text-gray-500">
+              Real people claiming their certificates as you read this
+            </p>
+          </div>
+          <RecentActivity />
+          <p className="text-center text-sm text-gray-400 mt-4">
+            <TrendingUp className="w-4 h-4 inline mr-1" />
+            23 people claimed this in the last hour
+          </p>
+        </div>
+      </section>
+
+      {/* ========== COUNTDOWN STRIP ========== */}
+      <section className="py-6" style={{ backgroundColor: GREEN }}>
+        <div className="max-w-4xl mx-auto px-4 flex flex-col sm:flex-row items-center justify-center gap-4">
+          <p className="text-white font-bold text-lg text-center">
+            Don&apos;t lose the ${PAYMENT_CONFIG.monthlyPrice}/mo price — only available for:
+          </p>
+          <CountdownTimer minutes={30} variant="minimal" accentColor="#FFFFFF" className="text-xl" />
+        </div>
+      </section>
+
+      {/* ========== COMPARISON TABLE ========== */}
+      <section className="py-16 bg-gray-50">
+        <div className="max-w-3xl mx-auto px-4">
+          <div className="text-center mb-10">
+            <h2 className="text-3xl font-bold text-gray-900 mb-3">
+              See How We Compare
+            </h2>
+            <p className="text-gray-500">
+              The same vacation that costs $2,500+ on Expedia — for just ${PAYMENT_CONFIG.oneTimePrice}
+            </p>
+          </div>
+          <ComparisonTable accentColor={GREEN} />
+        </div>
+      </section>
+
+      {/* ========== DESTINATIONS ========== */}
+      <section className="py-16">
+        <div className="max-w-4xl mx-auto px-4">
+          <h2 className="text-3xl font-bold text-gray-900 text-center mb-3">
+            4 Stunning Destinations
+          </h2>
+          <p className="text-gray-500 text-center mb-10">
+            Choose from Mexico&apos;s most beautiful resort locations
+          </p>
+          <DestinationCarousel />
+        </div>
+      </section>
+
+      {/* ========== SIGNUP FORM ========== */}
+      <section className="py-20 bg-gray-50">
+        <div className="max-w-md mx-auto px-4" id="signup-form">
+          <div className="text-center mb-8">
+            <div className="inline-flex items-center gap-2 bg-green-50 border border-green-200 rounded-full px-4 py-2 mb-4">
+              <span className="w-2 h-2 rounded-full bg-green-400 animate-pulse" />
+              <span className="text-sm font-medium text-gray-700">
+                Only available for <CountdownTimer minutes={30} variant="minimal" accentColor={GREEN} />
+              </span>
+            </div>
+
+            <h2 className="text-3xl font-bold text-gray-900 mb-2">
+              Join 2,847 Happy Travelers
+            </h2>
+            <p className="text-gray-500">
+              Don&apos;t lose the{' '}
+              <span className="line-through text-gray-400">$59/mo</span>{' '}
+              <strong className="text-gray-900">${PAYMENT_CONFIG.monthlyPrice}/mo</strong> price.
+              It won&apos;t last.
+            </p>
+          </div>
+
+          <div className="bg-white border border-gray-200 rounded-2xl p-6 sm:p-8 shadow-sm">
+            <PayNowForm
+              accentColor={GREEN}
+              buttonText="Join 2,847 Happy Travelers"
+            />
+          </div>
+
+          <TrustBadges variant="horizontal" className="mt-6" />
+        </div>
+      </section>
+
+      <InfluencerBuzz />
+
+      {/* ========== FAQ ========== */}
+      <section className="py-16">
+        <div className="max-w-2xl mx-auto px-4">
+          <h2 className="text-3xl font-bold text-gray-900 text-center mb-8">
+            Frequently Asked Questions
+          </h2>
+          <FAQAccordion />
+        </div>
+      </section>
+
+      {/* ========== FINAL CTA ========== */}
+      <section className="py-20 bg-gray-900 text-white">
+        <div className="max-w-3xl mx-auto px-4 text-center">
+          <h2 className="text-3xl sm:text-4xl font-bold mb-4">
+            2,847 People Can&apos;t Be Wrong
+          </h2>
+          <p className="text-gray-400 text-lg mb-6">
+            Don&apos;t lose the ${PAYMENT_CONFIG.monthlyPrice}/mo price. Once the timer hits zero,
+            it goes back to $59/mo.
+          </p>
+
+          <div className="flex justify-center mb-8">
+            <CountdownTimer
+              minutes={30}
+              variant="digital"
+              bgColor="#1A1A1A"
+              textColor="#FFFFFF"
+              accentColor={GREEN}
+            />
+          </div>
+
+          <button
+            onClick={scrollToForm}
+            className="inline-flex items-center gap-2 text-white font-bold text-lg px-8 py-4 rounded-xl transition-transform hover:scale-105"
+            style={{ backgroundColor: GREEN }}
+          >
+            Claim My Certificate Now
+            <ArrowRight className="w-5 h-5" />
+          </button>
+
+          <p className="text-gray-500 text-xs mt-4">
+            5 days / 4 nights all-inclusive. ${PAYMENT_CONFIG.monthlyPrice}/mo x{' '}
+            {PAYMENT_CONFIG.totalMonths} months. 30-day money-back guarantee.
+          </p>
+        </div>
+      </section>
+
+      <StickyMobileCTA accentColor={GREEN} buttonText="Join 2,847 Travelers" />
+      <SocialProofTicker bgColor={GREEN} />
+    </div>
+  )
+}
diff --git a/src/components/lp/pages/LP23VIPAccess.tsx b/src/components/lp/pages/LP23VIPAccess.tsx
new file mode 100644
index 0000000..e672c3a
--- /dev/null
+++ b/src/components/lp/pages/LP23VIPAccess.tsx
@@ -0,0 +1,462 @@
+'use client'
+
+import { useState, useEffect, useMemo } from 'react'
+import {
+  Crown,
+  Lock,
+  Shield,
+  Star,
+  Clock,
+  Check,
+  ArrowRight,
+  Gem,
+  MapPin,
+  Gift,
+  Zap,
+  KeyRound,
+  Sparkles,
+} from 'lucide-react'
+import PayNowForm from '@/components/lp/shared/PayNowForm'
+import CountdownTimer from '@/components/lp/shared/CountdownTimer'
+import TrustBadges from '@/components/lp/shared/TrustBadges'
+import FAQAccordion from '@/components/lp/shared/FAQAccordion'
+import TestimonialCard from '@/components/lp/shared/TestimonialCard'
+import StickyMobileCTA from '@/components/lp/shared/StickyMobileCTA'
+import UrgencyBanner from '@/components/lp/shared/UrgencyBanner'
+import InfluencerBuzz from '@/components/lp/shared/InfluencerBuzz'
+import DestinationCarousel from '@/components/lp/shared/DestinationCarousel'
+import { PAYMENT_CONFIG, TESTIMONIALS, FAQ_ITEMS } from '@/app/lp/_config/types'
+
+const BLACK = '#0A0A0F'
+const GOLD = '#D4AF37'
+const CREAM = '#F5F0E8'
+const DARK_SURFACE = '#14141A'
+
+const VIP_PERKS = [
+  {
+    icon: Crown,
+    title: 'Priority Resort Selection',
+    description: 'VIP certificate holders get first pick of available dates and rooms',
+  },
+  {
+    icon: Gem,
+    title: 'Premium Room Upgrade',
+    description: 'Complimentary upgrade to ocean view when available',
+  },
+  {
+    icon: Gift,
+    title: 'Welcome Package',
+    description: 'Exclusive amenities basket delivered to your room on arrival',
+  },
+  {
+    icon: Star,
+    title: '4-5 Star All-Inclusive',
+    description: 'Every meal, drink, and activity included for 5 days',
+  },
+  {
+    icon: MapPin,
+    title: '4 Luxury Destinations',
+    description: 'Cancun, Cabo, Riviera Maya, or Puerto Vallarta',
+  },
+  {
+    icon: Shield,
+    title: 'VIP Money-Back Guarantee',
+    description: '30-day full refund with no questions asked',
+  },
+]
+
+function InvitationCode() {
+  const code = useMemo(() => {
+    const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789'
+    const segments = []
+    for (let s = 0; s < 3; s++) {
+      let segment = ''
+      for (let i = 0; i < 4; i++) {
+        segment += chars[Math.floor(Math.random() * chars.length)]
+      }
+      segments.push(segment)
+    }
+    return segments.join('-')
+  }, [])
+
+  return (
+    <div className="inline-flex items-center gap-3 border-2 rounded-lg px-6 py-3" style={{ borderColor: GOLD }}>
+      <KeyRound className="w-5 h-5" style={{ color: GOLD }} />
+      <div>
+        <p className="text-xs uppercase tracking-widest" style={{ color: GOLD }}>
+          Your Invitation Code
+        </p>
+        <p className="text-xl font-mono font-bold tracking-[0.2em]" style={{ color: CREAM }}>
+          {code}
+        </p>
+      </div>
+    </div>
+  )
+}
+
+function GoldDivider() {
+  return (
+    <div className="flex items-center gap-4 max-w-xs mx-auto my-2">
+      <div className="flex-1 h-px" style={{ backgroundColor: `${GOLD}33` }} />
+      <Sparkles className="w-4 h-4" style={{ color: GOLD }} />
+      <div className="flex-1 h-px" style={{ backgroundColor: `${GOLD}33` }} />
+    </div>
+  )
+}
+
+function ExclusivityCounter() {
+  const [remaining, setRemaining] = useState(8)
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setRemaining(prev => {
+        if (prev <= 2) return prev
+        return Math.random() > 0.9 ? prev - 1 : prev
+      })
+    }, 12000)
+    return () => clearInterval(interval)
+  }, [])
+
+  return (
+    <div className="flex items-center gap-2">
+      <span className="relative flex h-2 w-2">
+        <span
+          className="animate-ping absolute inline-flex h-full w-full rounded-full opacity-75"
+          style={{ backgroundColor: GOLD }}
+        />
+        <span
+          className="relative inline-flex rounded-full h-2 w-2"
+          style={{ backgroundColor: GOLD }}
+        />
+      </span>
+      <span className="text-sm" style={{ color: `${CREAM}99` }}>
+        Only <strong style={{ color: GOLD }}>{remaining}</strong> VIP certificates remaining at this price
+      </span>
+    </div>
+  )
+}
+
+export default function LP23VIPAccess() {
+  const scrollToForm = () => {
+    document.getElementById('signup-form')?.scrollIntoView({ behavior: 'smooth' })
+  }
+
+  return (
+    <div className="min-h-screen" style={{ backgroundColor: BLACK }}>
+      <UrgencyBanner variant="combined" />
+
+      {/* ========== HERO ========== */}
+      <section className="pt-20 relative overflow-hidden">
+        {/* Gold ambient glow */}
+        <div
+          className="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[400px] rounded-full blur-[150px] pointer-events-none"
+          style={{ backgroundColor: `${GOLD}0D` }}
+        />
+        {/* Gold border lines */}
+        <div className="absolute top-24 left-0 right-0 h-px" style={{ backgroundColor: `${GOLD}1A` }} />
+
+        <div className="relative max-w-4xl mx-auto px-4 py-16 sm:py-24 text-center">
+          {/* VIP badge */}
+          <div className="inline-flex items-center gap-2 border rounded-full px-5 py-2 mb-8" style={{ borderColor: GOLD, backgroundColor: `${GOLD}0D` }}>
+            <Crown className="w-4 h-4" style={{ color: GOLD }} />
+            <span className="text-sm font-semibold tracking-widest uppercase" style={{ color: GOLD }}>
+              Private Invitation
+            </span>
+          </div>
+
+          <h1
+            className="text-4xl sm:text-5xl lg:text-6xl font-bold mb-6 leading-tight"
+            style={{ fontFamily: 'var(--font-playfair), serif', color: CREAM }}
+          >
+            You&apos;ve Been{' '}
+            <span className="italic" style={{ color: GOLD }}>
+              Personally Selected
+            </span>
+            <br />
+            For VIP Access
+          </h1>
+
+          <p className="text-lg max-w-2xl mx-auto mb-8" style={{ color: `${CREAM}88`, fontFamily: 'var(--font-source-sans), sans-serif' }}>
+            This private invitation grants you exclusive access to our lowest-ever pricing on a
+            5-day, 4-night all-inclusive Mexico vacation at a luxury resort.
+          </p>
+
+          <GoldDivider />
+
+          {/* Invitation Code */}
+          <div className="my-8">
+            <InvitationCode />
+          </div>
+
+          {/* Timer */}
+          <div className="mb-8">
+            <p className="text-sm mb-3" style={{ color: `${CREAM}66` }}>
+              This private link expires in:
+            </p>
+            <CountdownTimer
+              minutes={30}
+              variant="flip"
+              bgColor={DARK_SURFACE}
+              textColor={CREAM}
+              accentColor={GOLD}
+            />
+          </div>
+
+          <ExclusivityCounter />
+
+          {/* Price */}
+          <div className="my-10">
+            <p className="text-sm line-through mb-1" style={{ color: `${CREAM}44` }}>
+              Standard rate: $59/mo
+            </p>
+            <div className="flex items-center justify-center gap-2">
+              <span className="text-5xl sm:text-6xl font-bold" style={{ color: GOLD, fontFamily: 'var(--font-playfair), serif' }}>
+                ${PAYMENT_CONFIG.monthlyPrice}
+              </span>
+              <span className="text-xl" style={{ color: `${CREAM}66` }}>/mo</span>
+            </div>
+            <p className="text-sm mt-2" style={{ color: `${CREAM}55` }}>
+              {PAYMENT_CONFIG.totalMonths} months = ${PAYMENT_CONFIG.totalPrice} total | Or ${PAYMENT_CONFIG.oneTimePrice} one-time
+            </p>
+          </div>
+
+          {/* CTA 1 */}
+          <button
+            onClick={scrollToForm}
+            className="inline-flex items-center gap-2 font-semibold text-lg px-8 py-4 rounded-lg transition-all hover:scale-105"
+            style={{
+              backgroundColor: GOLD,
+              color: BLACK,
+              fontFamily: 'var(--font-source-sans), sans-serif',
+              boxShadow: `0 0 30px ${GOLD}33`,
+            }}
+          >
+            <Crown className="w-5 h-5" />
+            Accept My VIP Invitation
+            <ArrowRight className="w-5 h-5" />
+          </button>
+
+          <p className="text-xs mt-4" style={{ color: `${CREAM}44` }}>
+            Invitation valid only while the timer is running
+          </p>
+        </div>
+      </section>
+
+      {/* ========== VIP PERKS ========== */}
+      <section className="py-16" style={{ borderTop: `1px solid ${GOLD}1A` }}>
+        <div className="max-w-5xl mx-auto px-4">
+          <div className="text-center mb-12">
+            <h2
+              className="text-3xl sm:text-4xl font-bold mb-4"
+              style={{ fontFamily: 'var(--font-playfair), serif', color: CREAM }}
+            >
+              Your VIP Certificate Includes
+            </h2>
+            <p style={{ color: `${CREAM}66`, fontFamily: 'var(--font-source-sans), sans-serif' }}>
+              Don&apos;t lose these exclusive benefits when the timer runs out
+            </p>
+          </div>
+
+          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
+            {VIP_PERKS.map((perk) => (
+              <div
+                key={perk.title}
+                className="rounded-xl p-6 border transition-colors hover:border-[#D4AF37]/40"
+                style={{
+                  backgroundColor: DARK_SURFACE,
+                  borderColor: `${GOLD}15`,
+                }}
+              >
+                <perk.icon className="w-8 h-8 mb-4" style={{ color: GOLD }} />
+                <h3 className="font-bold text-lg mb-2" style={{ color: CREAM, fontFamily: 'var(--font-playfair), serif' }}>
+                  {perk.title}
+                </h3>
+                <p className="text-sm" style={{ color: `${CREAM}66`, fontFamily: 'var(--font-source-sans), sans-serif' }}>
+                  {perk.description}
+                </p>
+              </div>
+            ))}
+          </div>
+
+          {/* CTA 2 */}
+          <div className="text-center mt-12">
+            <button
+              onClick={scrollToForm}
+              className="inline-flex items-center gap-2 font-semibold px-7 py-3.5 rounded-lg transition-all hover:scale-105 border"
+              style={{
+                borderColor: GOLD,
+                color: GOLD,
+                fontFamily: 'var(--font-source-sans), sans-serif',
+              }}
+            >
+              <Lock className="w-4 h-4" />
+              Don&apos;t Lose These VIP Benefits
+            </button>
+          </div>
+        </div>
+      </section>
+
+      {/* ========== DESTINATIONS ========== */}
+      <section className="py-16" style={{ borderTop: `1px solid ${GOLD}1A` }}>
+        <div className="max-w-4xl mx-auto px-4">
+          <h2
+            className="text-3xl font-bold text-center mb-3"
+            style={{ fontFamily: 'var(--font-playfair), serif', color: CREAM }}
+          >
+            Select Your <span style={{ color: GOLD }}>Destination</span>
+          </h2>
+          <p className="text-center mb-10" style={{ color: `${CREAM}55`, fontFamily: 'var(--font-source-sans), sans-serif' }}>
+            Four of Mexico&apos;s most exclusive resort destinations
+          </p>
+          <DestinationCarousel variant="dark" />
+        </div>
+      </section>
+
+      {/* ========== GOLD COUNTDOWN STRIP ========== */}
+      <section
+        className="py-6"
+        style={{ background: `linear-gradient(90deg, ${GOLD}22, ${GOLD}44, ${GOLD}22)`, borderTop: `1px solid ${GOLD}33`, borderBottom: `1px solid ${GOLD}33` }}
+      >
+        <div className="max-w-4xl mx-auto px-4 flex flex-col sm:flex-row items-center justify-center gap-4">
+          <Crown className="w-5 h-5" style={{ color: BLACK }} />
+          <p className="font-bold text-center" style={{ color: BLACK, fontFamily: 'var(--font-playfair), serif' }}>
+            Your private invitation expires in:
+          </p>
+          <CountdownTimer minutes={30} variant="minimal" accentColor={BLACK} className="text-lg font-bold" />
+        </div>
+      </section>
+
+      {/* ========== TESTIMONIALS ========== */}
+      <section className="py-16" style={{ borderTop: `1px solid ${GOLD}1A` }}>
+        <div className="max-w-5xl mx-auto px-4">
+          <h2
+            className="text-3xl font-bold text-center mb-3"
+            style={{ fontFamily: 'var(--font-playfair), serif', color: CREAM }}
+          >
+            What Our VIP Travelers Say
+          </h2>
+          <GoldDivider />
+          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6 mt-10">
+            {TESTIMONIALS.slice(0, 3).map((t, i) => (
+              <TestimonialCard
+                key={i}
+                quote={t.quote}
+                name={t.name}
+                location={t.location}
+                photo={t.photo}
+                variant="dark"
+              />
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ========== SIGNUP FORM ========== */}
+      <section className="py-20" style={{ backgroundColor: DARK_SURFACE, borderTop: `1px solid ${GOLD}1A` }}>
+        <div className="max-w-md mx-auto px-4" id="signup-form">
+          <div className="text-center mb-8">
+            <Crown className="w-10 h-10 mx-auto mb-4" style={{ color: GOLD }} />
+            <h2
+              className="text-3xl font-bold mb-2"
+              style={{ fontFamily: 'var(--font-playfair), serif', color: CREAM }}
+            >
+              Accept Your VIP Invitation
+            </h2>
+            <p className="text-sm mb-4" style={{ color: `${CREAM}66`, fontFamily: 'var(--font-source-sans), sans-serif' }}>
+              Don&apos;t lose the exclusive{' '}
+              <span className="line-through" style={{ color: `${CREAM}44` }}>$59/mo</span>{' '}
+              <strong style={{ color: GOLD }}>${PAYMENT_CONFIG.monthlyPrice}/mo</strong> VIP rate.
+            </p>
+            <div className="inline-flex items-center gap-2 rounded-full px-4 py-1.5" style={{ backgroundColor: `${GOLD}15`, border: `1px solid ${GOLD}33` }}>
+              <Clock className="w-3.5 h-3.5" style={{ color: GOLD }} />
+              <span className="text-sm" style={{ color: GOLD }}>
+                Invitation expires in <CountdownTimer minutes={30} variant="minimal" accentColor={GOLD} />
+              </span>
+            </div>
+          </div>
+
+          <div
+            className="rounded-2xl p-6 sm:p-8 border"
+            style={{ backgroundColor: `${BLACK}`, borderColor: `${GOLD}33` }}
+          >
+            <PayNowForm
+              variant="dark"
+              accentColor={GOLD}
+              buttonText="Accept My VIP Invitation"
+            />
+          </div>
+
+          <TrustBadges variant="horizontal" textColor={`${CREAM}55`} className="mt-6" />
+        </div>
+      </section>
+
+      {/* ========== FAQ ========== */}
+      <InfluencerBuzz />
+
+      <section className="py-16" style={{ borderTop: `1px solid ${GOLD}1A` }}>
+        <div className="max-w-2xl mx-auto px-4">
+          <h2
+            className="text-3xl font-bold text-center mb-8"
+            style={{ fontFamily: 'var(--font-playfair), serif', color: CREAM }}
+          >
+            Questions About Your Invitation
+          </h2>
+          <FAQAccordion variant="dark" />
+        </div>
+      </section>
+
+      {/* ========== FINAL CTA ========== */}
+      <section className="py-20 relative overflow-hidden">
+        <div
+          className="absolute inset-0 pointer-events-none"
+          style={{ background: `radial-gradient(ellipse at center, ${GOLD}08 0%, transparent 70%)` }}
+        />
+        <div className="relative max-w-3xl mx-auto px-4 text-center">
+          <GoldDivider />
+          <h2
+            className="text-3xl sm:text-4xl font-bold mt-6 mb-4"
+            style={{ fontFamily: 'var(--font-playfair), serif', color: CREAM }}
+          >
+            This Invitation Won&apos;t Wait
+          </h2>
+          <p className="text-lg mb-6" style={{ color: `${CREAM}66`, fontFamily: 'var(--font-source-sans), sans-serif' }}>
+            Once the timer expires, this VIP pricing is permanently gone.
+            Don&apos;t lose your spot.
+          </p>
+
+          <CountdownTimer
+            minutes={30}
+            variant="flip"
+            bgColor={DARK_SURFACE}
+            textColor={CREAM}
+            accentColor={GOLD}
+          />
+
+          <div className="mt-10">
+            <button
+              onClick={scrollToForm}
+              className="inline-flex items-center gap-2 font-semibold text-lg px-10 py-5 rounded-lg transition-all hover:scale-105"
+              style={{
+                backgroundColor: GOLD,
+                color: BLACK,
+                fontFamily: 'var(--font-source-sans), sans-serif',
+                boxShadow: `0 0 40px ${GOLD}44`,
+              }}
+            >
+              <Crown className="w-5 h-5" />
+              Accept My VIP Invitation Now
+            </button>
+          </div>
+
+          <p className="text-xs mt-6" style={{ color: `${CREAM}33` }}>
+            5 days / 4 nights all-inclusive at a luxury resort.
+            ${PAYMENT_CONFIG.monthlyPrice}/mo x {PAYMENT_CONFIG.totalMonths} months or ${PAYMENT_CONFIG.oneTimePrice} one-time.
+            30-day money-back guarantee.
+          </p>
+        </div>
+      </section>
+
+      <StickyMobileCTA accentColor={GOLD} buttonText="Accept VIP Invite" />
+    </div>
+  )
+}
diff --git a/src/components/lp/pages/LP24OneTap.tsx b/src/components/lp/pages/LP24OneTap.tsx
new file mode 100644
index 0000000..01ca991
--- /dev/null
+++ b/src/components/lp/pages/LP24OneTap.tsx
@@ -0,0 +1,393 @@
+'use client'
+
+import { useState, useEffect, useRef } from 'react'
+import {
+  ArrowRight,
+  Check,
+  Shield,
+  Star,
+  Clock,
+  Lock,
+  ChevronDown,
+  Zap,
+  MapPin,
+  BadgeCheck,
+  Sparkles,
+  X,
+} from 'lucide-react'
+import PayNowForm from '@/components/lp/shared/PayNowForm'
+import CountdownTimer from '@/components/lp/shared/CountdownTimer'
+import TrustBadges from '@/components/lp/shared/TrustBadges'
+import FAQAccordion from '@/components/lp/shared/FAQAccordion'
+import TestimonialCard from '@/components/lp/shared/TestimonialCard'
+import StickyMobileCTA from '@/components/lp/shared/StickyMobileCTA'
+import UrgencyBanner from '@/components/lp/shared/UrgencyBanner'
+import InfluencerBuzz from '@/components/lp/shared/InfluencerBuzz'
+import { PAYMENT_CONFIG, TESTIMONIALS, FAQ_ITEMS, DESTINATIONS } from '@/app/lp/_config/types'
+
+const BLUE = '#2563EB'
+
+const QUICK_FACTS = [
+  { icon: MapPin, text: 'Cancun, Cabo, Riviera Maya, or Puerto Vallarta' },
+  { icon: Clock, text: '5 days / 4 nights all-inclusive' },
+  { icon: Star, text: '4-5 star luxury resorts' },
+  { icon: Shield, text: '30-day money-back guarantee' },
+]
+
+function SlideUpForm({ isOpen, onClose }: { isOpen: boolean; onClose: () => void }) {
+  const formRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden'
+    } else {
+      document.body.style.overflow = ''
+    }
+    return () => {
+      document.body.style.overflow = ''
+    }
+  }, [isOpen])
+
+  if (!isOpen) return null
+
+  return (
+    <div className="fixed inset-0 z-50">
+      {/* Backdrop */}
+      <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" onClick={onClose} />
+
+      {/* Slide-up panel */}
+      <div
+        ref={formRef}
+        className="absolute bottom-0 left-0 right-0 bg-white rounded-t-3xl shadow-2xl max-h-[90vh] overflow-y-auto animate-in slide-in-from-bottom duration-300"
+      >
+        <div className="sticky top-0 bg-white rounded-t-3xl border-b border-gray-100 px-6 pt-4 pb-3 flex items-center justify-between z-10">
+          <div>
+            <p className="font-bold text-gray-900">Lock in your price</p>
+            <p className="text-sm text-gray-500">Takes 60 seconds. Seriously.</p>
+          </div>
+          <button onClick={onClose} className="p-2 rounded-full hover:bg-gray-100">
+            <X className="w-5 h-5 text-gray-400" />
+          </button>
+        </div>
+
+        <div className="px-6 py-6" id="signup-form">
+          {/* Timer */}
+          <div className="flex items-center justify-center gap-2 bg-blue-50 rounded-lg px-4 py-2.5 mb-6">
+            <Clock className="w-4 h-4 text-blue-600" />
+            <span className="text-sm text-blue-700 font-medium">
+              <span className="line-through text-blue-400">$59/mo</span>{' '}
+              <strong>${PAYMENT_CONFIG.monthlyPrice}/mo</strong> expires in
+            </span>
+            <CountdownTimer minutes={30} variant="minimal" accentColor={BLUE} />
+          </div>
+
+          <PayNowForm
+            accentColor={BLUE}
+            buttonText="Get My Vacation — $39/mo"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function SpeedBadge() {
+  return (
+    <div className="inline-flex items-center gap-1.5 bg-blue-50 border border-blue-100 rounded-full px-3 py-1">
+      <Zap className="w-3.5 h-3.5 text-blue-600" />
+      <span className="text-xs font-semibold text-blue-700">60-second signup</span>
+    </div>
+  )
+}
+
+function MinimalTestimonial({ quote, name }: { quote: string; name: string }) {
+  return (
+    <div className="bg-gray-50 rounded-2xl p-5">
+      <div className="flex gap-0.5 mb-2">
+        {Array.from({ length: 5 }).map((_, i) => (
+          <Star key={i} className="w-3.5 h-3.5 fill-amber-400 text-amber-400" />
+        ))}
+      </div>
+      <p className="text-sm text-gray-600 leading-relaxed mb-2">&ldquo;{quote}&rdquo;</p>
+      <p className="text-xs text-gray-400 font-medium">{name}</p>
+    </div>
+  )
+}
+
+function DestinationPill({ name, image }: { name: string; image: string }) {
+  return (
+    <div className="flex items-center gap-3 bg-white border border-gray-100 rounded-2xl p-3 shadow-sm">
+      <img src={image} alt={name} className="w-14 h-14 rounded-xl object-cover" />
+      <div>
+        <p className="font-semibold text-gray-900 text-sm">{name}</p>
+        <p className="text-xs text-gray-400">All-inclusive resort</p>
+      </div>
+    </div>
+  )
+}
+
+export default function LP24OneTap() {
+  const [formOpen, setFormOpen] = useState(false)
+  const [claimedCount] = useState(() => Math.floor(Math.random() * 15) + 18)
+
+  const scrollToForm = () => {
+    setFormOpen(true)
+  }
+
+  return (
+    <div className="min-h-screen bg-white" style={{ fontFamily: 'var(--font-manrope), sans-serif' }}>
+      <UrgencyBanner variant="combined" />
+
+      {/* ========== HERO — Mobile-first, minimal ========== */}
+      <section className="pt-20">
+        <div className="max-w-lg mx-auto px-4 py-12 sm:py-16">
+          {/* Speed badge */}
+          <div className="text-center mb-6">
+            <SpeedBadge />
+          </div>
+
+          {/* Beach image */}
+          <div className="relative rounded-3xl overflow-hidden mb-8 aspect-[4/3]">
+            <img
+              src="/images/cdn/photo-1510097467424-192c0d76b5b6.jpg"
+              alt="Mexico beach paradise"
+              className="w-full h-full object-cover"
+            />
+            <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
+            <div className="absolute bottom-0 left-0 right-0 p-6">
+              <p className="text-white/70 text-sm line-through">$59/mo</p>
+              <div className="flex items-baseline gap-1.5">
+                <span className="text-5xl font-bold text-white">
+                  ${PAYMENT_CONFIG.monthlyPrice}
+                </span>
+                <span className="text-xl text-white/70">/mo</span>
+              </div>
+              <p className="text-white/60 text-sm mt-1">
+                5 days / 4 nights all-inclusive Mexico vacation
+              </p>
+            </div>
+          </div>
+
+          {/* Timer */}
+          <div className="flex items-center justify-center gap-2 mb-6">
+            <Clock className="w-4 h-4 text-gray-400" />
+            <span className="text-sm text-gray-500">
+              Don&apos;t lose this price — expires in
+            </span>
+            <CountdownTimer minutes={30} variant="minimal" accentColor={BLUE} />
+          </div>
+
+          {/* ONE BIG BUTTON — CTA 1 */}
+          <button
+            onClick={scrollToForm}
+            className="w-full text-white font-bold text-lg py-5 rounded-2xl transition-transform hover:scale-[1.02] active:scale-[0.98] flex items-center justify-center gap-2"
+            style={{
+              backgroundColor: BLUE,
+              boxShadow: `0 4px 20px ${BLUE}44`,
+            }}
+          >
+            Get My Vacation Certificate
+            <ArrowRight className="w-5 h-5" />
+          </button>
+
+          <p className="text-center text-xs text-gray-400 mt-3">
+            Takes 60 seconds. Seriously.
+          </p>
+
+          {/* Scarcity */}
+          <div className="text-center mt-4">
+            <p className="text-sm text-gray-500">
+              <span className="inline-flex items-center gap-1">
+                <span className="w-2 h-2 rounded-full bg-green-400 animate-pulse" />
+                <strong className="text-gray-700">{claimedCount} people</strong> claimed this in the last hour
+              </span>
+            </p>
+          </div>
+
+          {/* Trust badges — compact */}
+          <TrustBadges variant="compact" className="mt-6" />
+        </div>
+      </section>
+
+      {/* ========== QUICK FACTS ========== */}
+      <section className="py-10 bg-gray-50">
+        <div className="max-w-lg mx-auto px-4">
+          <h2 className="text-xl font-bold text-gray-900 text-center mb-6">
+            What you get
+          </h2>
+          <div className="space-y-3">
+            {QUICK_FACTS.map((fact) => (
+              <div key={fact.text} className="flex items-center gap-3 bg-white rounded-xl p-4 border border-gray-100">
+                <div className="w-10 h-10 rounded-full bg-blue-50 flex items-center justify-center shrink-0">
+                  <fact.icon className="w-5 h-5" style={{ color: BLUE }} />
+                </div>
+                <p className="text-sm text-gray-700 font-medium">{fact.text}</p>
+              </div>
+            ))}
+          </div>
+
+          {/* CTA 2 */}
+          <button
+            onClick={scrollToForm}
+            className="w-full mt-6 text-white font-bold text-base py-4 rounded-xl flex items-center justify-center gap-2"
+            style={{ backgroundColor: BLUE }}
+          >
+            Lock In ${PAYMENT_CONFIG.monthlyPrice}/mo Now
+            <ArrowRight className="w-4 h-4" />
+          </button>
+        </div>
+      </section>
+
+      {/* ========== DESTINATIONS ========== */}
+      <section className="py-10">
+        <div className="max-w-lg mx-auto px-4">
+          <h2 className="text-xl font-bold text-gray-900 text-center mb-6">
+            Choose your destination
+          </h2>
+          <div className="grid grid-cols-2 gap-3">
+            {DESTINATIONS.map((d) => (
+              <DestinationPill key={d.name} name={d.name} image={d.images[0]} />
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ========== MINI COUNTDOWN ========== */}
+      <section className="py-4 bg-blue-50">
+        <div className="max-w-lg mx-auto px-4 flex items-center justify-center gap-3">
+          <span className="text-sm text-blue-700 font-medium">
+            <span className="line-through text-blue-400">$59/mo</span> ${PAYMENT_CONFIG.monthlyPrice}/mo
+            price expires in
+          </span>
+          <CountdownTimer minutes={30} variant="minimal" accentColor={BLUE} />
+        </div>
+      </section>
+
+      {/* ========== TESTIMONIALS ========== */}
+      <section className="py-10">
+        <div className="max-w-lg mx-auto px-4">
+          <h2 className="text-xl font-bold text-gray-900 text-center mb-6">
+            Real travelers, real reviews
+          </h2>
+          <div className="space-y-3">
+            {TESTIMONIALS.slice(0, 3).map((t, i) => (
+              <MinimalTestimonial key={i} quote={t.quote} name={t.name} />
+            ))}
+          </div>
+
+          <div className="text-center mt-4">
+            <p className="text-sm text-gray-500">
+              <Star className="w-4 h-4 inline fill-amber-400 text-amber-400 mr-1" />
+              4.8/5 from 2,847 reviews
+            </p>
+          </div>
+        </div>
+      </section>
+
+      {/* ========== PRICE BREAKDOWN ========== */}
+      <section className="py-10 bg-gray-50">
+        <div className="max-w-lg mx-auto px-4">
+          <h2 className="text-xl font-bold text-gray-900 text-center mb-6">
+            Two ways to pay
+          </h2>
+
+          <div className="grid grid-cols-2 gap-3">
+            {/* Monthly */}
+            <div className="bg-white border-2 rounded-2xl p-5 text-center" style={{ borderColor: BLUE }}>
+              <p className="text-xs uppercase tracking-wider text-blue-600 font-bold mb-2">Most popular</p>
+              <p className="text-sm text-gray-400 line-through">$59/mo</p>
+              <p className="text-3xl font-bold text-gray-900">
+                ${PAYMENT_CONFIG.monthlyPrice}<span className="text-sm font-normal text-gray-400">/mo</span>
+              </p>
+              <p className="text-xs text-gray-400 mt-1">x {PAYMENT_CONFIG.totalMonths} months</p>
+            </div>
+
+            {/* One-time */}
+            <div className="bg-white border border-gray-200 rounded-2xl p-5 text-center">
+              <p className="text-xs uppercase tracking-wider text-gray-400 font-bold mb-2">Save more</p>
+              <p className="text-sm text-gray-400 line-through">$590</p>
+              <p className="text-3xl font-bold text-gray-900">
+                ${PAYMENT_CONFIG.oneTimePrice}
+              </p>
+              <p className="text-xs text-gray-400 mt-1">one payment</p>
+            </div>
+          </div>
+
+          {/* CTA 3 */}
+          <button
+            onClick={scrollToForm}
+            className="w-full mt-6 text-white font-bold text-base py-4 rounded-xl flex items-center justify-center gap-2"
+            style={{
+              backgroundColor: BLUE,
+              boxShadow: `0 4px 15px ${BLUE}33`,
+            }}
+          >
+            <Zap className="w-4 h-4" />
+            Get Started in 60 Seconds
+          </button>
+
+          <div className="flex items-center justify-center gap-3 mt-3 text-xs text-gray-400">
+            <span className="flex items-center gap-1"><Lock className="w-3 h-3" /> SSL Encrypted</span>
+            <span className="flex items-center gap-1"><Shield className="w-3 h-3" /> 30-Day Guarantee</span>
+          </div>
+        </div>
+      </section>
+
+      <InfluencerBuzz />
+
+      {/* ========== FAQ ========== */}
+      <section className="py-10">
+        <div className="max-w-lg mx-auto px-4">
+          <h2 className="text-xl font-bold text-gray-900 text-center mb-6">
+            Quick answers
+          </h2>
+          <FAQAccordion />
+        </div>
+      </section>
+
+      {/* ========== FINAL CTA ========== */}
+      <section className="py-16 bg-gray-900">
+        <div className="max-w-lg mx-auto px-4 text-center">
+          <h2 className="text-2xl font-bold text-white mb-3">
+            Don&apos;t lose this price
+          </h2>
+          <p className="text-gray-400 mb-6">
+            ${PAYMENT_CONFIG.monthlyPrice}/mo for a 5-day all-inclusive Mexico vacation.
+            This price won&apos;t last.
+          </p>
+
+          <div className="flex justify-center mb-6">
+            <CountdownTimer
+              minutes={30}
+              variant="digital"
+              bgColor="#1F2937"
+              textColor="#FFFFFF"
+              accentColor={BLUE}
+            />
+          </div>
+
+          <button
+            onClick={scrollToForm}
+            className="w-full max-w-sm mx-auto text-white font-bold text-lg py-5 rounded-2xl flex items-center justify-center gap-2"
+            style={{
+              backgroundColor: BLUE,
+              boxShadow: `0 4px 20px ${BLUE}44`,
+            }}
+          >
+            Get My Vacation Certificate
+            <ArrowRight className="w-5 h-5" />
+          </button>
+
+          <p className="text-gray-600 text-xs mt-4">
+            Takes 60 seconds. 30-day money-back guarantee.
+          </p>
+        </div>
+      </section>
+
+      {/* Slide-up form panel */}
+      <SlideUpForm isOpen={formOpen} onClose={() => setFormOpen(false)} />
+
+      <StickyMobileCTA accentColor={BLUE} buttonText="Get My Vacation" />
+    </div>
+  )
+}
diff --git a/src/components/lp/pages/LP25FOMOFeed.tsx b/src/components/lp/pages/LP25FOMOFeed.tsx
new file mode 100644
index 0000000..f2ab83c
--- /dev/null
+++ b/src/components/lp/pages/LP25FOMOFeed.tsx
@@ -0,0 +1,504 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import {
+  ArrowRight,
+  Clock,
+  Users,
+  Star,
+  Check,
+  Flame,
+  Heart,
+  MapPin,
+  Shield,
+  Zap,
+  TrendingUp,
+  Eye,
+  Sparkles,
+} from 'lucide-react'
+import { motion, AnimatePresence } from 'framer-motion'
+import PayNowForm from '@/components/lp/shared/PayNowForm'
+import CountdownTimer from '@/components/lp/shared/CountdownTimer'
+import TrustBadges from '@/components/lp/shared/TrustBadges'
+import FAQAccordion from '@/components/lp/shared/FAQAccordion'
+import TestimonialCard from '@/components/lp/shared/TestimonialCard'
+import StickyMobileCTA from '@/components/lp/shared/StickyMobileCTA'
+import UrgencyBanner from '@/components/lp/shared/UrgencyBanner'
+import InfluencerBuzz from '@/components/lp/shared/InfluencerBuzz'
+import TikTokCarousel from '@/components/lp/shared/TikTokCarousel'
+import SocialProofTicker from '@/components/lp/shared/SocialProofTicker'
+import DestinationCarousel from '@/components/lp/shared/DestinationCarousel'
+import { PAYMENT_CONFIG, TESTIMONIALS, FAQ_ITEMS, DESTINATIONS } from '@/app/lp/_config/types'
+
+const GRADIENT_FROM = '#EC4899' // pink-500
+const GRADIENT_VIA = '#F97316' // orange-500
+const GRADIENT_TO = '#EAB308' // yellow-500
+
+const FEED_NAMES = [
+  'Maria T. from Houston, TX',
+  'James & Linda from Miami, FL',
+  'Sarah K. from San Diego, CA',
+  'David M. from Brooklyn, NY',
+  'Jennifer W. from Chicago, IL',
+  'Chris P. from Phoenix, AZ',
+  'Amanda R. from Denver, CO',
+  'Robert J. from Atlanta, GA',
+  'Nicole S. from Seattle, WA',
+  'Brian L. from Dallas, TX',
+  'Emily H. from Nashville, TN',
+  'Kevin D. from Boston, MA',
+  'Rachel G. from Portland, OR',
+  'Mike & Julie from Austin, TX',
+  'Lisa F. from Charlotte, NC',
+]
+
+const FEED_ACTIONS = [
+  'just claimed their vacation certificate',
+  'locked in the $29/mo price',
+  'is heading to Cancun!',
+  'booked Cabo San Lucas',
+  'chose Riviera Maya',
+  'signed up 2 minutes ago',
+  'just started their payment plan',
+  'is going to Puerto Vallarta!',
+]
+
+function LiveActivityFeed() {
+  const [entries, setEntries] = useState<Array<{ name: string; action: string; id: number }>>([])
+  const [nextId, setNextId] = useState(0)
+
+  useEffect(() => {
+    // Seed initial entries
+    const initial = Array.from({ length: 5 }, (_, i) => ({
+      name: FEED_NAMES[i % FEED_NAMES.length],
+      action: FEED_ACTIONS[i % FEED_ACTIONS.length],
+      id: i,
+    }))
+    setEntries(initial)
+    setNextId(5)
+
+    const interval = setInterval(() => {
+      setNextId(prev => {
+        const newId = prev + 1
+        const newEntry = {
+          name: FEED_NAMES[newId % FEED_NAMES.length],
+          action: FEED_ACTIONS[newId % FEED_ACTIONS.length],
+          id: newId,
+        }
+        setEntries(prevEntries => [newEntry, ...prevEntries.slice(0, 6)])
+        return newId
+      })
+    }, 4000)
+
+    return () => clearInterval(interval)
+  }, [])
+
+  return (
+    <div className="space-y-2 max-h-[400px] overflow-hidden relative">
+      <AnimatePresence initial={false}>
+        {entries.map((entry) => (
+          <motion.div
+            key={entry.id}
+            initial={{ opacity: 0, y: -20, height: 0 }}
+            animate={{ opacity: 1, y: 0, height: 'auto' }}
+            exit={{ opacity: 0, height: 0 }}
+            transition={{ duration: 0.3 }}
+            className="flex items-center gap-3 bg-white/90 backdrop-blur-sm rounded-xl px-4 py-3 shadow-sm border border-white/50"
+          >
+            <span className="w-2 h-2 rounded-full bg-green-400 shrink-0 animate-pulse" />
+            <div className="flex-1 min-w-0">
+              <p className="text-sm text-gray-800 truncate">
+                <strong>{entry.name}</strong>
+              </p>
+              <p className="text-xs text-gray-500">{entry.action}</p>
+            </div>
+            <span className="text-[10px] text-gray-400 shrink-0">just now</span>
+          </motion.div>
+        ))}
+      </AnimatePresence>
+      {/* Fade overlay at bottom */}
+      <div className="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-orange-50 to-transparent pointer-events-none" />
+    </div>
+  )
+}
+
+function GradientButton({ onClick, children, className = '' }: { onClick: () => void; children: React.ReactNode; className?: string }) {
+  return (
+    <button
+      onClick={onClick}
+      className={`inline-flex items-center justify-center gap-2 font-bold text-white px-8 py-4 rounded-xl transition-transform hover:scale-105 active:scale-[0.98] ${className}`}
+      style={{
+        background: `linear-gradient(135deg, ${GRADIENT_FROM}, ${GRADIENT_VIA}, ${GRADIENT_TO})`,
+        boxShadow: '0 4px 20px rgba(249, 115, 22, 0.35)',
+      }}
+    >
+      {children}
+    </button>
+  )
+}
+
+function FOMOCounter() {
+  const [viewers, setViewers] = useState(89)
+  const [claimed, setClaimed] = useState(34)
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setViewers(prev => prev + (Math.random() > 0.5 ? 1 : Math.random() > 0.3 ? 0 : -1))
+      if (Math.random() > 0.7) setClaimed(prev => prev + 1)
+    }, 3000)
+    return () => clearInterval(interval)
+  }, [])
+
+  return (
+    <div className="flex flex-wrap items-center justify-center gap-4 sm:gap-6">
+      <div className="flex items-center gap-2 bg-white/80 backdrop-blur-sm rounded-full px-4 py-2 shadow-sm">
+        <Eye className="w-4 h-4 text-pink-500" />
+        <span className="text-sm font-medium text-gray-700">
+          <strong className="text-gray-900">{viewers}</strong> viewing now
+        </span>
+      </div>
+      <div className="flex items-center gap-2 bg-white/80 backdrop-blur-sm rounded-full px-4 py-2 shadow-sm">
+        <TrendingUp className="w-4 h-4 text-orange-500" />
+        <span className="text-sm font-medium text-gray-700">
+          <strong className="text-gray-900">{claimed}</strong> claimed today
+        </span>
+      </div>
+      <div className="flex items-center gap-2 bg-white/80 backdrop-blur-sm rounded-full px-4 py-2 shadow-sm">
+        <Flame className="w-4 h-4 text-red-500" />
+        <span className="text-sm font-medium text-gray-700">
+          Only <strong className="text-red-600">9</strong> left at this price
+        </span>
+      </div>
+    </div>
+  )
+}
+
+function DestinationCard({ name, image, tagline }: { name: string; image: string; tagline: string }) {
+  return (
+    <div className="relative rounded-2xl overflow-hidden aspect-[3/4] group">
+      <img src={image} alt={name} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
+      <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent" />
+      <div className="absolute bottom-0 left-0 right-0 p-5">
+        <h3 className="text-xl font-bold text-white">{name}</h3>
+        <p className="text-white/70 text-sm">{tagline}</p>
+        <div className="flex items-center gap-1 mt-2">
+          <Heart className="w-4 h-4 text-pink-400 fill-pink-400" />
+          <span className="text-xs text-white/60">{Math.floor(Math.random() * 500) + 800} saves</span>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default function LP25FOMOFeed() {
+  const scrollToForm = () => {
+    document.getElementById('signup-form')?.scrollIntoView({ behavior: 'smooth' })
+  }
+
+  return (
+    <div className="min-h-screen bg-orange-50" style={{ fontFamily: 'var(--font-dm-sans), sans-serif' }}>
+      <UrgencyBanner variant="combined" />
+
+      {/* ========== HERO ========== */}
+      <section className="pt-20 relative overflow-hidden">
+        {/* Gradient background */}
+        <div
+          className="absolute inset-0 opacity-10 pointer-events-none"
+          style={{
+            background: `linear-gradient(135deg, ${GRADIENT_FROM}44, ${GRADIENT_VIA}44, ${GRADIENT_TO}44)`,
+          }}
+        />
+
+        <div className="relative max-w-5xl mx-auto px-4 py-16 sm:py-20 text-center">
+          {/* Trending badge */}
+          <div
+            className="inline-flex items-center gap-2 rounded-full px-4 py-2 mb-8 text-white text-sm font-bold"
+            style={{ background: `linear-gradient(135deg, ${GRADIENT_FROM}, ${GRADIENT_VIA})` }}
+          >
+            <TrendingUp className="w-4 h-4" />
+            Trending — 2,847 certificates claimed this month
+          </div>
+
+          <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-900 mb-6 leading-tight">
+            Everyone&apos;s Going to Mexico.
+            <br />
+            <span
+              className="text-transparent bg-clip-text"
+              style={{ backgroundImage: `linear-gradient(135deg, ${GRADIENT_FROM}, ${GRADIENT_VIA}, ${GRADIENT_TO})` }}
+            >
+              Here&apos;s Why.
+            </span>
+          </h1>
+
+          <p className="text-xl text-gray-500 max-w-2xl mx-auto mb-8">
+            5 days, 4 nights, all-inclusive at a luxury resort — for just{' '}
+            <span className="line-through text-gray-400">$59/mo</span>{' '}
+            <strong className="text-gray-900">${PAYMENT_CONFIG.monthlyPrice}/mo</strong>.
+            Don&apos;t be the last to know.
+          </p>
+
+          {/* Timer */}
+          <div className="inline-flex items-center gap-3 bg-white/80 backdrop-blur-sm rounded-full px-5 py-2.5 shadow-sm mb-8">
+            <Clock className="w-4 h-4 text-gray-500" />
+            <span className="text-sm text-gray-600 font-medium">
+              Don&apos;t lose this price — expires in
+            </span>
+            <CountdownTimer minutes={30} variant="minimal" accentColor={GRADIENT_VIA} />
+          </div>
+
+          {/* FOMO counters */}
+          <div className="mb-10">
+            <FOMOCounter />
+          </div>
+
+          {/* CTA 1 */}
+          <GradientButton onClick={scrollToForm} className="text-lg">
+            Don&apos;t Miss Out — Claim Yours Now
+            <ArrowRight className="w-5 h-5" />
+          </GradientButton>
+
+          <p className="text-xs text-gray-400 mt-4">
+            30-day money-back guarantee. Cancel anytime.
+          </p>
+        </div>
+      </section>
+
+      {/* ========== TIKTOK SECTION ========== */}
+      <section className="py-16 bg-white">
+        <TikTokCarousel
+          title="See Why Everyone's Talking About It"
+          subtitle="Real travelers sharing their Mexico Paradise experience"
+        />
+      </section>
+
+      {/* ========== LIVE ACTIVITY FEED ========== */}
+      <section className="py-16 bg-orange-50">
+        <div className="max-w-xl mx-auto px-4">
+          <div className="text-center mb-8">
+            <div
+              className="inline-flex items-center gap-2 rounded-full px-3 py-1 text-white text-xs font-bold mb-4"
+              style={{ background: `linear-gradient(135deg, ${GRADIENT_FROM}, ${GRADIENT_VIA})` }}
+            >
+              <span className="w-2 h-2 rounded-full bg-white animate-pulse" />
+              LIVE
+            </div>
+            <h2 className="text-3xl font-bold text-gray-900 mb-2">
+              Happening Right Now
+            </h2>
+            <p className="text-gray-500">
+              Watch as people claim their certificates in real time
+            </p>
+          </div>
+
+          <LiveActivityFeed />
+
+          <div className="text-center mt-8">
+            <GradientButton onClick={scrollToForm}>
+              Don&apos;t Be the Only One Missing Out
+              <ArrowRight className="w-5 h-5" />
+            </GradientButton>
+          </div>
+        </div>
+      </section>
+
+      {/* ========== GRADIENT COUNTDOWN STRIP ========== */}
+      <section
+        className="py-5"
+        style={{ background: `linear-gradient(135deg, ${GRADIENT_FROM}, ${GRADIENT_VIA}, ${GRADIENT_TO})` }}
+      >
+        <div className="max-w-4xl mx-auto px-4 flex flex-col sm:flex-row items-center justify-center gap-3">
+          <p className="text-white font-bold text-center">
+            <span className="line-through opacity-70">$59/mo</span> ${PAYMENT_CONFIG.monthlyPrice}/mo pricing ends in:
+          </p>
+          <CountdownTimer minutes={30} variant="minimal" accentColor="#FFFFFF" className="text-lg font-bold" />
+        </div>
+      </section>
+
+      {/* ========== DESTINATIONS ========== */}
+      <section className="py-16 bg-white">
+        <div className="max-w-5xl mx-auto px-4">
+          <div className="text-center mb-10">
+            <h2 className="text-3xl font-bold text-gray-900 mb-2">
+              Where Will You Go?
+            </h2>
+            <p className="text-gray-500">Four stunning destinations. One unbeatable price.</p>
+          </div>
+          <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+            {DESTINATIONS.map((d) => (
+              <DestinationCard key={d.name} name={d.name} image={d.images[0]} tagline={d.tagline} />
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ========== TESTIMONIALS ========== */}
+      <section className="py-16 bg-orange-50">
+        <div className="max-w-5xl mx-auto px-4">
+          <div className="text-center mb-10">
+            <h2 className="text-3xl font-bold text-gray-900 mb-2">
+              They Went. They Loved It.
+            </h2>
+            <p className="text-gray-500">
+              Real reviews from travelers who didn&apos;t miss out
+            </p>
+            <div className="flex items-center justify-center gap-1 mt-3">
+              {Array.from({ length: 5 }).map((_, i) => (
+                <Star key={i} className="w-5 h-5 fill-amber-400 text-amber-400" />
+              ))}
+              <span className="text-gray-600 text-sm font-medium ml-2">4.8/5 (2,847 reviews)</span>
+            </div>
+          </div>
+
+          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
+            {TESTIMONIALS.slice(0, 6).map((t, i) => (
+              <TestimonialCard
+                key={i}
+                quote={t.quote}
+                name={t.name}
+                location={t.location}
+                photo={t.photo}
+              />
+            ))}
+          </div>
+
+          {/* CTA 3 */}
+          <div className="text-center mt-10">
+            <GradientButton onClick={scrollToForm}>
+              Join 2,847 Happy Travelers
+              <ArrowRight className="w-5 h-5" />
+            </GradientButton>
+          </div>
+        </div>
+      </section>
+
+      {/* ========== WHAT'S INCLUDED ========== */}
+      <section className="py-16 bg-white">
+        <div className="max-w-3xl mx-auto px-4">
+          <h2 className="text-3xl font-bold text-gray-900 text-center mb-10">
+            Everything&apos;s Included
+          </h2>
+          <div className="grid sm:grid-cols-2 gap-4">
+            {[
+              '5 days / 4 nights accommodation',
+              'All meals — breakfast, lunch, dinner',
+              'Unlimited drinks (alcoholic & non)',
+              'Resort pools, beach, & amenities',
+              '4-5 star luxury resort',
+              'Your choice of 4 destinations',
+              'Flexible dates within 18 months',
+              '30-day money-back guarantee',
+            ].map((item) => (
+              <div key={item} className="flex items-center gap-3 py-3">
+                <div
+                  className="w-6 h-6 rounded-full flex items-center justify-center shrink-0"
+                  style={{ background: `linear-gradient(135deg, ${GRADIENT_FROM}, ${GRADIENT_VIA})` }}
+                >
+                  <Check className="w-3.5 h-3.5 text-white" />
+                </div>
+                <span className="text-gray-700">{item}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ========== SIGNUP FORM ========== */}
+      <section className="py-20" style={{ background: `linear-gradient(180deg, #FFF7ED, #FFF1E0)` }}>
+        <div className="max-w-md mx-auto px-4" id="signup-form">
+          <div className="text-center mb-8">
+            <div
+              className="inline-flex items-center gap-2 rounded-full px-4 py-2 text-white text-sm font-bold mb-4"
+              style={{ background: `linear-gradient(135deg, ${GRADIENT_FROM}, ${GRADIENT_VIA})` }}
+            >
+              <Flame className="w-4 h-4" />
+              Don&apos;t miss out
+            </div>
+
+            <h2 className="text-3xl font-bold text-gray-900 mb-2">
+              Everyone Else Is Going.
+              <br />
+              <span
+                className="text-transparent bg-clip-text"
+                style={{ backgroundImage: `linear-gradient(135deg, ${GRADIENT_FROM}, ${GRADIENT_VIA}, ${GRADIENT_TO})` }}
+              >
+                Are You?
+              </span>
+            </h2>
+
+            <p className="text-gray-500">
+              <span className="line-through text-gray-400">$59/mo</span>{' '}
+              <strong className="text-gray-900">${PAYMENT_CONFIG.monthlyPrice}/mo</strong>{' '}
+              — only available for{' '}
+              <CountdownTimer minutes={30} variant="minimal" accentColor={GRADIENT_VIA} />
+            </p>
+          </div>
+
+          <div className="bg-white rounded-2xl p-6 sm:p-8 shadow-lg border border-orange-100">
+            <PayNowForm
+              accentColor={GRADIENT_VIA}
+              buttonText="Don't Be the Only One Missing Out"
+            />
+          </div>
+
+          <TrustBadges variant="horizontal" className="mt-6" />
+        </div>
+      </section>
+
+      <InfluencerBuzz />
+
+      {/* ========== FAQ ========== */}
+      <section className="py-16 bg-white">
+        <div className="max-w-2xl mx-auto px-4">
+          <h2 className="text-3xl font-bold text-gray-900 text-center mb-8">
+            Got Questions?
+          </h2>
+          <FAQAccordion />
+        </div>
+      </section>
+
+      {/* ========== FINAL CTA ========== */}
+      <section
+        className="py-20 text-white"
+        style={{ background: `linear-gradient(135deg, ${GRADIENT_FROM}, ${GRADIENT_VIA}, ${GRADIENT_TO})` }}
+      >
+        <div className="max-w-3xl mx-auto px-4 text-center">
+          <h2 className="text-3xl sm:text-4xl font-bold mb-4">
+            Don&apos;t Be the Only One Missing Out
+          </h2>
+          <p className="text-white/80 text-lg mb-6">
+            2,847 people have already claimed their Mexico vacation certificate.
+            The ${PAYMENT_CONFIG.monthlyPrice}/mo price disappears when the timer hits zero.
+          </p>
+
+          <div className="flex justify-center mb-8">
+            <CountdownTimer
+              minutes={30}
+              variant="digital"
+              bgColor="rgba(0,0,0,0.3)"
+              textColor="#FFFFFF"
+              accentColor="#FFFFFF"
+            />
+          </div>
+
+          <button
+            onClick={scrollToForm}
+            className="inline-flex items-center gap-2 bg-white font-bold text-lg px-8 py-4 rounded-xl transition-transform hover:scale-105"
+            style={{ color: GRADIENT_VIA }}
+          >
+            Claim My Certificate Now
+            <ArrowRight className="w-5 h-5" />
+          </button>
+
+          <p className="text-white/50 text-xs mt-4">
+            5 days / 4 nights all-inclusive. ${PAYMENT_CONFIG.monthlyPrice}/mo x{' '}
+            {PAYMENT_CONFIG.totalMonths} months or ${PAYMENT_CONFIG.oneTimePrice} one-time.
+            30-day money-back guarantee.
+          </p>
+        </div>
+      </section>
+
+      <StickyMobileCTA accentColor={GRADIENT_VIA} buttonText="Don't Miss Out" />
+      <SocialProofTicker bgColor={GRADIENT_VIA} />
+    </div>
+  )
+}
diff --git a/src/components/lp/pages/LP26PriceLock.tsx b/src/components/lp/pages/LP26PriceLock.tsx
new file mode 100644
index 0000000..cca1e09
--- /dev/null
+++ b/src/components/lp/pages/LP26PriceLock.tsx
@@ -0,0 +1,500 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import {
+  Lock, Shield, ShieldCheck, Clock, CheckCircle2,
+  ArrowRight, Zap, Users, Star, KeyRound,
+  LockKeyhole, BadgeCheck, Gift, TrendingUp,
+} from 'lucide-react'
+import PayNowForm from '@/components/lp/shared/PayNowForm'
+import CountdownTimer from '@/components/lp/shared/CountdownTimer'
+import TrustBadges from '@/components/lp/shared/TrustBadges'
+import StickyMobileCTA from '@/components/lp/shared/StickyMobileCTA'
+import TestimonialCard from '@/components/lp/shared/TestimonialCard'
+import TikTokCarousel from '@/components/lp/shared/TikTokCarousel'
+import FAQAccordion from '@/components/lp/shared/FAQAccordion'
+import UrgencyBanner from '@/components/lp/shared/UrgencyBanner'
+import InfluencerBuzz from '@/components/lp/shared/InfluencerBuzz'
+import { PAYMENT_CONFIG, TESTIMONIALS, FAQ_ITEMS } from '@/app/lp/_config/types'
+
+const NAVY = '#1A237E'
+const GOLD = '#FFD700'
+const DARK_NAVY = '#0D1347'
+
+const steps = [
+  {
+    icon: LockKeyhole,
+    title: 'Lock Your Price',
+    description: 'Secure today\'s $29/mo rate before the timer expires. Your price is frozen the moment you sign up.',
+  },
+  {
+    icon: KeyRound,
+    title: 'Choose Your Dates',
+    description: 'Pick any available dates within 18 months. Cancun, Cabo, Riviera Maya, or Puerto Vallarta.',
+  },
+  {
+    icon: Gift,
+    title: 'Enjoy Paradise',
+    description: '5 days and 4 nights all-inclusive. Meals, drinks, resort amenities — everything covered.',
+  },
+]
+
+const securityFeatures = [
+  { icon: Shield, text: '256-bit SSL encryption on all transactions' },
+  { icon: ShieldCheck, text: '30-day money-back guarantee — no questions asked' },
+  { icon: BadgeCheck, text: 'BBB-accredited business with 4.8-star rating' },
+  { icon: Lock, text: 'Price locked for 10 months — zero increases, ever' },
+]
+
+export default function LP26PriceLock() {
+  const [claimedPercent, setClaimedPercent] = useState(84)
+  const [viewerCount] = useState(() => Math.floor(Math.random() * 18) + 12)
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setClaimedPercent(prev => {
+        if (prev >= 96) return prev
+        return prev + (Math.random() > 0.6 ? 1 : 0)
+      })
+    }, 8000)
+    return () => clearInterval(interval)
+  }, [])
+
+  const scrollToForm = () => {
+    document.getElementById('signup-form')?.scrollIntoView({ behavior: 'smooth' })
+  }
+
+  return (
+    <div className="min-h-screen" style={{ fontFamily: 'var(--font-work-sans), sans-serif' }}>
+      <UrgencyBanner variant="combined" />
+      <StickyMobileCTA accentColor={GOLD} buttonText="Lock In My Price" />
+
+      {/* ===== HERO ===== */}
+      <section
+        className="relative pt-20 pb-20 px-4 overflow-hidden"
+        style={{ background: `linear-gradient(135deg, ${DARK_NAVY} 0%, ${NAVY} 50%, #283593 100%)` }}
+      >
+        {/* Vault pattern overlay */}
+        <div className="absolute inset-0 opacity-5">
+          <div
+            className="w-full h-full"
+            style={{
+              backgroundImage: `repeating-linear-gradient(0deg, transparent, transparent 40px, rgba(255,215,0,0.1) 40px, rgba(255,215,0,0.1) 41px), repeating-linear-gradient(90deg, transparent, transparent 40px, rgba(255,215,0,0.1) 40px, rgba(255,215,0,0.1) 41px)`,
+            }}
+          />
+        </div>
+
+        <div className="max-w-5xl mx-auto text-center relative z-10">
+          {/* Viewers badge */}
+          <div className="inline-flex items-center gap-2 bg-white/10 backdrop-blur-sm border border-white/20 rounded-full px-4 py-2 mb-6">
+            <Users className="w-4 h-4 text-yellow-300" />
+            <span className="text-white/90 text-sm font-medium">
+              {viewerCount} people viewing this offer right now
+            </span>
+          </div>
+
+          {/* Vault lock icon */}
+          <div className="relative inline-block mb-8">
+            <div
+              className="w-28 h-28 rounded-full flex items-center justify-center mx-auto border-4"
+              style={{
+                borderColor: GOLD,
+                background: `linear-gradient(135deg, ${DARK_NAVY}, ${NAVY})`,
+                boxShadow: `0 0 40px rgba(255,215,0,0.3)`,
+              }}
+            >
+              <Lock className="w-14 h-14" style={{ color: GOLD }} />
+            </div>
+            <div
+              className="absolute -top-2 -right-2 w-10 h-10 rounded-full flex items-center justify-center text-xs font-bold"
+              style={{ backgroundColor: GOLD, color: NAVY }}
+            >
+              $29
+            </div>
+          </div>
+
+          <h1
+            className="text-4xl sm:text-5xl lg:text-6xl font-bold mb-6 tracking-tight"
+            style={{ fontFamily: 'var(--font-space-grotesk), sans-serif', color: '#FFFFFF' }}
+          >
+            PRICE LOCK{' '}
+            <span style={{ color: GOLD }}>GUARANTEE</span>
+          </h1>
+
+          <p className="text-xl sm:text-2xl text-white/90 mb-4 max-w-3xl mx-auto">
+            <span style={{ color: GOLD }} className="font-bold">$29/mo</span> locked for the next{' '}
+            <span className="font-bold">30 minutes</span>
+          </p>
+
+          <p className="text-white/60 text-lg mb-8 max-w-2xl mx-auto">
+            5 days &amp; 4 nights all-inclusive Mexico vacation.{' '}
+            <span className="line-through text-white/40">$59/mo</span>{' '}
+            <span style={{ color: GOLD }} className="font-bold">$29/mo</span> — save $200
+          </p>
+
+          {/* Countdown block */}
+          <div
+            className="inline-block rounded-2xl p-6 mb-8 border"
+            style={{
+              backgroundColor: 'rgba(255,255,255,0.05)',
+              borderColor: 'rgba(255,215,0,0.3)',
+            }}
+          >
+            <p className="text-white/70 text-sm font-medium mb-3 uppercase tracking-wider">
+              After the timer expires, price increases to $59/mo
+            </p>
+            <CountdownTimer minutes={30} variant="flip" bgColor={DARK_NAVY} textColor={GOLD} accentColor={GOLD} />
+          </div>
+
+          <div className="mb-8">
+            <button
+              onClick={scrollToForm}
+              className="inline-flex items-center gap-3 px-10 py-5 rounded-xl text-lg font-bold transition-all hover:scale-105 hover:shadow-2xl"
+              style={{
+                backgroundColor: GOLD,
+                color: NAVY,
+                boxShadow: `0 4px 30px rgba(255,215,0,0.4)`,
+              }}
+            >
+              <Lock className="w-5 h-5" />
+              Lock In My Price — $29/mo
+              <ArrowRight className="w-5 h-5" />
+            </button>
+          </div>
+
+          <TrustBadges variant="compact" textColor="rgba(255,255,255,0.6)" />
+        </div>
+      </section>
+
+      {/* ===== PROGRESS BAR — CERTIFICATES CLAIMED ===== */}
+      <section className="py-8 px-4" style={{ backgroundColor: DARK_NAVY }}>
+        <div className="max-w-3xl mx-auto">
+          <div className="flex items-center justify-between mb-3">
+            <span className="text-white/80 text-sm font-medium flex items-center gap-2">
+              <Zap className="w-4 h-4" style={{ color: GOLD }} />
+              Certificates Claimed at This Price
+            </span>
+            <span className="text-sm font-bold" style={{ color: GOLD }}>
+              {claimedPercent}% claimed
+            </span>
+          </div>
+          <div className="w-full h-4 rounded-full bg-white/10 overflow-hidden">
+            <div
+              className="h-full rounded-full transition-all duration-1000 ease-out relative"
+              style={{
+                width: `${claimedPercent}%`,
+                background: `linear-gradient(90deg, ${GOLD}, #FFA000)`,
+              }}
+            >
+              <div className="absolute inset-0 bg-white/20 animate-pulse" />
+            </div>
+          </div>
+          <p className="text-white/50 text-xs mt-2 text-center">
+            Only {100 - claimedPercent}% of discounted certificates remain — don&apos;t lose yours
+          </p>
+        </div>
+      </section>
+
+      {/* ===== LOSS AVERSION SECTION ===== */}
+      <section className="py-16 px-4 bg-white">
+        <div className="max-w-4xl mx-auto text-center">
+          <h2
+            className="text-3xl sm:text-4xl font-bold mb-4"
+            style={{ fontFamily: 'var(--font-space-grotesk), sans-serif', color: NAVY }}
+          >
+            Don&apos;t Lose This Price
+          </h2>
+          <p className="text-gray-500 text-lg mb-12 max-w-2xl mx-auto">
+            Every minute that passes, someone else claims a certificate at this rate.
+            Once they&apos;re gone, the price goes back to{' '}
+            <span className="line-through">$59/mo</span>.
+          </p>
+
+          <div className="grid md:grid-cols-2 gap-8 text-left">
+            {/* What you lose */}
+            <div className="bg-red-50 border border-red-200 rounded-2xl p-8">
+              <h3 className="text-xl font-bold text-red-700 mb-4 flex items-center gap-2">
+                <Clock className="w-6 h-6" />
+                If You Wait...
+              </h3>
+              <ul className="space-y-3">
+                {[
+                  'Price jumps to $59/mo ($200 more total)',
+                  'Your spot may be taken by someone else',
+                  'No guarantee this promotion will return',
+                  'You\'ll regret not acting when you had the chance',
+                ].map((item, i) => (
+                  <li key={i} className="flex items-start gap-3 text-red-700">
+                    <span className="text-red-400 mt-0.5">✕</span>
+                    <span>{item}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+
+            {/* What you keep */}
+            <div
+              className="rounded-2xl p-8 border-2"
+              style={{ borderColor: GOLD, backgroundColor: '#FFFDE7' }}
+            >
+              <h3 className="text-xl font-bold mb-4 flex items-center gap-2" style={{ color: NAVY }}>
+                <Lock className="w-6 h-6" style={{ color: GOLD }} />
+                If You Lock In Now...
+              </h3>
+              <ul className="space-y-3">
+                {[
+                  '$29/mo locked — price NEVER increases',
+                  '5 days/4 nights all-inclusive Mexico vacation',
+                  'Choose from 4 stunning destinations',
+                  '30-day money-back guarantee if you change your mind',
+                ].map((item, i) => (
+                  <li key={i} className="flex items-start gap-3" style={{ color: NAVY }}>
+                    <CheckCircle2 className="w-5 h-5 mt-0.5 shrink-0" style={{ color: GOLD }} />
+                    <span>{item}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </div>
+
+          <button
+            onClick={scrollToForm}
+            className="mt-10 inline-flex items-center gap-2 px-8 py-4 rounded-xl font-bold text-lg transition-all hover:scale-105"
+            style={{ backgroundColor: NAVY, color: GOLD }}
+          >
+            <Lock className="w-5 h-5" />
+            Lock In $29/mo Now
+          </button>
+        </div>
+      </section>
+
+      {/* ===== HOW IT WORKS — 3 STEPS ===== */}
+      <section className="py-16 px-4" style={{ backgroundColor: '#F5F5F5' }}>
+        <div className="max-w-5xl mx-auto">
+          <h2
+            className="text-3xl sm:text-4xl font-bold text-center mb-4"
+            style={{ fontFamily: 'var(--font-space-grotesk), sans-serif', color: NAVY }}
+          >
+            How It Works
+          </h2>
+          <p className="text-gray-500 text-center mb-12 text-lg">
+            Three simple steps to your locked-in paradise vacation
+          </p>
+
+          <div className="grid md:grid-cols-3 gap-8">
+            {steps.map((step, i) => (
+              <div
+                key={i}
+                className="bg-white rounded-2xl p-8 text-center shadow-sm hover:shadow-lg transition-shadow relative"
+              >
+                <div className="absolute -top-4 left-1/2 -translate-x-1/2 w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold"
+                  style={{ backgroundColor: GOLD, color: NAVY }}
+                >
+                  {i + 1}
+                </div>
+                <div
+                  className="w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-5"
+                  style={{ backgroundColor: `${NAVY}10` }}
+                >
+                  <step.icon className="w-8 h-8" style={{ color: NAVY }} />
+                </div>
+                <h3 className="text-xl font-bold mb-3" style={{ color: NAVY }}>
+                  {step.title}
+                </h3>
+                <p className="text-gray-500">{step.description}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ===== SECURITY FEATURES ===== */}
+      <section
+        className="py-16 px-4"
+        style={{ background: `linear-gradient(135deg, ${NAVY}, ${DARK_NAVY})` }}
+      >
+        <div className="max-w-4xl mx-auto text-center">
+          <h2
+            className="text-3xl sm:text-4xl font-bold mb-4"
+            style={{ fontFamily: 'var(--font-space-grotesk), sans-serif', color: GOLD }}
+          >
+            Your Investment Is Protected
+          </h2>
+          <p className="text-white/70 text-lg mb-12">
+            We take your security as seriously as we take your vacation experience
+          </p>
+
+          <div className="grid sm:grid-cols-2 gap-6">
+            {securityFeatures.map((feat, i) => (
+              <div
+                key={i}
+                className="flex items-center gap-4 bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-5 text-left"
+              >
+                <div
+                  className="w-12 h-12 rounded-xl flex items-center justify-center shrink-0"
+                  style={{ backgroundColor: `${GOLD}20` }}
+                >
+                  <feat.icon className="w-6 h-6" style={{ color: GOLD }} />
+                </div>
+                <p className="text-white/90 font-medium">{feat.text}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ===== TIKTOK CAROUSEL ===== */}
+      <TikTokCarousel
+        className="bg-white"
+        title="See What Vacationers Are Saying"
+        subtitle="Real travelers, real experiences — locked in at the best price"
+      />
+
+      {/* ===== COUNTDOWN REMINDER ===== */}
+      <section className="py-10 px-4" style={{ backgroundColor: '#FFF8E1' }}>
+        <div className="max-w-3xl mx-auto text-center">
+          <p className="text-sm font-bold uppercase tracking-wider mb-3" style={{ color: NAVY }}>
+            Your Price Lock Expires In
+          </p>
+          <CountdownTimer minutes={30} variant="flip" bgColor={NAVY} textColor={GOLD} accentColor={GOLD} />
+          <p className="text-gray-500 mt-4">
+            After the timer runs out, the price increases to{' '}
+            <span className="line-through font-medium">$59/mo</span>.{' '}
+            <span className="font-bold" style={{ color: NAVY }}>Don&apos;t lose your spot.</span>
+          </p>
+        </div>
+      </section>
+
+      {/* ===== TESTIMONIALS ===== */}
+      <section className="py-16 px-4 bg-white">
+        <div className="max-w-5xl mx-auto">
+          <h2
+            className="text-3xl sm:text-4xl font-bold text-center mb-12"
+            style={{ fontFamily: 'var(--font-space-grotesk), sans-serif', color: NAVY }}
+          >
+            Travelers Who Locked In Their Price
+          </h2>
+          <div className="grid md:grid-cols-3 gap-6">
+            {TESTIMONIALS.slice(0, 3).map((t, i) => (
+              <TestimonialCard key={i} {...t} />
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ===== PRICING ANCHOR ===== */}
+      <section className="py-16 px-4" style={{ backgroundColor: '#F5F5F5' }}>
+        <div className="max-w-xl mx-auto text-center">
+          <h2
+            className="text-3xl font-bold mb-2"
+            style={{ fontFamily: 'var(--font-space-grotesk), sans-serif', color: NAVY }}
+          >
+            The Numbers Don&apos;t Lie
+          </h2>
+          <p className="text-gray-500 mb-8">Similar vacations cost $3,000+. You pay a fraction.</p>
+
+          <div className="bg-white rounded-2xl shadow-lg p-8 border-2" style={{ borderColor: GOLD }}>
+            <div className="mb-4">
+              <span className="text-gray-400 line-through text-2xl">$59/mo</span>
+              <span className="text-sm text-gray-400 ml-2">regular price</span>
+            </div>
+            <div className="mb-2">
+              <span className="text-5xl font-bold" style={{ color: NAVY }}>
+                ${PAYMENT_CONFIG.monthlyPrice}
+              </span>
+              <span className="text-xl text-gray-500">/mo</span>
+            </div>
+            <p className="text-gray-500 mb-1">
+              {PAYMENT_CONFIG.totalMonths} months &times; ${PAYMENT_CONFIG.monthlyPrice} = ${PAYMENT_CONFIG.totalPrice}
+            </p>
+            <p className="text-gray-400 text-sm mb-6">
+              or ${PAYMENT_CONFIG.oneTimePrice} one-time payment
+            </p>
+
+            <div className="flex items-center justify-center gap-2 text-sm mb-4" style={{ color: GOLD }}>
+              <TrendingUp className="w-4 h-4" />
+              <span className="font-medium">You save $200 vs. regular price</span>
+            </div>
+
+            <button
+              onClick={scrollToForm}
+              className="w-full py-4 rounded-xl font-bold text-lg transition-all hover:scale-[1.02]"
+              style={{ backgroundColor: NAVY, color: GOLD }}
+            >
+              Lock In This Price
+            </button>
+          </div>
+        </div>
+      </section>
+
+      {/* ===== FORM ===== */}
+      <section
+        id="signup-form"
+        className="py-16 px-4"
+        style={{ background: `linear-gradient(135deg, ${NAVY}, ${DARK_NAVY})` }}
+      >
+        <div className="max-w-xl mx-auto">
+          <div className="text-center mb-8">
+            <Lock className="w-12 h-12 mx-auto mb-4" style={{ color: GOLD }} />
+            <h2
+              className="text-3xl font-bold mb-2"
+              style={{ fontFamily: 'var(--font-space-grotesk), sans-serif', color: '#FFFFFF' }}
+            >
+              Lock In Your Price Now
+            </h2>
+            <p className="text-white/70">
+              <span className="line-through text-white/40">$59/mo</span>{' '}
+              <span style={{ color: GOLD }} className="font-bold text-xl">${PAYMENT_CONFIG.monthlyPrice}/mo</span>{' '}
+              — 5 days/4 nights all-inclusive
+            </p>
+          </div>
+
+          <PayNowForm
+            variant="dark"
+            accentColor={GOLD}
+            buttonText="Lock In My Price — $29/mo"
+            className="max-w-md mx-auto"
+          />
+
+          <div className="mt-6">
+            <TrustBadges variant="compact" textColor="rgba(255,255,255,0.5)" />
+          </div>
+        </div>
+      </section>
+
+      {/* ===== FAQ ===== */}
+      <InfluencerBuzz />
+
+      <section className="py-16 px-4 bg-white">
+        <div className="max-w-2xl mx-auto">
+          <h2
+            className="text-3xl font-bold text-center mb-8"
+            style={{ fontFamily: 'var(--font-space-grotesk), sans-serif', color: NAVY }}
+          >
+            Common Questions
+          </h2>
+          <FAQAccordion />
+        </div>
+      </section>
+
+      {/* ===== FINAL CTA ===== */}
+      <section className="py-12 px-4 text-center" style={{ backgroundColor: NAVY }}>
+        <div className="max-w-3xl mx-auto">
+          <CountdownTimer minutes={30} variant="digital" bgColor={DARK_NAVY} textColor={GOLD} accentColor={GOLD} className="justify-center mb-6" />
+          <h3 className="text-2xl font-bold text-white mb-4" style={{ fontFamily: 'var(--font-space-grotesk), sans-serif' }}>
+            Time Is Running Out — Lock In $29/mo Before It&apos;s Gone
+          </h3>
+          <button
+            onClick={scrollToForm}
+            className="inline-flex items-center gap-3 px-10 py-5 rounded-xl text-lg font-bold transition-all hover:scale-105"
+            style={{ backgroundColor: GOLD, color: NAVY }}
+          >
+            <Lock className="w-5 h-5" />
+            Lock In My Price Now
+            <ArrowRight className="w-5 h-5" />
+          </button>
+        </div>
+      </section>
+    </div>
+  )
+}
diff --git a/src/components/lp/pages/LP27BeforeAfter.tsx b/src/components/lp/pages/LP27BeforeAfter.tsx
new file mode 100644
index 0000000..4e94776
--- /dev/null
+++ b/src/components/lp/pages/LP27BeforeAfter.tsx
@@ -0,0 +1,443 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import {
+  Clock, Coffee, Monitor, Car, Frown, CloudRain,
+  Sun, Waves, UtensilsCrossed, Palmtree, Smile, Music,
+  ArrowRight, ArrowDown, CheckCircle2, Star, Heart,
+  Sparkles, Camera, MapPin,
+} from 'lucide-react'
+import PayNowForm from '@/components/lp/shared/PayNowForm'
+import CountdownTimer from '@/components/lp/shared/CountdownTimer'
+import TrustBadges from '@/components/lp/shared/TrustBadges'
+import StickyMobileCTA from '@/components/lp/shared/StickyMobileCTA'
+import TestimonialCard from '@/components/lp/shared/TestimonialCard'
+import DestinationCarousel from '@/components/lp/shared/DestinationCarousel'
+import FAQAccordion from '@/components/lp/shared/FAQAccordion'
+import UrgencyBanner from '@/components/lp/shared/UrgencyBanner'
+import InfluencerBuzz from '@/components/lp/shared/InfluencerBuzz'
+import { PAYMENT_CONFIG, TESTIMONIALS, FAQ_ITEMS } from '@/app/lp/_config/types'
+
+const GRAY = '#6B7280'
+const TEAL = '#0D9488'
+const DARK_TEAL = '#065F53'
+const LIGHT_TEAL = '#F0FDFA'
+
+const beforeStats = [
+  { icon: Clock, stat: '8.5 hrs', label: 'Average workday' },
+  { icon: Car, stat: '52 min', label: 'Daily commute' },
+  { icon: Monitor, stat: '11 hrs', label: 'Screen time' },
+  { icon: Coffee, stat: '3.5 cups', label: 'Coffee to survive' },
+]
+
+const afterStats = [
+  { icon: Sun, stat: '0', label: 'Alarms set' },
+  { icon: Waves, stat: '∞', label: 'Beach hours' },
+  { icon: UtensilsCrossed, stat: 'All', label: 'Meals included' },
+  { icon: Smile, stat: '100%', label: 'Relaxation' },
+]
+
+const beforeItems = [
+  { icon: Frown, text: 'Staring at the same four walls every day' },
+  { icon: CloudRain, text: 'Weather that matches your mood — gray' },
+  { icon: Monitor, text: 'Endless emails, meetings, and deadlines' },
+  { icon: Car, text: 'Sitting in traffic, wasting your life' },
+  { icon: Coffee, text: 'Running on caffeine and fumes' },
+  { icon: Clock, text: 'Counting down to Friday... again' },
+]
+
+const afterItems = [
+  { icon: Palmtree, text: 'Waking up to ocean views and warm breeze' },
+  { icon: Sun, text: 'Sun on your skin, sand between your toes' },
+  { icon: UtensilsCrossed, text: 'World-class cuisine — every meal, every day' },
+  { icon: Music, text: 'Live music, cocktails, and sunset magic' },
+  { icon: Heart, text: 'Quality time with the person who matters most' },
+  { icon: Camera, text: 'Photos that make everyone jealous' },
+]
+
+const transformations = [
+  {
+    before: 'Fluorescent office lights',
+    after: 'Golden hour sunsets over the Pacific',
+    image: '/images/cdn/photo-1507525428034-b723cf961d3e.jpg',
+  },
+  {
+    before: 'Sad desk lunch',
+    after: 'Oceanfront dining with unlimited cocktails',
+    image: '/images/cdn/photo-1544551763-46a013bb70d5.jpg',
+  },
+  {
+    before: 'Scrolling through vacation photos',
+    after: 'Being IN the vacation photos',
+    image: '/images/cdn/photo-1510097467424-192d713fd8b2.jpg',
+  },
+]
+
+export default function LP27BeforeAfter() {
+  const [activeTransform, setActiveTransform] = useState(0)
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setActiveTransform(prev => (prev + 1) % transformations.length)
+    }, 5000)
+    return () => clearInterval(interval)
+  }, [])
+
+  const scrollToForm = () => {
+    document.getElementById('signup-form')?.scrollIntoView({ behavior: 'smooth' })
+  }
+
+  return (
+    <div className="min-h-screen" style={{ fontFamily: 'var(--font-quicksand), sans-serif' }}>
+      <UrgencyBanner variant="combined" />
+      <StickyMobileCTA accentColor={TEAL} buttonText="Transform My Life" />
+
+      {/* ===== HERO — SPLIT SCREEN ===== */}
+      <section className="pt-20">
+        <div className="grid md:grid-cols-2 min-h-[70vh]">
+          {/* BEFORE — Gray, desaturated */}
+          <div className="relative flex items-center justify-center p-8 md:p-12" style={{ backgroundColor: '#F3F4F6' }}>
+            <div
+              className="absolute inset-0 bg-cover bg-center opacity-10"
+              style={{
+                backgroundImage: 'url(/images/cdn/photo-1497215728101-856f4ea42174.jpg)',
+                filter: 'grayscale(100%)',
+              }}
+            />
+            <div className="relative z-10 text-center max-w-md">
+              <p className="uppercase tracking-widest text-sm font-bold mb-3" style={{ color: GRAY }}>
+                Your Monday
+              </p>
+              <h2
+                className="text-4xl sm:text-5xl font-bold mb-4"
+                style={{ fontFamily: 'var(--font-poppins), sans-serif', color: '#374151' }}
+              >
+                Same Desk.{' '}
+                <span style={{ color: GRAY }}>Same Grind.</span>
+              </h2>
+              <p className="text-gray-500 text-lg">
+                Another day, another dollar. Another year, no vacation.
+                You&apos;re reading this because you know you deserve better.
+              </p>
+              <Frown className="w-16 h-16 mx-auto mt-6 text-gray-300" />
+            </div>
+          </div>
+
+          {/* AFTER — Vibrant, full color */}
+          <div className="relative flex items-center justify-center p-8 md:p-12 overflow-hidden">
+            <div
+              className="absolute inset-0 bg-cover bg-center"
+              style={{
+                backgroundImage: 'url(/images/cdn/photo-1507525428034-b723cf961d3e.jpg)',
+              }}
+            />
+            <div className="absolute inset-0 bg-gradient-to-r from-teal-900/60 to-teal-700/40" />
+            <div className="relative z-10 text-center max-w-md">
+              <p className="uppercase tracking-widest text-sm font-bold mb-3 text-teal-200">
+                Your Vacation
+              </p>
+              <h2
+                className="text-4xl sm:text-5xl font-bold mb-4 text-white"
+                style={{ fontFamily: 'var(--font-poppins), sans-serif' }}
+              >
+                Ocean Views.{' '}
+                <span className="text-teal-200">Pure Bliss.</span>
+              </h2>
+              <p className="text-white/90 text-lg">
+                5 days and 4 nights of all-inclusive paradise. Meals, drinks, sunshine — all yours.
+              </p>
+              <Sun className="w-16 h-16 mx-auto mt-6 text-yellow-300" />
+            </div>
+          </div>
+        </div>
+
+        {/* Center divider with CTA */}
+        <div className="bg-white py-8 px-4 text-center">
+          <p
+            className="text-2xl sm:text-3xl font-bold mb-3"
+            style={{ fontFamily: 'var(--font-poppins), sans-serif', color: '#1F2937' }}
+          >
+            You deserve more than a{' '}
+            <span style={{ color: TEAL }}>screensaver of a beach</span>
+          </p>
+          <p className="text-gray-500 text-lg mb-6">
+            <span className="line-through text-gray-400">$59/mo</span>{' '}
+            <span className="font-bold text-xl" style={{ color: TEAL }}>${PAYMENT_CONFIG.monthlyPrice}/mo</span>{' '}
+            for the real thing
+          </p>
+          <button
+            onClick={scrollToForm}
+            className="inline-flex items-center gap-2 px-8 py-4 rounded-xl text-white font-bold text-lg transition-all hover:scale-105"
+            style={{ backgroundColor: TEAL }}
+          >
+            Start Living — Not Just Existing
+            <ArrowRight className="w-5 h-5" />
+          </button>
+        </div>
+      </section>
+
+      {/* ===== BEFORE STATS VS AFTER STATS ===== */}
+      <section className="py-16 px-4" style={{ backgroundColor: '#F9FAFB' }}>
+        <div className="max-w-5xl mx-auto">
+          <h2
+            className="text-3xl sm:text-4xl font-bold text-center mb-12"
+            style={{ fontFamily: 'var(--font-poppins), sans-serif', color: '#1F2937' }}
+          >
+            Your Life By the Numbers
+          </h2>
+
+          <div className="grid md:grid-cols-2 gap-8">
+            {/* Before stats */}
+            <div className="bg-gray-100 rounded-2xl p-8 border border-gray-200">
+              <h3 className="text-lg font-bold text-gray-400 uppercase tracking-wider mb-6 text-center">
+                Your Average Week
+              </h3>
+              <div className="grid grid-cols-2 gap-4">
+                {beforeStats.map((s, i) => (
+                  <div key={i} className="text-center p-4 bg-white rounded-xl">
+                    <s.icon className="w-6 h-6 mx-auto mb-2 text-gray-400" />
+                    <p className="text-2xl font-bold text-gray-600">{s.stat}</p>
+                    <p className="text-xs text-gray-400">{s.label}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* After stats */}
+            <div className="rounded-2xl p-8 border-2" style={{ borderColor: TEAL, backgroundColor: LIGHT_TEAL }}>
+              <h3 className="text-lg font-bold uppercase tracking-wider mb-6 text-center" style={{ color: TEAL }}>
+                Your Vacation Week
+              </h3>
+              <div className="grid grid-cols-2 gap-4">
+                {afterStats.map((s, i) => (
+                  <div key={i} className="text-center p-4 bg-white rounded-xl shadow-sm">
+                    <s.icon className="w-6 h-6 mx-auto mb-2" style={{ color: TEAL }} />
+                    <p className="text-2xl font-bold" style={{ color: DARK_TEAL }}>{s.stat}</p>
+                    <p className="text-xs text-gray-500">{s.label}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* ===== BEFORE / AFTER LIST COMPARISON ===== */}
+      <section className="py-16 px-4 bg-white">
+        <div className="max-w-5xl mx-auto">
+          <div className="grid md:grid-cols-2 gap-12">
+            {/* Before column */}
+            <div>
+              <h3 className="text-2xl font-bold mb-6 flex items-center gap-3" style={{ fontFamily: 'var(--font-poppins), sans-serif', color: GRAY }}>
+                <span className="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center text-gray-400 text-lg font-bold">✕</span>
+                Right Now
+              </h3>
+              <div className="space-y-4">
+                {beforeItems.map((item, i) => (
+                  <div key={i} className="flex items-center gap-3 p-4 bg-gray-50 rounded-xl text-gray-500" style={{ filter: 'grayscale(50%)' }}>
+                    <item.icon className="w-5 h-5 text-gray-400 shrink-0" />
+                    <span>{item.text}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* After column */}
+            <div>
+              <h3 className="text-2xl font-bold mb-6 flex items-center gap-3" style={{ fontFamily: 'var(--font-poppins), sans-serif', color: TEAL }}>
+                <span className="w-10 h-10 rounded-full flex items-center justify-center text-white text-lg font-bold" style={{ backgroundColor: TEAL }}>✓</span>
+                On Vacation
+              </h3>
+              <div className="space-y-4">
+                {afterItems.map((item, i) => (
+                  <div key={i} className="flex items-center gap-3 p-4 rounded-xl border-2 transition-all hover:shadow-md" style={{ borderColor: `${TEAL}30`, backgroundColor: LIGHT_TEAL }}>
+                    <item.icon className="w-5 h-5 shrink-0" style={{ color: TEAL }} />
+                    <span className="font-medium" style={{ color: DARK_TEAL }}>{item.text}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+
+          <div className="text-center mt-12">
+            <button
+              onClick={scrollToForm}
+              className="inline-flex items-center gap-2 px-8 py-4 rounded-xl text-white font-bold text-lg transition-all hover:scale-105"
+              style={{ backgroundColor: TEAL }}
+            >
+              Choose the &quot;After&quot; — From $29/mo
+              <ArrowRight className="w-5 h-5" />
+            </button>
+          </div>
+        </div>
+      </section>
+
+      {/* ===== COUNTDOWN DIVIDER ===== */}
+      <section className="py-10 px-4" style={{ background: `linear-gradient(135deg, ${DARK_TEAL}, ${TEAL})` }}>
+        <div className="max-w-3xl mx-auto text-center">
+          <p className="text-white/80 text-sm uppercase tracking-wider mb-3">
+            This pricing disappears in
+          </p>
+          <CountdownTimer minutes={30} variant="flip" bgColor="#064E3B" textColor="#FFFFFF" accentColor="#5EEAD4" />
+          <p className="text-teal-200 text-sm mt-4">
+            <span className="line-through text-teal-300/50">$59/mo</span>{' '}
+            <span className="font-bold">${PAYMENT_CONFIG.monthlyPrice}/mo</span> — only while the timer lasts
+          </p>
+        </div>
+      </section>
+
+      {/* ===== TRANSFORMATION SHOWCASE ===== */}
+      <section className="py-16 px-4 bg-white">
+        <div className="max-w-4xl mx-auto">
+          <h2
+            className="text-3xl sm:text-4xl font-bold text-center mb-12"
+            style={{ fontFamily: 'var(--font-poppins), sans-serif', color: '#1F2937' }}
+          >
+            The Transformation Is{' '}
+            <span style={{ color: TEAL }}>Real</span>
+          </h2>
+
+          <div className="space-y-8">
+            {transformations.map((t, i) => (
+              <div
+                key={i}
+                className={`grid md:grid-cols-2 gap-0 rounded-2xl overflow-hidden shadow-lg transition-all duration-500 ${
+                  activeTransform === i ? 'scale-[1.02] shadow-xl' : 'opacity-80'
+                }`}
+              >
+                <div className="p-8 flex flex-col justify-center" style={{ backgroundColor: '#F3F4F6' }}>
+                  <p className="text-xs uppercase tracking-wider text-gray-400 mb-2">Before</p>
+                  <p className="text-xl font-bold text-gray-500 line-through">{t.before}</p>
+                  <ArrowDown className="w-6 h-6 text-gray-300 my-3 md:hidden" />
+                </div>
+                <div className="relative">
+                  <img
+                    src={t.image}
+                    alt={t.after}
+                    className="w-full h-48 md:h-full object-cover"
+                  />
+                  <div className="absolute inset-0 bg-gradient-to-t from-teal-900/80 to-transparent flex items-end p-6">
+                    <div>
+                      <p className="text-xs uppercase tracking-wider text-teal-200 mb-1">After</p>
+                      <p className="text-xl font-bold text-white">{t.after}</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ===== TESTIMONIALS ===== */}
+      <section className="py-16 px-4" style={{ backgroundColor: LIGHT_TEAL }}>
+        <div className="max-w-5xl mx-auto">
+          <h2
+            className="text-3xl sm:text-4xl font-bold text-center mb-4"
+            style={{ fontFamily: 'var(--font-poppins), sans-serif', color: DARK_TEAL }}
+          >
+            They Made the Switch
+          </h2>
+          <p className="text-gray-500 text-center mb-12 text-lg">
+            Real people who stopped scrolling and started living
+          </p>
+          <div className="grid md:grid-cols-3 gap-6">
+            {TESTIMONIALS.slice(0, 3).map((t, i) => (
+              <TestimonialCard key={i} {...t} />
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ===== DESTINATIONS ===== */}
+      <section className="py-16 px-4 bg-white">
+        <div className="max-w-5xl mx-auto">
+          <h2
+            className="text-3xl sm:text-4xl font-bold text-center mb-4"
+            style={{ fontFamily: 'var(--font-poppins), sans-serif', color: '#1F2937' }}
+          >
+            Choose Your &quot;After&quot;
+          </h2>
+          <p className="text-gray-500 text-center mb-8 text-lg">
+            4 stunning destinations — all included in your certificate
+          </p>
+          <DestinationCarousel />
+        </div>
+      </section>
+
+      {/* ===== FORM ===== */}
+      <section
+        id="signup-form"
+        className="py-16 px-4"
+        style={{ background: `linear-gradient(135deg, ${DARK_TEAL}, ${TEAL})` }}
+      >
+        <div className="max-w-xl mx-auto">
+          <div className="text-center mb-8">
+            <Sparkles className="w-12 h-12 mx-auto mb-4 text-teal-200" />
+            <h2
+              className="text-3xl font-bold mb-2 text-white"
+              style={{ fontFamily: 'var(--font-poppins), sans-serif' }}
+            >
+              Stop Dreaming. Start Living.
+            </h2>
+            <p className="text-teal-100">
+              <span className="line-through text-teal-300/50">$59/mo</span>{' '}
+              <span className="font-bold text-xl text-white">${PAYMENT_CONFIG.monthlyPrice}/mo</span>{' '}
+              — 5 days/4 nights all-inclusive
+            </p>
+          </div>
+
+          <PayNowForm
+            variant="dark"
+            accentColor={TEAL}
+            buttonText="Transform My Life — $29/mo"
+            className="max-w-md mx-auto"
+          />
+
+          <div className="mt-6">
+            <TrustBadges variant="compact" textColor="rgba(255,255,255,0.5)" />
+          </div>
+        </div>
+      </section>
+
+      {/* ===== FAQ ===== */}
+      <InfluencerBuzz />
+
+      <section className="py-16 px-4 bg-white">
+        <div className="max-w-2xl mx-auto">
+          <h2
+            className="text-3xl font-bold text-center mb-8"
+            style={{ fontFamily: 'var(--font-poppins), sans-serif', color: '#1F2937' }}
+          >
+            Questions? We&apos;ve Got Answers
+          </h2>
+          <FAQAccordion />
+        </div>
+      </section>
+
+      {/* ===== FINAL CTA ===== */}
+      <section className="py-12 px-4 text-center" style={{ backgroundColor: DARK_TEAL }}>
+        <div className="max-w-3xl mx-auto">
+          <CountdownTimer minutes={30} variant="digital" bgColor="#064E3B" textColor="#FFFFFF" accentColor="#5EEAD4" className="justify-center mb-6" />
+          <h3
+            className="text-2xl font-bold text-white mb-2"
+            style={{ fontFamily: 'var(--font-poppins), sans-serif' }}
+          >
+            Your &quot;Before&quot; Story Ends Today
+          </h3>
+          <p className="text-teal-200 mb-6">
+            Don&apos;t lose this price. Don&apos;t lose this moment.
+          </p>
+          <button
+            onClick={scrollToForm}
+            className="inline-flex items-center gap-2 px-10 py-5 rounded-xl text-lg font-bold transition-all hover:scale-105"
+            style={{ backgroundColor: '#5EEAD4', color: DARK_TEAL }}
+          >
+            Choose the After — $29/mo
+            <ArrowRight className="w-5 h-5" />
+          </button>
+        </div>
+      </section>
+    </div>
+  )
+}
diff --git a/src/components/lp/pages/LP28RiskFree.tsx b/src/components/lp/pages/LP28RiskFree.tsx
new file mode 100644
index 0000000..803e21a
--- /dev/null
+++ b/src/components/lp/pages/LP28RiskFree.tsx
@@ -0,0 +1,438 @@
+'use client'
+
+import { useState } from 'react'
+import {
+  Shield, ShieldCheck, ShieldQuestion, CheckCircle2,
+  ArrowRight, Calendar, CreditCard, HelpCircle,
+  ThumbsUp, MessageCircle, Star, BadgeCheck,
+  RefreshCw, Lock, Heart, Users,
+  ChevronDown, ChevronUp, Clock,
+} from 'lucide-react'
+import PayNowForm from '@/components/lp/shared/PayNowForm'
+import CountdownTimer from '@/components/lp/shared/CountdownTimer'
+import TrustBadges from '@/components/lp/shared/TrustBadges'
+import StickyMobileCTA from '@/components/lp/shared/StickyMobileCTA'
+import TestimonialCard from '@/components/lp/shared/TestimonialCard'
+import ComparisonTable from '@/components/lp/shared/ComparisonTable'
+import FAQAccordion from '@/components/lp/shared/FAQAccordion'
+import UrgencyBanner from '@/components/lp/shared/UrgencyBanner'
+import InfluencerBuzz from '@/components/lp/shared/InfluencerBuzz'
+import { PAYMENT_CONFIG, TESTIMONIALS, FAQ_ITEMS } from '@/app/lp/_config/types'
+
+const GREEN = '#059669'
+const DARK_GREEN = '#047857'
+const LIGHT_GREEN = '#ECFDF5'
+const LIGHTER_GREEN = '#F0FDF4'
+
+const objections = [
+  {
+    icon: HelpCircle,
+    question: 'What if I don\'t like it?',
+    answer: 'Full refund within 30 days — no questions asked. If the vacation doesn\'t meet your expectations, we give you every penny back. We\'ve been doing this for years, and our refund rate is less than 2%.',
+    badge: '30-Day Money-Back',
+  },
+  {
+    icon: Calendar,
+    question: 'What if the dates don\'t work for me?',
+    answer: 'You have 18 months of flexible scheduling. Choose any available dates that work for your calendar. Need to reschedule? No problem — we make it easy.',
+    badge: 'Flexible Scheduling',
+  },
+  {
+    icon: ShieldQuestion,
+    question: 'Is this actually legit?',
+    answer: 'We\'re a verified, BBB-accredited business with thousands of happy travelers. Real reviews, real people, real vacations. We\'ve been featured on TikTok with millions of views.',
+    badge: 'BBB Accredited',
+  },
+  {
+    icon: CreditCard,
+    question: 'Is my payment information safe?',
+    answer: '256-bit SSL encryption protects every transaction. We use the same security technology as major banks. Your card details are never stored on our servers.',
+    badge: 'Bank-Level Security',
+  },
+  {
+    icon: RefreshCw,
+    question: 'What if I need to cancel?',
+    answer: 'Cancel anytime within 30 days for a full refund. After 30 days, your certificate is still transferable — give it to a friend or family member.',
+    badge: 'Easy Cancellation',
+  },
+  {
+    icon: Users,
+    question: 'Can I really bring a guest for free?',
+    answer: 'Yes! Your certificate covers a family of four — 2 adults and 2 kids under 12. The all-inclusive package — meals, drinks, resort amenities — applies to everyone. Additional guests can be added at a discounted rate.',
+    badge: 'Bring a Guest Free',
+  },
+]
+
+const skepticTestimonials = [
+  {
+    quote: "I was SO skeptical — I almost didn't sign up. Best decision I ever made. The resort was incredible and everything was exactly as described.",
+    name: "Jennifer & Tom",
+    location: "New York, NY",
+    photo: "/images/cdn/photo-1494790108377-be9c29b29330.jpg",
+  },
+  {
+    quote: "My husband thought it was a scam. We booked anyway. Now he's the one telling everyone about it. Cabo was AMAZING.",
+    name: "Maria G.",
+    location: "Houston, TX",
+    photo: "/images/cdn/photo-1438761681033-6461ffad8d80.jpg",
+  },
+  {
+    quote: "I did so much research before signing up. Read every review. Turns out it's 100% real — and the vacation exceeded every expectation.",
+    name: "David & Lisa",
+    location: "Denver, CO",
+    photo: "/images/cdn/photo-1472099645785-5658abf4ff4e.jpg",
+  },
+]
+
+const trustPoints = [
+  { value: '12,000+', label: 'Happy Travelers' },
+  { value: '4.8/5', label: 'Average Rating' },
+  { value: '<2%', label: 'Refund Rate' },
+  { value: '30 Days', label: 'Money-Back Guarantee' },
+]
+
+export default function LP28RiskFree() {
+  const [expandedObjection, setExpandedObjection] = useState<number | null>(0)
+
+  const scrollToForm = () => {
+    document.getElementById('signup-form')?.scrollIntoView({ behavior: 'smooth' })
+  }
+
+  return (
+    <div className="min-h-screen bg-white" style={{ fontFamily: 'var(--font-inter), sans-serif' }}>
+      <UrgencyBanner variant="combined" />
+      <StickyMobileCTA accentColor={GREEN} buttonText="Try It Risk-Free" />
+
+      {/* ===== HERO ===== */}
+      <section className="pt-20 pb-16 px-4" style={{ backgroundColor: LIGHT_GREEN }}>
+        <div className="max-w-4xl mx-auto text-center">
+          {/* Giant shield */}
+          <div className="relative inline-block mb-8">
+            <div
+              className="w-32 h-32 rounded-full flex items-center justify-center mx-auto"
+              style={{
+                background: `linear-gradient(135deg, ${GREEN}, ${DARK_GREEN})`,
+                boxShadow: `0 8px 40px rgba(5,150,105,0.3)`,
+              }}
+            >
+              <Shield className="w-16 h-16 text-white" />
+            </div>
+            <div className="absolute -bottom-2 -right-2 w-12 h-12 rounded-full bg-white flex items-center justify-center shadow-lg">
+              <CheckCircle2 className="w-8 h-8" style={{ color: GREEN }} />
+            </div>
+          </div>
+
+          <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold mb-6 text-gray-900 tracking-tight">
+            100% <span style={{ color: GREEN }}>RISK-FREE</span>
+          </h1>
+          <p className="text-xl sm:text-2xl text-gray-600 mb-4 max-w-2xl mx-auto">
+            30-Day Money-Back Guarantee on your 5-day/4-night all-inclusive Mexico vacation
+          </p>
+          <p className="text-gray-500 text-lg mb-8">
+            <span className="line-through text-gray-400">$59/mo</span>{' '}
+            <span className="font-bold text-2xl" style={{ color: GREEN }}>${PAYMENT_CONFIG.monthlyPrice}/mo</span>{' '}
+            — if you don&apos;t love it, you don&apos;t pay
+          </p>
+
+          <button
+            onClick={scrollToForm}
+            className="inline-flex items-center gap-3 px-10 py-5 rounded-xl text-white text-lg font-bold transition-all hover:scale-105 hover:shadow-2xl mb-8"
+            style={{ backgroundColor: GREEN, boxShadow: `0 4px 20px rgba(5,150,105,0.4)` }}
+          >
+            <Shield className="w-5 h-5" />
+            Try It Risk-Free — $29/mo
+            <ArrowRight className="w-5 h-5" />
+          </button>
+
+          {/* Trust stats row */}
+          <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 max-w-2xl mx-auto">
+            {trustPoints.map((tp, i) => (
+              <div key={i} className="bg-white rounded-xl p-4 shadow-sm">
+                <p className="text-2xl font-bold" style={{ color: GREEN }}>{tp.value}</p>
+                <p className="text-xs text-gray-500">{tp.label}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ===== RISK-FREE COUNTDOWN ===== */}
+      <section className="py-8 px-4 bg-white border-b">
+        <div className="max-w-3xl mx-auto text-center">
+          <p className="text-sm font-medium text-gray-500 mb-3">
+            Risk-free offer available for
+          </p>
+          <CountdownTimer minutes={30} variant="flip" bgColor={GREEN} textColor="#FFFFFF" accentColor={GREEN} />
+          <p className="text-gray-400 text-sm mt-3">
+            After the timer, the price increases to <span className="line-through">$59/mo</span>
+          </p>
+        </div>
+      </section>
+
+      {/* ===== OBJECTION HANDLING ===== */}
+      <section className="py-16 px-4 bg-white">
+        <div className="max-w-3xl mx-auto">
+          <h2 className="text-3xl sm:text-4xl font-bold text-center mb-4 text-gray-900">
+            Every Worry, <span style={{ color: GREEN }}>Addressed</span>
+          </h2>
+          <p className="text-gray-500 text-center mb-12 text-lg">
+            We know you have questions. Here are honest answers to every one.
+          </p>
+
+          <div className="space-y-4">
+            {objections.map((obj, i) => (
+              <div
+                key={i}
+                className={`rounded-2xl border-2 transition-all overflow-hidden ${
+                  expandedObjection === i ? 'shadow-lg' : ''
+                }`}
+                style={{
+                  borderColor: expandedObjection === i ? GREEN : '#E5E7EB',
+                  backgroundColor: expandedObjection === i ? LIGHTER_GREEN : '#FFFFFF',
+                }}
+              >
+                <button
+                  onClick={() => setExpandedObjection(expandedObjection === i ? null : i)}
+                  className="w-full flex items-center justify-between p-6 text-left"
+                >
+                  <div className="flex items-center gap-4">
+                    <div
+                      className="w-12 h-12 rounded-xl flex items-center justify-center shrink-0"
+                      style={{ backgroundColor: expandedObjection === i ? `${GREEN}15` : '#F3F4F6' }}
+                    >
+                      <obj.icon
+                        className="w-6 h-6"
+                        style={{ color: expandedObjection === i ? GREEN : '#9CA3AF' }}
+                      />
+                    </div>
+                    <div>
+                      <h3 className="text-lg font-bold text-gray-900">{obj.question}</h3>
+                      <span
+                        className="text-xs font-medium px-2 py-0.5 rounded-full"
+                        style={{
+                          backgroundColor: `${GREEN}15`,
+                          color: GREEN,
+                        }}
+                      >
+                        {obj.badge}
+                      </span>
+                    </div>
+                  </div>
+                  {expandedObjection === i ? (
+                    <ChevronUp className="w-5 h-5 text-gray-400 shrink-0" />
+                  ) : (
+                    <ChevronDown className="w-5 h-5 text-gray-400 shrink-0" />
+                  )}
+                </button>
+
+                {expandedObjection === i && (
+                  <div className="px-6 pb-6">
+                    <div className="pl-16">
+                      <p className="text-gray-600 leading-relaxed">{obj.answer}</p>
+                      <div className="mt-4 flex items-center gap-2">
+                        <CheckCircle2 className="w-4 h-4" style={{ color: GREEN }} />
+                        <span className="text-sm font-medium" style={{ color: GREEN }}>
+                          Your concern is fully covered
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+
+          <div className="text-center mt-10">
+            <button
+              onClick={scrollToForm}
+              className="inline-flex items-center gap-2 px-8 py-4 rounded-xl text-white font-bold text-lg transition-all hover:scale-105"
+              style={{ backgroundColor: GREEN }}
+            >
+              <Shield className="w-5 h-5" />
+              Try It Risk-Free
+              <ArrowRight className="w-5 h-5" />
+            </button>
+          </div>
+        </div>
+      </section>
+
+      {/* ===== GUARANTEE BANNER ===== */}
+      <section className="py-12 px-4" style={{ backgroundColor: LIGHT_GREEN }}>
+        <div className="max-w-4xl mx-auto">
+          <div className="bg-white rounded-2xl p-8 sm:p-12 shadow-sm border-2" style={{ borderColor: GREEN }}>
+            <div className="flex flex-col sm:flex-row items-center gap-8">
+              <div className="shrink-0">
+                <div
+                  className="w-24 h-24 rounded-full flex items-center justify-center"
+                  style={{ backgroundColor: `${GREEN}10` }}
+                >
+                  <ShieldCheck className="w-12 h-12" style={{ color: GREEN }} />
+                </div>
+              </div>
+              <div className="text-center sm:text-left">
+                <h3 className="text-2xl font-bold text-gray-900 mb-3">
+                  Our Iron-Clad 30-Day Guarantee
+                </h3>
+                <p className="text-gray-600 leading-relaxed">
+                  Book your vacation certificate today. If for ANY reason you&apos;re not completely satisfied within 30 days,
+                  contact us and we&apos;ll refund every penny. No hoops. No hassle. No hard feelings.
+                  We can offer this because{' '}
+                  <span className="font-bold" style={{ color: GREEN }}>98% of our travelers are thrilled</span> with their experience.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* ===== COMPARISON TABLE ===== */}
+      <section className="py-16 px-4 bg-white">
+        <div className="max-w-4xl mx-auto">
+          <h2 className="text-3xl sm:text-4xl font-bold text-center mb-4 text-gray-900">
+            See How We <span style={{ color: GREEN }}>Compare</span>
+          </h2>
+          <p className="text-gray-500 text-center mb-8 text-lg">
+            Same vacation, fraction of the price — plus protections others don&apos;t offer
+          </p>
+          <ComparisonTable accentColor={GREEN} />
+        </div>
+      </section>
+
+      {/* ===== SKEPTIC TESTIMONIALS ===== */}
+      <section className="py-16 px-4" style={{ backgroundColor: '#F9FAFB' }}>
+        <div className="max-w-5xl mx-auto">
+          <h2 className="text-3xl sm:text-4xl font-bold text-center mb-4 text-gray-900">
+            &quot;I Almost Didn&apos;t Sign Up...&quot;
+          </h2>
+          <p className="text-gray-500 text-center mb-12 text-lg">
+            Hear from travelers who were skeptical — and pleasantly surprised
+          </p>
+
+          <div className="grid md:grid-cols-3 gap-6">
+            {skepticTestimonials.map((t, i) => (
+              <div key={i} className="relative">
+                <div className="absolute -top-3 left-6 z-10">
+                  <span
+                    className="text-xs font-bold px-3 py-1 rounded-full text-white"
+                    style={{ backgroundColor: GREEN }}
+                  >
+                    Former Skeptic
+                  </span>
+                </div>
+                <TestimonialCard {...t} />
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ===== WHAT'S INCLUDED ===== */}
+      <section className="py-16 px-4 bg-white">
+        <div className="max-w-3xl mx-auto">
+          <h2 className="text-3xl font-bold text-center mb-8 text-gray-900">
+            Everything Included, <span style={{ color: GREEN }}>Zero Risk</span>
+          </h2>
+
+          <div className="grid sm:grid-cols-2 gap-4">
+            {[
+              '5 days / 4 nights accommodation',
+              'All meals — breakfast, lunch, dinner',
+              'Unlimited drinks (alcoholic & non)',
+              'Resort pools, beaches, amenities',
+              'Choose from 4 Mexico destinations',
+              '18 months of flexible scheduling',
+              'Bring a guest at no extra charge',
+              '30-day full money-back guarantee',
+            ].map((item, i) => (
+              <div key={i} className="flex items-center gap-3 p-4 bg-gray-50 rounded-xl">
+                <CheckCircle2 className="w-5 h-5 shrink-0" style={{ color: GREEN }} />
+                <span className="font-medium text-gray-700">{item}</span>
+              </div>
+            ))}
+          </div>
+
+          <div className="text-center mt-8">
+            <p className="text-gray-500 mb-4">
+              <span className="line-through text-gray-400">$59/mo</span>{' '}
+              <span className="font-bold text-2xl" style={{ color: GREEN }}>${PAYMENT_CONFIG.monthlyPrice}/mo</span>{' '}
+              or ${PAYMENT_CONFIG.oneTimePrice} one-time
+            </p>
+          </div>
+        </div>
+      </section>
+
+      {/* ===== FORM ===== */}
+      <section
+        id="signup-form"
+        className="py-16 px-4"
+        style={{ background: `linear-gradient(135deg, ${DARK_GREEN}, ${GREEN})` }}
+      >
+        <div className="max-w-xl mx-auto">
+          <div className="text-center mb-8">
+            <Shield className="w-12 h-12 mx-auto mb-4 text-green-200" />
+            <h2 className="text-3xl font-bold mb-2 text-white">
+              Try It Completely Risk-Free
+            </h2>
+            <p className="text-green-100">
+              <span className="line-through text-green-300/50">$59/mo</span>{' '}
+              <span className="font-bold text-xl text-white">${PAYMENT_CONFIG.monthlyPrice}/mo</span>{' '}
+              — 30-day money-back guarantee
+            </p>
+          </div>
+
+          <PayNowForm
+            variant="dark"
+            accentColor={GREEN}
+            buttonText="Try It Risk-Free — $29/mo"
+            className="max-w-md mx-auto"
+          />
+
+          <div className="mt-6 text-center">
+            <p className="text-green-200/70 text-sm flex items-center justify-center gap-2">
+              <Lock className="w-4 h-4" />
+              256-bit SSL encryption • 30-day guarantee • Cancel anytime
+            </p>
+          </div>
+
+          <div className="mt-4">
+            <TrustBadges variant="compact" textColor="rgba(255,255,255,0.5)" />
+          </div>
+        </div>
+      </section>
+
+      <InfluencerBuzz />
+
+      {/* ===== FAQ ===== */}
+      <section className="py-16 px-4 bg-white">
+        <div className="max-w-2xl mx-auto">
+          <h2 className="text-3xl font-bold text-center mb-8 text-gray-900">
+            Still Have Questions?
+          </h2>
+          <FAQAccordion />
+        </div>
+      </section>
+
+      {/* ===== FINAL CTA ===== */}
+      <section className="py-12 px-4 text-center" style={{ backgroundColor: DARK_GREEN }}>
+        <div className="max-w-3xl mx-auto">
+          <CountdownTimer minutes={30} variant="digital" bgColor="#064E3B" textColor="#FFFFFF" accentColor="#34D399" className="justify-center mb-6" />
+          <h3 className="text-2xl font-bold text-white mb-2">
+            Zero Risk. Full Refund If You&apos;re Not Amazed.
+          </h3>
+          <p className="text-green-200 mb-6">
+            Don&apos;t lose this price — the guarantee won&apos;t last forever
+          </p>
+          <button
+            onClick={scrollToForm}
+            className="inline-flex items-center gap-3 px-10 py-5 rounded-xl text-lg font-bold transition-all hover:scale-105"
+            style={{ backgroundColor: '#34D399', color: DARK_GREEN }}
+          >
+            <Shield className="w-5 h-5" />
+            Try It Risk-Free Now
+            <ArrowRight className="w-5 h-5" />
+          </button>
+        </div>
+      </section>
+    </div>
+  )
+}
diff --git a/src/components/lp/pages/LP29SpeedDeal.tsx b/src/components/lp/pages/LP29SpeedDeal.tsx
new file mode 100644
index 0000000..04b0ea6
--- /dev/null
+++ b/src/components/lp/pages/LP29SpeedDeal.tsx
@@ -0,0 +1,408 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import {
+  Zap, ArrowRight, Clock, Shield, Lock,
+  CheckCircle2, Star, Users, TrendingUp,
+  AlertTriangle, ChevronRight, Flame,
+} from 'lucide-react'
+import PayNowForm from '@/components/lp/shared/PayNowForm'
+import CountdownTimer from '@/components/lp/shared/CountdownTimer'
+import TrustBadges from '@/components/lp/shared/TrustBadges'
+import StickyMobileCTA from '@/components/lp/shared/StickyMobileCTA'
+import UrgencyBanner from '@/components/lp/shared/UrgencyBanner'
+import InfluencerBuzz from '@/components/lp/shared/InfluencerBuzz'
+import { PAYMENT_CONFIG } from '@/app/lp/_config/types'
+
+const YELLOW = '#FFC107'
+const RED = '#FF1744'
+const BLACK = '#000000'
+const DARK_GRAY = '#111111'
+
+export default function LP29SpeedDeal() {
+  const [claimedCount, setClaimedCount] = useState(47)
+  const [showPulse, setShowPulse] = useState(true)
+  const [recentBuyer, setRecentBuyer] = useState('')
+  const [showBuyer, setShowBuyer] = useState(false)
+
+  const recentBuyers = [
+    'Maria from TX', 'James from FL', 'Sarah from CA',
+    'David from NY', 'Jennifer from IL', 'Robert from AZ',
+    'Lisa from CO', 'Michael from GA', 'Rachel from PA',
+  ]
+
+  useEffect(() => {
+    // Increment claimed count
+    const claimInterval = setInterval(() => {
+      setClaimedCount(prev => {
+        if (prev >= 63) return prev
+        return prev + (Math.random() > 0.5 ? 1 : 0)
+      })
+    }, 12000)
+
+    // Show recent buyers
+    let buyerIdx = 0
+    const buyerInterval = setInterval(() => {
+      setRecentBuyer(recentBuyers[buyerIdx % recentBuyers.length])
+      setShowBuyer(true)
+      buyerIdx++
+      setTimeout(() => setShowBuyer(false), 3500)
+    }, 7000)
+
+    // Pulse animation
+    const pulseInterval = setInterval(() => {
+      setShowPulse(false)
+      setTimeout(() => setShowPulse(true), 200)
+    }, 3000)
+
+    return () => {
+      clearInterval(claimInterval)
+      clearInterval(buyerInterval)
+      clearInterval(pulseInterval)
+    }
+  }, [])
+
+  const scrollToForm = () => {
+    document.getElementById('signup-form')?.scrollIntoView({ behavior: 'smooth' })
+  }
+
+  return (
+    <div className="min-h-screen bg-black" style={{ fontFamily: 'var(--font-barlow), sans-serif' }}>
+      <UrgencyBanner variant="combined" />
+      <StickyMobileCTA accentColor={YELLOW} buttonText="GRAB THIS DEAL" />
+
+      {/* ===== RECENT BUYER NOTIFICATION ===== */}
+      <div
+        className={`fixed bottom-20 left-4 z-40 transition-all duration-500 ${
+          showBuyer ? 'translate-x-0 opacity-100' : '-translate-x-full opacity-0'
+        }`}
+      >
+        <div className="bg-gray-900 border border-yellow-500/30 rounded-xl px-4 py-3 shadow-xl flex items-center gap-3 max-w-xs">
+          <div className="w-8 h-8 rounded-full bg-green-500 flex items-center justify-center shrink-0">
+            <CheckCircle2 className="w-5 h-5 text-white" />
+          </div>
+          <div>
+            <p className="text-white text-sm font-bold">{recentBuyer}</p>
+            <p className="text-gray-400 text-xs">just grabbed this deal</p>
+          </div>
+        </div>
+      </div>
+
+      {/* ===== HERO ===== */}
+      <section className="pt-20 pb-16 px-4 relative overflow-hidden">
+        {/* Lightning bolt background pattern */}
+        <div className="absolute inset-0 opacity-5">
+          {[...Array(12)].map((_, i) => (
+            <Zap
+              key={i}
+              className="absolute text-yellow-400"
+              style={{
+                width: `${30 + Math.random() * 40}px`,
+                height: `${30 + Math.random() * 40}px`,
+                top: `${Math.random() * 100}%`,
+                left: `${Math.random() * 100}%`,
+                transform: `rotate(${Math.random() * 360}deg)`,
+              }}
+            />
+          ))}
+        </div>
+
+        <div className="max-w-4xl mx-auto text-center relative z-10">
+          {/* Flash deal badge */}
+          <div
+            className={`inline-flex items-center gap-2 px-6 py-3 rounded-full text-sm font-black uppercase tracking-widest mb-8 ${
+              showPulse ? 'animate-pulse' : ''
+            }`}
+            style={{ backgroundColor: RED, color: '#FFFFFF' }}
+          >
+            <Zap className="w-5 h-5" />
+            FLASH DEAL — LIMITED TIME
+            <Zap className="w-5 h-5" />
+          </div>
+
+          {/* Lightning icon */}
+          <div className="mb-6">
+            <Zap
+              className="w-24 h-24 mx-auto"
+              style={{
+                color: YELLOW,
+                filter: 'drop-shadow(0 0 20px rgba(255,193,7,0.5))',
+              }}
+            />
+          </div>
+
+          <h1
+            className="text-5xl sm:text-7xl lg:text-8xl font-black mb-6 tracking-tight"
+            style={{ fontFamily: 'var(--font-bebas), sans-serif', color: YELLOW }}
+          >
+            FLASH DEAL
+          </h1>
+
+          <p className="text-white/60 text-xl sm:text-2xl mb-8 uppercase tracking-wide">
+            This deal self-destructs in
+          </p>
+
+          {/* Giant countdown */}
+          <div className="mb-10">
+            <CountdownTimer
+              minutes={30}
+              variant="flip"
+              bgColor={DARK_GRAY}
+              textColor={YELLOW}
+              accentColor={RED}
+            />
+          </div>
+
+          {/* Price display */}
+          <div className="mb-10">
+            <div className="inline-block relative">
+              <span className="text-3xl sm:text-4xl text-gray-500 line-through font-bold">
+                $59/mo
+              </span>
+              <span className="absolute -top-3 -right-3 text-xs font-bold px-2 py-1 rounded-full" style={{ backgroundColor: RED, color: '#FFFFFF' }}>
+                -34%
+              </span>
+            </div>
+            <div className="mt-4">
+              <span
+                className="text-6xl sm:text-8xl font-black"
+                style={{
+                  fontFamily: 'var(--font-bebas), sans-serif',
+                  color: YELLOW,
+                  textShadow: `0 0 40px rgba(255,193,7,0.3)`,
+                }}
+              >
+                ${PAYMENT_CONFIG.monthlyPrice}
+              </span>
+              <span className="text-2xl sm:text-3xl text-white/60">/mo</span>
+            </div>
+            <p className="text-gray-500 text-lg mt-2">
+              {PAYMENT_CONFIG.totalMonths} months = ${PAYMENT_CONFIG.totalPrice} total{' '}
+              <span className="text-gray-600">|</span>{' '}
+              or ${PAYMENT_CONFIG.oneTimePrice} one-time
+            </p>
+          </div>
+
+          {/* CTA Button */}
+          <button
+            onClick={scrollToForm}
+            className={`inline-flex items-center gap-3 px-12 py-6 rounded-xl text-xl font-black uppercase tracking-wider transition-all hover:scale-105 ${
+              showPulse ? 'animate-pulse' : ''
+            }`}
+            style={{
+              backgroundColor: YELLOW,
+              color: BLACK,
+              boxShadow: `0 0 40px rgba(255,193,7,0.4)`,
+            }}
+          >
+            <Zap className="w-6 h-6" />
+            GRAB THIS DEAL
+            <ArrowRight className="w-6 h-6" />
+          </button>
+
+          {/* Claimed counter */}
+          <div className="mt-8 flex items-center justify-center gap-3">
+            <Flame className="w-5 h-5" style={{ color: RED }} />
+            <span className="text-white/70 text-sm">
+              <span className="font-bold text-white">{claimedCount} people</span> grabbed this deal in the last hour
+            </span>
+          </div>
+        </div>
+      </section>
+
+      {/* ===== WHAT YOU GET — MINIMAL ===== */}
+      <section className="py-12 px-4 border-t border-b" style={{ borderColor: '#222' }}>
+        <div className="max-w-3xl mx-auto">
+          <div className="grid sm:grid-cols-2 gap-4">
+            {[
+              '5 days / 4 nights all-inclusive',
+              'Cancun, Cabo, Riviera Maya, or PV',
+              'All meals + unlimited drinks',
+              'Resort pools, beaches, amenities',
+              'Bring a guest — included free',
+              '18 months to choose your dates',
+            ].map((item, i) => (
+              <div key={i} className="flex items-center gap-3 p-3">
+                <CheckCircle2 className="w-5 h-5 shrink-0" style={{ color: YELLOW }} />
+                <span className="text-white/80 font-medium">{item}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ===== URGENCY STRIP ===== */}
+      <section className="py-6 px-4" style={{ backgroundColor: RED }}>
+        <div className="max-w-3xl mx-auto flex flex-col sm:flex-row items-center justify-center gap-4 text-center">
+          <AlertTriangle className="w-6 h-6 text-white animate-pulse shrink-0" />
+          <p className="text-white font-bold text-lg uppercase tracking-wide">
+            When the timer hits zero, this deal is gone forever
+          </p>
+          <AlertTriangle className="w-6 h-6 text-white animate-pulse shrink-0 hidden sm:block" />
+        </div>
+      </section>
+
+      {/* ===== SECOND COUNTDOWN + PRICE ===== */}
+      <section className="py-16 px-4">
+        <div className="max-w-2xl mx-auto text-center">
+          <h2
+            className="text-4xl sm:text-5xl font-black mb-8 uppercase"
+            style={{ fontFamily: 'var(--font-bebas), sans-serif', color: YELLOW }}
+          >
+            Time Is Running Out
+          </h2>
+          <CountdownTimer
+            minutes={30}
+            variant="flip"
+            bgColor={DARK_GRAY}
+            textColor={YELLOW}
+            accentColor={RED}
+          />
+
+          <div className="mt-10 grid grid-cols-3 gap-4">
+            <div className="bg-gray-900 rounded-xl p-4 border border-gray-800">
+              <p className="text-2xl font-black" style={{ color: YELLOW }}>34%</p>
+              <p className="text-gray-500 text-xs uppercase">Savings</p>
+            </div>
+            <div className="bg-gray-900 rounded-xl p-4 border border-gray-800">
+              <p className="text-2xl font-black" style={{ color: YELLOW }}>$200</p>
+              <p className="text-gray-500 text-xs uppercase">You Save</p>
+            </div>
+            <div className="bg-gray-900 rounded-xl p-4 border border-gray-800">
+              <p className="text-2xl font-black" style={{ color: RED }}>
+                {100 - claimedCount}
+              </p>
+              <p className="text-gray-500 text-xs uppercase">Deals Left</p>
+            </div>
+          </div>
+
+          <button
+            onClick={scrollToForm}
+            className="mt-10 inline-flex items-center gap-3 px-10 py-5 rounded-xl text-lg font-black uppercase tracking-wider transition-all hover:scale-105"
+            style={{ backgroundColor: YELLOW, color: BLACK }}
+          >
+            <Zap className="w-5 h-5" />
+            GRAB IT NOW
+          </button>
+        </div>
+      </section>
+
+      {/* ===== TRUST — MINIMAL ===== */}
+      <section className="py-10 px-4 border-t" style={{ borderColor: '#222' }}>
+        <div className="max-w-3xl mx-auto">
+          <div className="grid grid-cols-2 sm:grid-cols-4 gap-6 text-center">
+            {[
+              { icon: Shield, label: '30-Day Guarantee' },
+              { icon: Lock, label: 'SSL Encrypted' },
+              { icon: Star, label: '4.8/5 Rating' },
+              { icon: Users, label: '12,000+ Travelers' },
+            ].map((item, i) => (
+              <div key={i} className="flex flex-col items-center gap-2">
+                <item.icon className="w-8 h-8" style={{ color: YELLOW }} />
+                <p className="text-white/60 text-sm font-medium">{item.label}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ===== FORM ===== */}
+      <section
+        id="signup-form"
+        className="py-16 px-4 relative"
+        style={{ backgroundColor: DARK_GRAY }}
+      >
+        {/* Animated border */}
+        <div
+          className="absolute inset-x-0 top-0 h-1"
+          style={{
+            background: `linear-gradient(90deg, ${BLACK}, ${YELLOW}, ${RED}, ${YELLOW}, ${BLACK})`,
+            backgroundSize: '200% 100%',
+            animation: 'shimmer 2s linear infinite',
+          }}
+        />
+
+        <style jsx>{`
+          @keyframes shimmer {
+            0% { background-position: 200% 0; }
+            100% { background-position: -200% 0; }
+          }
+        `}</style>
+
+        <div className="max-w-xl mx-auto">
+          <div className="text-center mb-8">
+            <Zap
+              className="w-16 h-16 mx-auto mb-4"
+              style={{ color: YELLOW, filter: 'drop-shadow(0 0 15px rgba(255,193,7,0.4))' }}
+            />
+            <h2
+              className="text-4xl sm:text-5xl font-black mb-4 uppercase"
+              style={{ fontFamily: 'var(--font-bebas), sans-serif', color: YELLOW }}
+            >
+              GRAB THIS DEAL
+            </h2>
+            <div className="flex items-center justify-center gap-4 mb-4">
+              <span className="text-2xl text-gray-500 line-through font-bold">$59/mo</span>
+              <ChevronRight className="w-6 h-6 text-gray-600" />
+              <span className="text-4xl font-black" style={{ color: YELLOW }}>
+                ${PAYMENT_CONFIG.monthlyPrice}/mo
+              </span>
+            </div>
+            <p className="text-gray-500">
+              5 days/4 nights all-inclusive Mexico vacation
+            </p>
+          </div>
+
+          <PayNowForm
+            variant="dark"
+            accentColor={YELLOW}
+            buttonText="GRAB THIS DEAL — $39/mo"
+            className="max-w-md mx-auto"
+          />
+
+          <div className="mt-6 text-center">
+            <p className="text-gray-600 text-sm flex items-center justify-center gap-2">
+              <Lock className="w-4 h-4" style={{ color: YELLOW }} />
+              Secure checkout • 30-day money-back guarantee
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <InfluencerBuzz variant="dark" />
+
+      {/* ===== FINAL COUNTDOWN ===== */}
+      <section className="py-12 px-4 text-center" style={{ backgroundColor: RED }}>
+        <div className="max-w-3xl mx-auto">
+          <h3
+            className="text-3xl sm:text-4xl font-black text-white mb-4 uppercase"
+            style={{ fontFamily: 'var(--font-bebas), sans-serif' }}
+          >
+            Last Chance — Deal Expires When Timer Hits Zero
+          </h3>
+          <CountdownTimer
+            minutes={30}
+            variant="digital"
+            bgColor="rgba(0,0,0,0.3)"
+            textColor="#FFFFFF"
+            accentColor={YELLOW}
+            className="justify-center mb-6"
+          />
+          <button
+            onClick={scrollToForm}
+            className="inline-flex items-center gap-3 px-12 py-6 rounded-xl text-xl font-black uppercase tracking-wider transition-all hover:scale-105"
+            style={{
+              backgroundColor: YELLOW,
+              color: BLACK,
+              boxShadow: `0 0 30px rgba(255,193,7,0.5)`,
+            }}
+          >
+            <Zap className="w-6 h-6" />
+            GRAB THIS DEAL NOW
+            <Zap className="w-6 h-6" />
+          </button>
+        </div>
+      </section>
+    </div>
+  )
+}
diff --git a/src/components/lp/pages/LP30Influencer.tsx b/src/components/lp/pages/LP30Influencer.tsx
new file mode 100644
index 0000000..249855c
--- /dev/null
+++ b/src/components/lp/pages/LP30Influencer.tsx
@@ -0,0 +1,538 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import {
+  Heart, MessageCircle, Share2, Bookmark, Play,
+  Eye, Users, TrendingUp, Star, ArrowRight,
+  CheckCircle2, Shield, Lock, Sparkles,
+  Music, Flame, Send,
+} from 'lucide-react'
+import PayNowForm from '@/components/lp/shared/PayNowForm'
+import CountdownTimer from '@/components/lp/shared/CountdownTimer'
+import TrustBadges from '@/components/lp/shared/TrustBadges'
+import StickyMobileCTA from '@/components/lp/shared/StickyMobileCTA'
+import TikTokCarousel from '@/components/lp/shared/TikTokCarousel'
+import SocialProofTicker from '@/components/lp/shared/SocialProofTicker'
+import TestimonialCard from '@/components/lp/shared/TestimonialCard'
+import FAQAccordion from '@/components/lp/shared/FAQAccordion'
+import UrgencyBanner from '@/components/lp/shared/UrgencyBanner'
+import { PAYMENT_CONFIG, TESTIMONIALS, FAQ_ITEMS } from '@/app/lp/_config/types'
+
+const TIKTOK_PINK = '#FF0050'
+const TIKTOK_CYAN = '#00F2EA'
+const DARK_BG = '#121212'
+const DARKER_BG = '#0A0A0A'
+
+const engagementMetrics = [
+  { icon: Eye, value: '2.4M+', label: 'Views' },
+  { icon: Heart, value: '340K+', label: 'Likes' },
+  { icon: Share2, value: '89K+', label: 'Shares' },
+  { icon: Bookmark, value: '156K+', label: 'Saves' },
+]
+
+const creatorCards = [
+  {
+    handle: '@jessicatravels',
+    followers: '890K',
+    avatar: '/images/cdn/photo-1494790108377-be9c29b29330.jpg',
+    caption: 'OMG this Mexico deal is INSANE. $39/mo for all-inclusive?! I had to check for myself...',
+    likes: '45.2K',
+    comments: '3.1K',
+    shares: '12.8K',
+  },
+  {
+    handle: '@couplesgetaway',
+    followers: '1.2M',
+    avatar: '/images/cdn/photo-1472099645785-5658abf4ff4e.jpg',
+    caption: 'We booked the $39/mo Mexico vacation everyone on TikTok is talking about. Here is what happened...',
+    likes: '78.9K',
+    comments: '5.6K',
+    shares: '21.3K',
+  },
+  {
+    handle: '@budgetqueen',
+    followers: '2.1M',
+    avatar: '/images/cdn/photo-1438761681033-6461ffad8d80.jpg',
+    caption: 'STOP SCROLLING. This is not a drill. All-inclusive Mexico for $39/mo. I am literally shaking.',
+    likes: '124K',
+    comments: '8.9K',
+    shares: '34.7K',
+  },
+]
+
+const viralComments = [
+  { user: '@sunshinevibes', text: 'Just booked!! Cannot wait omg', likes: 342 },
+  { user: '@wanderlust.maya', text: 'Is this for REAL?! $39/mo??', likes: 891 },
+  { user: '@travelwithmark', text: 'Did this last month. It is 100% legit. Cabo was incredible', likes: 1204 },
+  { user: '@beachbum_sarah', text: 'My friend went and said it was the best vacation ever', likes: 567 },
+  { user: '@deals.daily', text: 'This is the best travel deal on TikTok rn no cap', likes: 2341 },
+  { user: '@vacay.mode', text: 'Just sent this to everyone I know lol', likes: 445 },
+]
+
+export default function LP30Influencer() {
+  const [activeComment, setActiveComment] = useState(0)
+  const [likeCount, setLikeCount] = useState(340892)
+
+  useEffect(() => {
+    // Rotate comments
+    const commentInterval = setInterval(() => {
+      setActiveComment(prev => (prev + 1) % viralComments.length)
+    }, 3000)
+
+    // Increment like count
+    const likeInterval = setInterval(() => {
+      setLikeCount(prev => prev + Math.floor(Math.random() * 5) + 1)
+    }, 2000)
+
+    return () => {
+      clearInterval(commentInterval)
+      clearInterval(likeInterval)
+    }
+  }, [])
+
+  const scrollToForm = () => {
+    document.getElementById('signup-form')?.scrollIntoView({ behavior: 'smooth' })
+  }
+
+  const TikTokLogo = ({ className = 'w-6 h-6' }: { className?: string }) => (
+    <svg viewBox="0 0 24 24" className={className} fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+      <path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-2.88 2.5 2.89 2.89 0 0 1-2.88-2.88 2.89 2.89 0 0 1 2.88-2.88c.28 0 .55.04.81.11v-3.51a6.31 6.31 0 0 0-.81-.05A6.34 6.34 0 0 0 3.15 15.2 6.34 6.34 0 0 0 9.49 21.54a6.34 6.34 0 0 0 6.34-6.34V8.73a8.28 8.28 0 0 0 4.82 1.56V6.84a4.85 4.85 0 0 1-1.06-.15z"/>
+    </svg>
+  )
+
+  return (
+    <div className="min-h-screen" style={{ backgroundColor: DARK_BG, fontFamily: 'var(--font-inter), sans-serif' }}>
+      <UrgencyBanner variant="combined" />
+      <StickyMobileCTA accentColor={TIKTOK_PINK} buttonText="Book the Viral Vacation" />
+
+      {/* ===== HERO ===== */}
+      <section className="pt-20 pb-16 px-4 relative overflow-hidden">
+        {/* Gradient orbs */}
+        <div
+          className="absolute top-20 -left-32 w-96 h-96 rounded-full blur-3xl opacity-20"
+          style={{ backgroundColor: TIKTOK_PINK }}
+        />
+        <div
+          className="absolute bottom-0 -right-32 w-96 h-96 rounded-full blur-3xl opacity-20"
+          style={{ backgroundColor: TIKTOK_CYAN }}
+        />
+
+        <div className="max-w-4xl mx-auto text-center relative z-10">
+          {/* TikTok badge */}
+          <div
+            className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full text-sm font-bold mb-8"
+            style={{
+              background: `linear-gradient(135deg, ${TIKTOK_PINK}, ${TIKTOK_CYAN})`,
+              color: '#FFFFFF',
+            }}
+          >
+            <TikTokLogo className="w-5 h-5" />
+            AS SEEN ON TIKTOK
+            <Flame className="w-4 h-4" />
+          </div>
+
+          {/* TikTok icon */}
+          <div className="mb-8 relative inline-block">
+            <div
+              className="w-28 h-28 rounded-3xl flex items-center justify-center mx-auto relative"
+              style={{
+                background: `linear-gradient(135deg, ${TIKTOK_PINK}, #000, ${TIKTOK_CYAN})`,
+                boxShadow: `0 0 60px rgba(255,0,80,0.3), 0 0 60px rgba(0,242,234,0.3)`,
+              }}
+            >
+              <TikTokLogo className="w-14 h-14 text-white" />
+            </div>
+            <div className="absolute -top-2 -right-2 w-10 h-10 rounded-full bg-red-500 flex items-center justify-center text-white text-xs font-bold animate-bounce">
+              LIVE
+            </div>
+          </div>
+
+          <h1
+            className="text-4xl sm:text-5xl lg:text-6xl font-extrabold mb-6 tracking-tight"
+            style={{ fontFamily: 'var(--font-outfit), sans-serif', color: '#FFFFFF' }}
+          >
+            The Vacation{' '}
+            <span
+              className="bg-clip-text text-transparent"
+              style={{ backgroundImage: `linear-gradient(135deg, ${TIKTOK_PINK}, ${TIKTOK_CYAN})` }}
+            >
+              Everyone&apos;s Talking About
+            </span>
+          </h1>
+
+          <p className="text-white/60 text-xl mb-4 max-w-2xl mx-auto">
+            2.4 million views. 340K likes. And counting.
+          </p>
+          <p className="text-white/40 text-lg mb-8">
+            <span className="line-through">$59/mo</span>{' '}
+            <span
+              className="font-bold text-xl bg-clip-text text-transparent"
+              style={{ backgroundImage: `linear-gradient(135deg, ${TIKTOK_PINK}, ${TIKTOK_CYAN})` }}
+            >
+              ${PAYMENT_CONFIG.monthlyPrice}/mo
+            </span>{' '}
+            — 5 days/4 nights all-inclusive Mexico
+          </p>
+
+          <button
+            onClick={scrollToForm}
+            className="inline-flex items-center gap-3 px-10 py-5 rounded-full text-lg font-bold text-white transition-all hover:scale-105 hover:shadow-2xl"
+            style={{
+              background: `linear-gradient(135deg, ${TIKTOK_PINK}, ${TIKTOK_CYAN})`,
+              boxShadow: `0 4px 30px rgba(255,0,80,0.4)`,
+            }}
+          >
+            Book the Viral Vacation
+            <ArrowRight className="w-5 h-5" />
+          </button>
+        </div>
+      </section>
+
+      {/* ===== ENGAGEMENT METRICS ===== */}
+      <section className="py-8 px-4" style={{ backgroundColor: DARKER_BG }}>
+        <div className="max-w-3xl mx-auto grid grid-cols-2 sm:grid-cols-4 gap-4">
+          {engagementMetrics.map((m, i) => (
+            <div key={i} className="text-center p-4 bg-white/5 rounded-2xl border border-white/10">
+              <m.icon
+                className="w-6 h-6 mx-auto mb-2"
+                style={{ color: i % 2 === 0 ? TIKTOK_PINK : TIKTOK_CYAN }}
+              />
+              <p className="text-2xl font-bold text-white">{m.value}</p>
+              <p className="text-white/40 text-sm">{m.label}</p>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* ===== SOCIAL PROOF TICKER ===== */}
+      <SocialProofTicker bgColor={DARK_BG} textColor="#FFFFFF" />
+
+      {/* ===== TIKTOK CAROUSEL — MAIN CONTENT ===== */}
+      <section className="py-4 relative" style={{ backgroundColor: DARK_BG }}>
+        <TikTokCarousel
+          title="Going Viral Right Now"
+          subtitle="Real travelers sharing their Mexico Paradise experience"
+        />
+      </section>
+
+      {/* ===== VIRAL PRICING COUNTDOWN ===== */}
+      <section className="py-12 px-4" style={{ backgroundColor: DARKER_BG }}>
+        <div className="max-w-3xl mx-auto flex flex-col items-center text-center">
+          <p className="text-white/60 text-sm uppercase tracking-widest mb-4 font-semibold">
+            Viral pricing available for
+          </p>
+          <div className="flex justify-center w-full">
+            <CountdownTimer
+              minutes={30}
+              variant="flip"
+              bgColor="#1E1E1E"
+              textColor="#FFFFFF"
+              accentColor={TIKTOK_PINK}
+              className="justify-center"
+            />
+          </div>
+          <p className="text-white/50 text-sm mt-4">
+            <span className="line-through text-white/30">$59/mo</span>{' '}
+            <span className="font-bold text-white">${PAYMENT_CONFIG.monthlyPrice}/mo</span>{' '}
+            — only while the timer lasts
+          </p>
+        </div>
+      </section>
+
+      {/* ===== CREATOR PROFILE CARDS ===== */}
+      <section className="py-16 px-4" style={{ backgroundColor: DARK_BG }}>
+        <div className="max-w-5xl mx-auto">
+          <h2
+            className="text-3xl sm:text-4xl font-extrabold text-center mb-4 text-white"
+            style={{ fontFamily: 'var(--font-outfit), sans-serif' }}
+          >
+            Creators Are{' '}
+            <span
+              className="bg-clip-text text-transparent"
+              style={{ backgroundImage: `linear-gradient(135deg, ${TIKTOK_PINK}, ${TIKTOK_CYAN})` }}
+            >
+              Obsessed
+            </span>
+          </h2>
+          <p className="text-white/40 text-center mb-12 text-lg">
+            Here&apos;s what influencers are posting about Mexico Paradise
+          </p>
+
+          <div className="grid md:grid-cols-3 gap-6">
+            {creatorCards.map((creator, i) => (
+              <div
+                key={i}
+                className="bg-white/5 rounded-3xl border border-white/10 overflow-hidden hover:border-white/20 transition-all hover:shadow-xl"
+              >
+                {/* Creator header */}
+                <div className="p-5 flex items-center gap-3">
+                  <img
+                    src={creator.avatar}
+                    alt={creator.handle}
+                    className="w-12 h-12 rounded-full object-cover border-2"
+                    style={{ borderColor: TIKTOK_PINK }}
+                  />
+                  <div className="flex-1">
+                    <p className="text-white font-bold text-sm">{creator.handle}</p>
+                    <p className="text-white/40 text-xs">{creator.followers} followers</p>
+                  </div>
+                  <TikTokLogo className="w-5 h-5 text-white/40" />
+                </div>
+
+                {/* Video thumbnail placeholder */}
+                <div className="relative aspect-[9/12] bg-gradient-to-b from-gray-800 to-gray-900 flex items-center justify-center">
+                  <img
+                    src={
+                      i === 0
+                        ? '/images/cdn/photo-1507525428034-b723cf961d3e.jpg'
+                        : i === 1
+                          ? '/images/cdn/photo-1510097467424-192d713fd8b2.jpg'
+                          : '/images/cdn/photo-1512100356356-de1b84283e18.jpg'
+                    }
+                    alt="Vacation"
+                    className="absolute inset-0 w-full h-full object-cover"
+                  />
+                  <div className="absolute inset-0 bg-black/30 flex items-center justify-center">
+                    <div className="w-16 h-16 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center">
+                      <Play className="w-8 h-8 text-white ml-1" />
+                    </div>
+                  </div>
+                  {/* Caption overlay */}
+                  <div className="absolute bottom-0 inset-x-0 p-4 bg-gradient-to-t from-black/80 to-transparent">
+                    <p className="text-white text-sm">{creator.caption}</p>
+                  </div>
+                </div>
+
+                {/* Engagement bar */}
+                <div className="p-4 flex items-center justify-between text-white/50 text-sm">
+                  <span className="flex items-center gap-1">
+                    <Heart className="w-4 h-4" style={{ color: TIKTOK_PINK }} />
+                    {creator.likes}
+                  </span>
+                  <span className="flex items-center gap-1">
+                    <MessageCircle className="w-4 h-4" />
+                    {creator.comments}
+                  </span>
+                  <span className="flex items-center gap-1">
+                    <Share2 className="w-4 h-4" style={{ color: TIKTOK_CYAN }} />
+                    {creator.shares}
+                  </span>
+                  <span className="flex items-center gap-1">
+                    <Bookmark className="w-4 h-4" />
+                    Save
+                  </span>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ===== VIRAL COMMENTS ===== */}
+      <section className="py-12 px-4" style={{ backgroundColor: DARKER_BG }}>
+        <div className="max-w-2xl mx-auto">
+          <h3 className="text-xl font-bold text-white/80 text-center mb-6 flex items-center justify-center gap-2">
+            <MessageCircle className="w-5 h-5" style={{ color: TIKTOK_CYAN }} />
+            Comments Going Wild
+          </h3>
+
+          <div className="space-y-3">
+            {viralComments.map((comment, i) => (
+              <div
+                key={i}
+                className={`flex items-start gap-3 p-4 rounded-xl transition-all duration-500 ${
+                  activeComment === i
+                    ? 'bg-white/10 border border-white/20 scale-[1.02]'
+                    : 'bg-white/5 border border-transparent'
+                }`}
+              >
+                <div className="w-8 h-8 rounded-full bg-gradient-to-r from-pink-500 to-cyan-500 flex items-center justify-center text-white text-xs font-bold shrink-0">
+                  {comment.user.charAt(1).toUpperCase()}
+                </div>
+                <div className="flex-1">
+                  <p className="text-white/40 text-xs font-medium">{comment.user}</p>
+                  <p className="text-white/80 text-sm mt-1">{comment.text}</p>
+                </div>
+                <div className="flex items-center gap-1 text-white/30 text-xs shrink-0">
+                  <Heart className="w-3 h-3" />
+                  {comment.likes.toLocaleString()}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ===== WHAT'S INCLUDED ===== */}
+      <section className="py-16 px-4" style={{ backgroundColor: DARK_BG }}>
+        <div className="max-w-3xl mx-auto">
+          <h2
+            className="text-3xl font-extrabold text-center mb-8 text-white"
+            style={{ fontFamily: 'var(--font-outfit), sans-serif' }}
+          >
+            What You Get for{' '}
+            <span
+              className="bg-clip-text text-transparent"
+              style={{ backgroundImage: `linear-gradient(135deg, ${TIKTOK_PINK}, ${TIKTOK_CYAN})` }}
+            >
+              ${PAYMENT_CONFIG.monthlyPrice}/mo
+            </span>
+          </h2>
+
+          <div className="grid sm:grid-cols-2 gap-4">
+            {[
+              '5 days / 4 nights all-inclusive',
+              'Cancun, Cabo, Riviera Maya, or PV',
+              'All meals + unlimited drinks',
+              'Resort pools, beaches, amenities',
+              'Bring a guest — included free',
+              '18 months to choose your dates',
+              '30-day money-back guarantee',
+              'Flexible rescheduling',
+            ].map((item, i) => (
+              <div key={i} className="flex items-center gap-3 p-4 bg-white/5 rounded-xl border border-white/10">
+                <CheckCircle2
+                  className="w-5 h-5 shrink-0"
+                  style={{ color: i % 2 === 0 ? TIKTOK_PINK : TIKTOK_CYAN }}
+                />
+                <span className="text-white/80 font-medium">{item}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ===== TESTIMONIALS ===== */}
+      <section className="py-16 px-4" style={{ backgroundColor: DARKER_BG }}>
+        <div className="max-w-5xl mx-auto">
+          <h2
+            className="text-3xl font-extrabold text-center mb-12 text-white"
+            style={{ fontFamily: 'var(--font-outfit), sans-serif' }}
+          >
+            Real Travelers. Real Stories.
+          </h2>
+          <div className="grid md:grid-cols-3 gap-6">
+            {TESTIMONIALS.slice(0, 3).map((t, i) => (
+              <TestimonialCard key={i} {...t} variant="dark" />
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ===== FORM ===== */}
+      <section
+        id="signup-form"
+        className="py-16 px-4 relative overflow-hidden"
+        style={{ backgroundColor: DARK_BG }}
+      >
+        {/* Gradient orbs */}
+        <div
+          className="absolute top-0 -left-32 w-64 h-64 rounded-full blur-3xl opacity-10"
+          style={{ backgroundColor: TIKTOK_PINK }}
+        />
+        <div
+          className="absolute bottom-0 -right-32 w-64 h-64 rounded-full blur-3xl opacity-10"
+          style={{ backgroundColor: TIKTOK_CYAN }}
+        />
+
+        <div className="max-w-xl mx-auto relative z-10">
+          <div className="text-center mb-8">
+            <div
+              className="inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm font-bold mb-4"
+              style={{ background: `linear-gradient(135deg, ${TIKTOK_PINK}, ${TIKTOK_CYAN})`, color: '#FFFFFF' }}
+            >
+              <TikTokLogo className="w-4 h-4" />
+              VIRAL PRICING — LIMITED TIME
+            </div>
+            <h2
+              className="text-3xl font-extrabold mb-2 text-white"
+              style={{ fontFamily: 'var(--font-outfit), sans-serif' }}
+            >
+              Book the Vacation Everyone&apos;s Talking About
+            </h2>
+            <p className="text-white/50">
+              <span className="line-through text-white/30">$59/mo</span>{' '}
+              <span
+                className="font-bold text-xl bg-clip-text text-transparent"
+                style={{ backgroundImage: `linear-gradient(135deg, ${TIKTOK_PINK}, ${TIKTOK_CYAN})` }}
+              >
+                ${PAYMENT_CONFIG.monthlyPrice}/mo
+              </span>{' '}
+              — 5 days/4 nights all-inclusive
+            </p>
+          </div>
+
+          <PayNowForm
+            variant="dark"
+            accentColor={TIKTOK_PINK}
+            buttonText={`Book the Viral Vacation — $${PAYMENT_CONFIG.monthlyPrice}/mo`}
+            className="max-w-md mx-auto"
+          />
+
+          <div className="mt-6 text-center">
+            <p className="text-white/30 text-sm flex items-center justify-center gap-2">
+              <Lock className="w-4 h-4" />
+              Secure checkout • 30-day money-back guarantee
+            </p>
+          </div>
+
+          <div className="mt-4">
+            <TrustBadges variant="compact" textColor="rgba(255,255,255,0.3)" />
+          </div>
+        </div>
+      </section>
+
+      {/* ===== FAQ ===== */}
+      <section className="py-16 px-4" style={{ backgroundColor: DARKER_BG }}>
+        <div className="max-w-2xl mx-auto">
+          <h2
+            className="text-3xl font-extrabold text-center mb-8 text-white"
+            style={{ fontFamily: 'var(--font-outfit), sans-serif' }}
+          >
+            FAQ
+          </h2>
+          <FAQAccordion variant="dark" />
+        </div>
+      </section>
+
+      {/* ===== FINAL CTA ===== */}
+      <section className="py-12 px-4 text-center relative overflow-hidden" style={{ backgroundColor: DARK_BG }}>
+        <div
+          className="absolute inset-0 opacity-20"
+          style={{ background: `linear-gradient(135deg, ${TIKTOK_PINK}, transparent, ${TIKTOK_CYAN})` }}
+        />
+        <div className="max-w-3xl mx-auto relative z-10 flex flex-col items-center">
+          <CountdownTimer
+            minutes={30}
+            variant="digital"
+            bgColor="#1E1E1E"
+            textColor="#FFFFFF"
+            accentColor={TIKTOK_PINK}
+            className="justify-center mb-6"
+          />
+          <h3
+            className="text-2xl font-extrabold text-white mb-2"
+            style={{ fontFamily: 'var(--font-outfit), sans-serif' }}
+          >
+            Don&apos;t Just Watch the Videos — Live the Experience
+          </h3>
+          <p className="text-white/40 mb-6">
+            Viral pricing expires when the timer hits zero. Don&apos;t lose this.
+          </p>
+          <button
+            onClick={scrollToForm}
+            className="inline-flex items-center gap-3 px-10 py-5 rounded-full text-lg font-bold text-white transition-all hover:scale-105"
+            style={{
+              background: `linear-gradient(135deg, ${TIKTOK_PINK}, ${TIKTOK_CYAN})`,
+              boxShadow: `0 4px 30px rgba(255,0,80,0.3)`,
+            }}
+          >
+            <TikTokLogo className="w-5 h-5" />
+            Book the Viral Vacation
+            <ArrowRight className="w-5 h-5" />
+          </button>
+        </div>
+      </section>
+    </div>
+  )
+}
diff --git a/src/components/lp/pages/LP31BucketList.tsx b/src/components/lp/pages/LP31BucketList.tsx
new file mode 100644
index 0000000..2ceca62
--- /dev/null
+++ b/src/components/lp/pages/LP31BucketList.tsx
@@ -0,0 +1,470 @@
+'use client'
+
+import { useState } from 'react'
+import {
+  Check, MapPin, Palmtree, Sun, Waves, Camera,
+  GlassWater, Compass, Star, Clock, ArrowRight,
+  Sparkles, Heart, Shield,
+} from 'lucide-react'
+import EbookCaptureForm from '@/components/lp/shared/EbookCaptureForm'
+import PayNowForm from '@/components/lp/shared/PayNowForm'
+import TestimonialCard from '@/components/lp/shared/TestimonialCard'
+import FAQAccordion from '@/components/lp/shared/FAQAccordion'
+import TrustBadges from '@/components/lp/shared/TrustBadges'
+import StickyMobileCTA from '@/components/lp/shared/StickyMobileCTA'
+import DestinationCarousel from '@/components/lp/shared/DestinationCarousel'
+import CountdownTimer from '@/components/lp/shared/CountdownTimer'
+import SocialProofTicker from '@/components/lp/shared/SocialProofTicker'
+import UrgencyBanner from '@/components/lp/shared/UrgencyBanner'
+import InfluencerBuzz from '@/components/lp/shared/InfluencerBuzz'
+import { PAYMENT_CONFIG, TESTIMONIALS, FAQ_ITEMS } from '@/app/lp/_config/types'
+
+const ORANGE = '#F97316'
+const DARK = '#1C1917'
+const WARM_WHITE = '#FFFBEB'
+
+const bucketListItems = [
+  { icon: Sun, text: 'Watch a Mexican sunset from your private balcony', checked: false },
+  { icon: Waves, text: 'Swim in an ancient cenote surrounded by jungle', checked: false },
+  { icon: GlassWater, text: 'Sip unlimited all-inclusive cocktails on the beach', checked: false },
+  { icon: Camera, text: 'Take photos at ancient Mayan ruins', checked: false },
+  { icon: Compass, text: 'Explore hidden beaches only locals know about', checked: false },
+  { icon: Palmtree, text: 'Fall asleep to the sound of ocean waves', checked: false },
+  { icon: Heart, text: 'Create memories that last a lifetime', checked: false },
+  { icon: Star, text: 'Stay at a 5-star all-inclusive resort', checked: false },
+]
+
+const dailyCosts = [
+  { label: 'Morning coffee', cost: '$5.50' },
+  { label: 'Lunch out', cost: '$14.00' },
+  { label: 'Streaming service', cost: '$1.80' },
+  { label: 'This vacation', cost: '$1.30', highlight: true },
+]
+
+export default function LP31BucketList() {
+  const [checkedItems, setCheckedItems] = useState<boolean[]>(
+    new Array(bucketListItems.length).fill(false)
+  )
+
+  const toggleItem = (index: number) => {
+    setCheckedItems(prev => {
+      const next = [...prev]
+      next[index] = !next[index]
+      return next
+    })
+  }
+
+  const checkedCount = checkedItems.filter(Boolean).length
+
+  return (
+    <div
+      className="min-h-screen"
+      style={{
+        fontFamily: 'var(--font-nunito-sans), sans-serif',
+      }}
+    >
+      <UrgencyBanner variant="countdown" />
+
+      {/* Hero */}
+      <section className="relative min-h-[90vh] flex items-center justify-center overflow-hidden pt-20">
+        <div className="absolute inset-0">
+          <img
+            src="/images/cdn/photo-1518638150340-f706e86654de.jpg"
+            alt="Dramatic Mexican landscape with ancient ruins"
+            className="w-full h-full object-cover"
+          />
+          <div
+            className="absolute inset-0"
+            style={{
+              background: `linear-gradient(135deg, ${DARK}ee 0%, ${DARK}aa 40%, ${ORANGE}55 100%)`,
+            }}
+          />
+        </div>
+
+        <div className="relative z-10 max-w-4xl mx-auto px-6 text-center text-white">
+          <div
+            className="inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm font-bold mb-6"
+            style={{ backgroundColor: `${ORANGE}33`, border: `1px solid ${ORANGE}66` }}
+          >
+            <Compass className="w-4 h-4" style={{ color: ORANGE }} />
+            <span>YOUR ADVENTURE AWAITS</span>
+          </div>
+
+          <h1
+            className="text-4xl md:text-6xl lg:text-7xl font-bold mb-6 leading-tight"
+            style={{ fontFamily: 'var(--font-josefin), sans-serif' }}
+          >
+            Life&apos;s Too Short
+            <br />
+            for &ldquo;<span style={{ color: ORANGE }}>Someday</span>&rdquo;
+          </h1>
+
+          <p className="text-lg md:text-xl text-white/80 mb-3 max-w-2xl mx-auto leading-relaxed">
+            Stop scrolling through travel photos wishing you were there.
+            It&apos;s time to check off your Mexico bucket list.
+          </p>
+
+          <p className="text-base text-white/60 mb-10">
+            5 days, 4 nights, all-inclusive &mdash; starting at just{' '}
+            <span className="line-through text-white/40">$59/mo</span>{' '}
+            <span className="font-bold" style={{ color: ORANGE }}>
+              ${PAYMENT_CONFIG.monthlyPrice}/mo
+            </span>
+          </p>
+
+          <a
+            href="#signup-form"
+            className="inline-flex items-center gap-2 px-8 py-4 rounded-full text-lg font-bold text-white transition-transform hover:scale-105"
+            style={{ backgroundColor: ORANGE }}
+          >
+            Start Checking Off Your List <ArrowRight className="w-5 h-5" />
+          </a>
+        </div>
+
+        <div className="absolute bottom-0 left-0 right-0">
+          <svg viewBox="0 0 1440 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M0 40C360 80 720 0 1080 40C1260 60 1380 50 1440 40V80H0V40Z" fill={WARM_WHITE} />
+          </svg>
+        </div>
+      </section>
+
+      <SocialProofTicker />
+
+      {/* Interactive Bucket List */}
+      <section className="py-20 px-6" style={{ backgroundColor: WARM_WHITE }}>
+        <div className="max-w-3xl mx-auto">
+          <div className="text-center mb-12">
+            <h2
+              className="text-3xl md:text-5xl font-bold mb-4"
+              style={{ color: DARK, fontFamily: 'var(--font-josefin), sans-serif' }}
+            >
+              Your Mexico Bucket List
+            </h2>
+            <p style={{ color: `${DARK}88` }}>
+              Tap to check off your dream experiences &mdash; then make them all happen
+            </p>
+          </div>
+
+          <div className="space-y-3 mb-8">
+            {bucketListItems.map((item, index) => (
+              <button
+                key={item.text}
+                onClick={() => toggleItem(index)}
+                className="w-full flex items-center gap-4 p-4 rounded-xl text-left transition-all duration-300 group"
+                style={{
+                  backgroundColor: checkedItems[index] ? `${ORANGE}15` : 'white',
+                  border: `2px solid ${checkedItems[index] ? ORANGE : '#E5E7EB'}`,
+                }}
+              >
+                <div
+                  className="w-8 h-8 rounded-lg flex items-center justify-center shrink-0 transition-colors"
+                  style={{
+                    backgroundColor: checkedItems[index] ? ORANGE : 'transparent',
+                    border: `2px solid ${checkedItems[index] ? ORANGE : '#D1D5DB'}`,
+                  }}
+                >
+                  {checkedItems[index] && <Check className="w-5 h-5 text-white" />}
+                </div>
+                <div className="flex items-center gap-3 flex-1">
+                  <item.icon
+                    className="w-5 h-5 shrink-0"
+                    style={{ color: checkedItems[index] ? ORANGE : '#9CA3AF' }}
+                  />
+                  <span
+                    className="font-medium transition-colors"
+                    style={{
+                      color: checkedItems[index] ? DARK : '#4B5563',
+                      textDecoration: checkedItems[index] ? 'line-through' : 'none',
+                    }}
+                  >
+                    {item.text}
+                  </span>
+                </div>
+              </button>
+            ))}
+          </div>
+
+          {/* Progress Indicator */}
+          <div className="text-center mb-8">
+            <div
+              className="inline-flex items-center gap-3 px-6 py-3 rounded-full"
+              style={{ backgroundColor: `${ORANGE}15` }}
+            >
+              <span className="text-sm font-semibold" style={{ color: DARK }}>
+                {checkedCount}/{bucketListItems.length} checked
+              </span>
+              <div className="w-32 h-2 bg-gray-200 rounded-full overflow-hidden">
+                <div
+                  className="h-full rounded-full transition-all duration-500"
+                  style={{
+                    backgroundColor: ORANGE,
+                    width: `${(checkedCount / bucketListItems.length) * 100}%`,
+                  }}
+                />
+              </div>
+            </div>
+          </div>
+
+          <div
+            className="rounded-2xl p-8 text-center"
+            style={{ backgroundColor: DARK }}
+          >
+            <h3
+              className="text-2xl md:text-3xl font-bold text-white mb-3"
+              style={{ fontFamily: 'var(--font-josefin), sans-serif' }}
+            >
+              Check them <span style={{ color: ORANGE }}>ALL</span> off for{' '}
+              <span style={{ color: ORANGE }}>$1.30/day</span>
+            </h3>
+            <p className="text-white/60 text-sm mb-1">
+              That&apos;s less than a cup of coffee. Every. Single. Day.
+            </p>
+            <p className="text-white/40 text-xs">
+              <span className="line-through">$59/mo</span> &rarr;{' '}
+              <span className="font-bold" style={{ color: ORANGE }}>
+                ${PAYMENT_CONFIG.monthlyPrice}/mo x {PAYMENT_CONFIG.totalMonths} months
+              </span>{' '}
+              or ${PAYMENT_CONFIG.oneTimePrice} one-time
+            </p>
+          </div>
+        </div>
+      </section>
+
+      {/* Destination Carousel */}
+      <section className="py-20 px-6" style={{ backgroundColor: 'white' }}>
+        <div className="max-w-5xl mx-auto">
+          <div className="text-center mb-12">
+            <h2
+              className="text-3xl md:text-4xl font-bold mb-3"
+              style={{ color: DARK, fontFamily: 'var(--font-josefin), sans-serif' }}
+            >
+              Choose Your Adventure
+            </h2>
+            <p style={{ color: `${DARK}88` }}>
+              Four stunning destinations, one unbeatable price
+            </p>
+          </div>
+          <DestinationCarousel />
+        </div>
+      </section>
+
+      {/* Daily Cost Comparison */}
+      <section className="py-20 px-6" style={{ backgroundColor: WARM_WHITE }}>
+        <div className="max-w-3xl mx-auto">
+          <h2
+            className="text-3xl md:text-4xl font-bold text-center mb-12"
+            style={{ color: DARK, fontFamily: 'var(--font-josefin), sans-serif' }}
+          >
+            What Does <span style={{ color: ORANGE }}>$1.30/Day</span> Look Like?
+          </h2>
+
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-10">
+            {dailyCosts.map((item) => (
+              <div
+                key={item.label}
+                className="rounded-xl p-6 text-center"
+                style={{
+                  backgroundColor: item.highlight ? ORANGE : 'white',
+                  border: item.highlight ? 'none' : '1px solid #E5E7EB',
+                  transform: item.highlight ? 'scale(1.05)' : 'none',
+                }}
+              >
+                <p
+                  className="text-2xl font-bold mb-2"
+                  style={{ color: item.highlight ? 'white' : DARK }}
+                >
+                  {item.cost}
+                </p>
+                <p
+                  className="text-sm"
+                  style={{ color: item.highlight ? 'white' : '#6B7280' }}
+                >
+                  {item.label}
+                </p>
+                {item.highlight && (
+                  <p className="text-xs mt-2 text-white/80 font-bold">PER DAY</p>
+                )}
+              </div>
+            ))}
+          </div>
+
+          <p className="text-center text-sm" style={{ color: `${DARK}88` }}>
+            If you can afford a coffee, you can afford paradise. The question isn&apos;t
+            &ldquo;can I?&rdquo; &mdash; it&apos;s &ldquo;why haven&apos;t I yet?&rdquo;
+          </p>
+        </div>
+      </section>
+
+      {/* Countdown + Ebook Capture */}
+      <section
+        className="py-20 px-6"
+        style={{
+          background: `linear-gradient(135deg, ${DARK} 0%, ${DARK}ee 100%)`,
+        }}
+        id="signup-form"
+      >
+        <div className="max-w-2xl mx-auto text-center">
+          <Sparkles className="w-10 h-10 mx-auto mb-4" style={{ color: ORANGE }} />
+
+          <h2
+            className="text-3xl md:text-4xl font-bold text-white mb-3"
+            style={{ fontFamily: 'var(--font-josefin), sans-serif' }}
+          >
+            Get the Complete Bucket List Guide
+          </h2>
+          <p className="text-white/70 mb-2">
+            Free e-book: &ldquo;Budget Luxury Travel&rdquo; &mdash; insider tips, packing lists,
+            and the best-kept secrets of Mexico
+          </p>
+          <p className="text-white/50 text-sm mb-4">
+            Free guide + special pricing available for:
+          </p>
+
+          <div className="flex justify-center mb-8">
+            <CountdownTimer
+              minutes={30}
+              variant="flip"
+              accentColor={ORANGE}
+              bgColor="#292524"
+            />
+          </div>
+
+          <div className="max-w-md mx-auto mb-4">
+            <EbookCaptureForm
+              sourceLp="bucket-list"
+              accentColor={ORANGE}
+              buttonText="Get the Complete Bucket List Guide"
+              variant="card"
+              className="bg-white/5 border-white/10 text-white"
+            />
+          </div>
+
+          <p className="text-white/40 text-xs flex items-center justify-center gap-1">
+            <Shield className="w-3 h-3" /> We never share your email. Unsubscribe anytime.
+          </p>
+        </div>
+      </section>
+
+      {/* Pay Now */}
+      <section className="py-20 px-6" style={{ backgroundColor: WARM_WHITE }}>
+        <div className="max-w-xl mx-auto">
+          <div className="text-center mb-10">
+            <h2
+              className="text-3xl md:text-4xl font-bold mb-3"
+              style={{ color: DARK, fontFamily: 'var(--font-josefin), sans-serif' }}
+            >
+              Ready to Check Off Your List?
+            </h2>
+            <p style={{ color: `${DARK}88` }}>
+              Don&apos;t let &ldquo;someday&rdquo; turn into &ldquo;never&rdquo;
+            </p>
+          </div>
+
+          <div
+            className="rounded-2xl p-8 shadow-lg"
+            style={{
+              backgroundColor: 'white',
+              borderTop: `4px solid ${ORANGE}`,
+            }}
+          >
+            <div className="text-center mb-6">
+              <p className="text-sm line-through" style={{ color: '#9CA3AF' }}>
+                $59/mo
+              </p>
+              <span className="text-5xl font-bold" style={{ color: ORANGE }}>
+                ${PAYMENT_CONFIG.monthlyPrice}
+              </span>
+              <span style={{ color: '#6B7280' }}>
+                /mo x {PAYMENT_CONFIG.totalMonths} months
+              </span>
+              <p className="text-sm mt-1" style={{ color: '#9CA3AF' }}>
+                or ${PAYMENT_CONFIG.oneTimePrice} one-time &middot; 30-day money-back guarantee
+              </p>
+            </div>
+
+            <PayNowForm
+              accentColor={ORANGE}
+              buttonText="Start My Adventure!"
+            />
+          </div>
+
+          <TrustBadges variant="compact" className="mt-6" />
+        </div>
+      </section>
+
+      {/* Testimonials */}
+      <section className="py-20 px-6" style={{ backgroundColor: 'white' }}>
+        <div className="max-w-5xl mx-auto">
+          <h2
+            className="text-3xl md:text-4xl font-bold text-center mb-12"
+            style={{ color: DARK, fontFamily: 'var(--font-josefin), sans-serif' }}
+          >
+            They Checked Off Their List
+          </h2>
+          <div className="grid md:grid-cols-3 gap-6">
+            {TESTIMONIALS.slice(0, 3).map((t) => (
+              <TestimonialCard
+                key={t.name}
+                quote={t.quote}
+                name={t.name}
+                location={t.location}
+                photo={t.photo}
+              />
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* FAQ */}
+      <InfluencerBuzz />
+
+      <section className="py-20 px-6" style={{ backgroundColor: WARM_WHITE }}>
+        <div className="max-w-2xl mx-auto">
+          <h2
+            className="text-3xl font-bold text-center mb-10"
+            style={{ color: DARK, fontFamily: 'var(--font-josefin), sans-serif' }}
+          >
+            Questions? We&apos;ve Got Answers
+          </h2>
+          <FAQAccordion />
+        </div>
+      </section>
+
+      {/* Final CTA */}
+      <section
+        className="py-16 px-6 text-center"
+        style={{
+          background: `linear-gradient(135deg, ${ORANGE} 0%, ${DARK} 100%)`,
+        }}
+      >
+        <Compass className="w-8 h-8 mx-auto mb-4 text-white" />
+        <h2
+          className="text-2xl md:text-3xl font-bold text-white mb-3"
+          style={{ fontFamily: 'var(--font-josefin), sans-serif' }}
+        >
+          &ldquo;Someday&rdquo; Is Today
+        </h2>
+        <p className="text-white/60 mb-2 text-sm">
+          This price disappears when the timer hits zero. Don&apos;t miss it.
+        </p>
+        <div className="flex justify-center mb-6">
+          <CountdownTimer minutes={30} variant="minimal" accentColor="white" />
+        </div>
+        <div className="max-w-md mx-auto">
+          <EbookCaptureForm
+            sourceLp="bucket-list"
+            accentColor={ORANGE}
+            buttonText="Get My Free Bucket List Guide"
+            variant="inline"
+          />
+        </div>
+      </section>
+
+      <StickyMobileCTA
+        accentColor={ORANGE}
+        buttonText="Get Free Guide"
+        targetId="signup-form"
+      />
+    </div>
+  )
+}
diff --git a/src/components/lp/pages/LP32DealBreaker.tsx b/src/components/lp/pages/LP32DealBreaker.tsx
new file mode 100644
index 0000000..d951f84
--- /dev/null
+++ b/src/components/lp/pages/LP32DealBreaker.tsx
@@ -0,0 +1,507 @@
+'use client'
+
+import { useState } from 'react'
+import {
+  Check, X, TrendingDown, Shield, Zap, Award,
+  ArrowRight, Calculator, BadgeDollarSign, Star,
+  ThumbsUp, ChevronDown, AlertTriangle,
+} from 'lucide-react'
+import EbookCaptureForm from '@/components/lp/shared/EbookCaptureForm'
+import PayNowForm from '@/components/lp/shared/PayNowForm'
+import ComparisonTable from '@/components/lp/shared/ComparisonTable'
+import TestimonialCard from '@/components/lp/shared/TestimonialCard'
+import FAQAccordion from '@/components/lp/shared/FAQAccordion'
+import TrustBadges from '@/components/lp/shared/TrustBadges'
+import StickyMobileCTA from '@/components/lp/shared/StickyMobileCTA'
+import CountdownTimer from '@/components/lp/shared/CountdownTimer'
+import SocialProofTicker from '@/components/lp/shared/SocialProofTicker'
+import UrgencyBanner from '@/components/lp/shared/UrgencyBanner'
+import InfluencerBuzz from '@/components/lp/shared/InfluencerBuzz'
+import { PAYMENT_CONFIG, TESTIMONIALS, FAQ_ITEMS } from '@/app/lp/_config/types'
+
+const BLUE = '#1E40AF'
+const RED = '#DC2626'
+const GREEN = '#16A34A'
+const LIGHT_BLUE = '#EFF6FF'
+const LIGHT_GREEN = '#F0FDF4'
+
+interface CompetitorPrice {
+  name: string
+  price: number
+  allInclusive: boolean
+  paymentPlan: boolean
+  color: string
+}
+
+const competitors: CompetitorPrice[] = [
+  { name: 'Expedia', price: 2800, allInclusive: false, paymentPlan: false, color: '#F59E0B' },
+  { name: 'Hotels.com', price: 2600, allInclusive: false, paymentPlan: false, color: RED },
+  { name: 'Booking.com', price: 3100, allInclusive: false, paymentPlan: false, color: '#2563EB' },
+  { name: 'Direct Booking', price: 3200, allInclusive: false, paymentPlan: false, color: '#7C3AED' },
+]
+
+const savingsFeatures = [
+  { label: '5 Days / 4 Nights', us: true, them: true },
+  { label: 'All Meals Included', us: true, them: false },
+  { label: 'Unlimited Drinks', us: true, them: false },
+  { label: 'Resort Amenities', us: true, them: true },
+  { label: 'Payment Plan ($39/mo)', us: true, them: false },
+  { label: '30-Day Money Back', us: true, them: false },
+  { label: 'Flexible Dates (18 mo)', us: true, them: false },
+  { label: 'Price Guarantee', us: true, them: false },
+]
+
+export default function LP32DealBreaker() {
+  const [showCalculator, setShowCalculator] = useState(false)
+  const averageCompetitorPrice = Math.round(
+    competitors.reduce((sum, c) => sum + c.price, 0) / competitors.length
+  )
+  const savings = averageCompetitorPrice - PAYMENT_CONFIG.oneTimePrice
+
+  return (
+    <div
+      className="min-h-screen"
+      style={{ fontFamily: 'var(--font-ibm-plex), sans-serif' }}
+    >
+      <UrgencyBanner variant="countdown" />
+
+      {/* Hero */}
+      <section
+        className="relative min-h-[90vh] flex items-center justify-center overflow-hidden pt-20"
+        style={{ backgroundColor: BLUE }}
+      >
+        <div className="absolute inset-0 opacity-10">
+          <div
+            className="w-full h-full"
+            style={{
+              backgroundImage:
+                'repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(255,255,255,0.05) 20px, rgba(255,255,255,0.05) 40px)',
+            }}
+          />
+        </div>
+
+        <div className="relative z-10 max-w-4xl mx-auto px-6 text-center text-white">
+          <div
+            className="inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm font-bold mb-6"
+            style={{ backgroundColor: `${GREEN}33`, border: `1px solid ${GREEN}66` }}
+          >
+            <TrendingDown className="w-4 h-4" style={{ color: GREEN }} />
+            <span style={{ color: GREEN }}>LOWEST PRICE GUARANTEE</span>
+          </div>
+
+          <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold mb-6 leading-tight">
+            We <span style={{ color: '#FBBF24' }}>Dare</span> You to Find
+            <br />
+            a Better Deal
+          </h1>
+
+          <p className="text-lg md:text-xl text-white/80 mb-3 max-w-2xl mx-auto">
+            We compared our price to every major booking platform.
+            The result? It&apos;s not even close.
+          </p>
+
+          <div className="flex items-center justify-center gap-4 mb-10">
+            <div className="text-center">
+              <p className="text-sm text-white/60 uppercase tracking-wide">Average OTA Price</p>
+              <p className="text-3xl font-bold line-through" style={{ color: RED }}>
+                ${averageCompetitorPrice.toLocaleString()}
+              </p>
+            </div>
+            <ArrowRight className="w-6 h-6 text-white/40" />
+            <div className="text-center">
+              <p className="text-sm text-white/60 uppercase tracking-wide">Our Price</p>
+              <p className="text-3xl font-bold" style={{ color: GREEN }}>
+                ${PAYMENT_CONFIG.oneTimePrice}
+              </p>
+            </div>
+          </div>
+
+          <a
+            href="#signup-form"
+            className="inline-flex items-center gap-2 px-8 py-4 rounded-lg text-lg font-bold text-white transition-all hover:scale-105"
+            style={{ backgroundColor: GREEN }}
+          >
+            See the Full Comparison <ArrowRight className="w-5 h-5" />
+          </a>
+        </div>
+      </section>
+
+      <SocialProofTicker />
+
+      {/* Price Comparison Bars */}
+      <section className="py-20 px-6" style={{ backgroundColor: LIGHT_BLUE }}>
+        <div className="max-w-4xl mx-auto">
+          <div className="text-center mb-14">
+            <h2 className="text-3xl md:text-4xl font-bold mb-3" style={{ color: BLUE }}>
+              Side-by-Side Price Comparison
+            </h2>
+            <p style={{ color: `${BLUE}88` }}>
+              Same destination. Same dates. Same quality. Wildly different prices.
+            </p>
+          </div>
+
+          {/* Visual Bar Chart */}
+          <div className="space-y-4 mb-12">
+            {competitors.map((comp) => {
+              const percentage = (comp.price / 3500) * 100
+              return (
+                <div key={comp.name} className="flex items-center gap-4">
+                  <div className="w-28 text-right">
+                    <span className="text-sm font-semibold" style={{ color: BLUE }}>
+                      {comp.name}
+                    </span>
+                  </div>
+                  <div className="flex-1 h-10 bg-white rounded-lg overflow-hidden relative">
+                    <div
+                      className="h-full rounded-lg flex items-center justify-end pr-3 transition-all duration-1000"
+                      style={{
+                        width: `${percentage}%`,
+                        backgroundColor: RED,
+                        opacity: 0.8,
+                      }}
+                    >
+                      <span className="text-white text-sm font-bold">
+                        ${comp.price.toLocaleString()}
+                      </span>
+                    </div>
+                  </div>
+                  <X className="w-5 h-5 shrink-0" style={{ color: RED }} />
+                </div>
+              )
+            })}
+
+            {/* Us */}
+            <div className="flex items-center gap-4">
+              <div className="w-28 text-right">
+                <span className="text-sm font-bold" style={{ color: GREEN }}>
+                  Mexico Paradise
+                </span>
+              </div>
+              <div className="flex-1 h-10 bg-white rounded-lg overflow-hidden relative">
+                <div
+                  className="h-full rounded-lg flex items-center justify-end pr-3"
+                  style={{
+                    width: `${(PAYMENT_CONFIG.oneTimePrice / 3500) * 100}%`,
+                    backgroundColor: GREEN,
+                  }}
+                >
+                  <span className="text-white text-sm font-bold">
+                    ${PAYMENT_CONFIG.oneTimePrice}
+                  </span>
+                </div>
+              </div>
+              <Check className="w-5 h-5 shrink-0" style={{ color: GREEN }} />
+            </div>
+          </div>
+
+          {/* Savings callout */}
+          <div
+            className="rounded-2xl p-8 text-center"
+            style={{ backgroundColor: LIGHT_GREEN, border: `2px solid ${GREEN}33` }}
+          >
+            <BadgeDollarSign className="w-12 h-12 mx-auto mb-3" style={{ color: GREEN }} />
+            <h3 className="text-2xl font-bold mb-2" style={{ color: BLUE }}>
+              You Save ${savings.toLocaleString()} on Average
+            </h3>
+            <p className="text-sm" style={{ color: `${BLUE}88` }}>
+              That&apos;s a <span className="font-bold" style={{ color: GREEN }}>
+                {Math.round((savings / averageCompetitorPrice) * 100)}% discount
+              </span>{' '}
+              compared to major booking platforms. Same resort. Same dates. Fraction of the price.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      {/* Feature Comparison */}
+      <section className="py-20 px-6" style={{ backgroundColor: 'white' }}>
+        <div className="max-w-4xl mx-auto">
+          <div className="text-center mb-12">
+            <h2 className="text-3xl md:text-4xl font-bold mb-3" style={{ color: BLUE }}>
+              It&apos;s Not Just Cheaper &mdash; It&apos;s Better
+            </h2>
+            <p style={{ color: `${BLUE}88` }}>
+              More features, better value, lower price. That&apos;s the trifecta.
+            </p>
+          </div>
+
+          <ComparisonTable accentColor={GREEN} />
+
+          <div className="mt-8">
+            <div
+              className="rounded-xl p-6"
+              style={{ backgroundColor: LIGHT_BLUE }}
+            >
+              <h3 className="font-bold text-lg mb-4" style={{ color: BLUE }}>
+                What&apos;s included that others charge extra for:
+              </h3>
+              <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+                {savingsFeatures.map((f) => (
+                  <div key={f.label} className="flex items-start gap-2">
+                    <div className="mt-0.5">
+                      {f.us ? (
+                        <Check className="w-4 h-4" style={{ color: GREEN }} />
+                      ) : (
+                        <X className="w-4 h-4" style={{ color: RED }} />
+                      )}
+                    </div>
+                    <span className="text-xs" style={{ color: BLUE }}>
+                      {f.label}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Savings Calculator */}
+      <section className="py-20 px-6" style={{ backgroundColor: LIGHT_BLUE }}>
+        <div className="max-w-3xl mx-auto">
+          <div className="text-center mb-12">
+            <Calculator className="w-10 h-10 mx-auto mb-4" style={{ color: BLUE }} />
+            <h2 className="text-3xl md:text-4xl font-bold mb-3" style={{ color: BLUE }}>
+              Let&apos;s Break Down the Value
+            </h2>
+          </div>
+
+          <div className="rounded-2xl bg-white shadow-lg p-8">
+            <div className="grid md:grid-cols-2 gap-8">
+              <div>
+                <h3 className="font-bold mb-4" style={{ color: BLUE }}>
+                  What you&apos;d pay separately:
+                </h3>
+                <div className="space-y-3">
+                  {[
+                    { item: '4 nights at resort', cost: '$1,200' },
+                    { item: 'All meals (5 days)', cost: '$750' },
+                    { item: 'Unlimited drinks', cost: '$400' },
+                    { item: 'Resort amenities', cost: '$350' },
+                    { item: 'Airport transfers', cost: '$150' },
+                    { item: 'Activities & entertainment', cost: '$200' },
+                  ].map((row) => (
+                    <div key={row.item} className="flex justify-between text-sm">
+                      <span style={{ color: '#4B5563' }}>{row.item}</span>
+                      <span className="font-semibold" style={{ color: BLUE }}>
+                        {row.cost}
+                      </span>
+                    </div>
+                  ))}
+                  <div
+                    className="flex justify-between pt-3 text-lg font-bold"
+                    style={{ borderTop: `2px solid ${BLUE}22` }}
+                  >
+                    <span style={{ color: BLUE }}>Total Value</span>
+                    <span style={{ color: RED }}>$3,050</span>
+                  </div>
+                </div>
+              </div>
+
+              <div className="flex flex-col items-center justify-center text-center">
+                <p className="text-sm mb-2" style={{ color: '#9CA3AF' }}>
+                  You pay
+                </p>
+                <p className="text-6xl font-bold mb-2" style={{ color: GREEN }}>
+                  ${PAYMENT_CONFIG.oneTimePrice}
+                </p>
+                <p className="text-sm mb-4" style={{ color: '#6B7280' }}>
+                  or just ${PAYMENT_CONFIG.monthlyPrice}/mo x {PAYMENT_CONFIG.totalMonths}
+                </p>
+                <div
+                  className="inline-flex items-center gap-2 px-4 py-2 rounded-full"
+                  style={{ backgroundColor: LIGHT_GREEN }}
+                >
+                  <TrendingDown className="w-4 h-4" style={{ color: GREEN }} />
+                  <span className="text-sm font-bold" style={{ color: GREEN }}>
+                    Save $2,651 (87% off)
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Price Match Guarantee */}
+      <section
+        className="py-16 px-6"
+        style={{
+          background: `linear-gradient(135deg, ${BLUE} 0%, #1E3A8A 100%)`,
+        }}
+      >
+        <div className="max-w-3xl mx-auto text-center text-white">
+          <Shield className="w-12 h-12 mx-auto mb-4 text-yellow-300" />
+          <h2 className="text-3xl md:text-4xl font-bold mb-4">
+            Show Us a Better Price &mdash; We&apos;ll Match It
+          </h2>
+          <p className="text-white/70 mb-6 max-w-xl mx-auto">
+            We&apos;re so confident this is the best deal you&apos;ll find that we guarantee it.
+            Find a comparable all-inclusive package for less, and we&apos;ll match their price.
+          </p>
+          <div className="flex items-center justify-center gap-6 text-sm text-white/60">
+            <span className="flex items-center gap-1">
+              <Award className="w-4 h-4" /> Best Price Guarantee
+            </span>
+            <span className="flex items-center gap-1">
+              <Shield className="w-4 h-4" /> 30-Day Refund Policy
+            </span>
+          </div>
+        </div>
+      </section>
+
+      {/* Ebook Capture */}
+      <section
+        className="py-20 px-6"
+        style={{ backgroundColor: LIGHT_GREEN }}
+        id="signup-form"
+      >
+        <div className="max-w-2xl mx-auto text-center">
+          <AlertTriangle className="w-10 h-10 mx-auto mb-4" style={{ color: BLUE }} />
+          <h2 className="text-3xl md:text-4xl font-bold mb-3" style={{ color: BLUE }}>
+            Get the Full Price Comparison Report
+          </h2>
+          <p className="mb-2" style={{ color: `${BLUE}88` }}>
+            Free e-book: &ldquo;Budget Luxury Travel&rdquo; with detailed price breakdowns
+            across all major booking platforms
+          </p>
+          <p className="text-sm mb-4" style={{ color: `${BLUE}66` }}>
+            Special pricing expires in:
+          </p>
+
+          <div className="flex justify-center mb-8">
+            <CountdownTimer
+              minutes={30}
+              variant="flip"
+              accentColor={BLUE}
+              bgColor="white"
+              textColor={BLUE}
+            />
+          </div>
+
+          <div className="max-w-md mx-auto">
+            <EbookCaptureForm
+              sourceLp="deal-breaker"
+              accentColor={BLUE}
+              buttonText="Get the Full Price Comparison Report"
+              variant="card"
+            />
+          </div>
+        </div>
+      </section>
+
+      {/* Pay Now */}
+      <section className="py-20 px-6" style={{ backgroundColor: 'white' }}>
+        <div className="max-w-xl mx-auto">
+          <div className="text-center mb-10">
+            <h2 className="text-3xl md:text-4xl font-bold mb-3" style={{ color: BLUE }}>
+              Lock In the Best Price
+            </h2>
+            <p style={{ color: `${BLUE}88` }}>
+              You won&apos;t find this deal anywhere else. We guarantee it.
+            </p>
+          </div>
+
+          <div
+            className="rounded-2xl p-8 shadow-lg"
+            style={{
+              backgroundColor: 'white',
+              border: `2px solid ${GREEN}`,
+            }}
+          >
+            <div className="text-center mb-6">
+              <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full text-xs font-bold text-white mb-3" style={{ backgroundColor: GREEN }}>
+                <Zap className="w-3 h-3" /> BEST VALUE
+              </div>
+              <p className="text-sm line-through" style={{ color: '#9CA3AF' }}>
+                $59/mo
+              </p>
+              <span className="text-5xl font-bold" style={{ color: BLUE }}>
+                ${PAYMENT_CONFIG.monthlyPrice}
+              </span>
+              <span style={{ color: '#6B7280' }}>
+                /mo x {PAYMENT_CONFIG.totalMonths} months
+              </span>
+              <p className="text-sm mt-1" style={{ color: '#9CA3AF' }}>
+                or ${PAYMENT_CONFIG.oneTimePrice} one-time &middot; 30-day money-back guarantee
+              </p>
+            </div>
+
+            <PayNowForm
+              accentColor={BLUE}
+              buttonText="Claim This Deal Now"
+            />
+          </div>
+
+          <TrustBadges variant="compact" className="mt-6" />
+        </div>
+      </section>
+
+      {/* Testimonials */}
+      <section className="py-20 px-6" style={{ backgroundColor: LIGHT_BLUE }}>
+        <div className="max-w-5xl mx-auto">
+          <h2 className="text-3xl md:text-4xl font-bold text-center mb-12" style={{ color: BLUE }}>
+            Smart Travelers Who Found the Best Deal
+          </h2>
+          <div className="grid md:grid-cols-3 gap-6">
+            {TESTIMONIALS.slice(0, 3).map((t) => (
+              <TestimonialCard
+                key={t.name}
+                quote={t.quote}
+                name={t.name}
+                location={t.location}
+                photo={t.photo}
+              />
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <InfluencerBuzz />
+
+      {/* FAQ */}
+      <section className="py-20 px-6" style={{ backgroundColor: 'white' }}>
+        <div className="max-w-2xl mx-auto">
+          <h2 className="text-3xl font-bold text-center mb-10" style={{ color: BLUE }}>
+            Frequently Asked Questions
+          </h2>
+          <FAQAccordion />
+        </div>
+      </section>
+
+      {/* Final CTA */}
+      <section
+        className="py-16 px-6 text-center"
+        style={{
+          background: `linear-gradient(135deg, ${BLUE} 0%, ${GREEN} 100%)`,
+        }}
+      >
+        <TrendingDown className="w-8 h-8 mx-auto mb-4 text-white" />
+        <h2 className="text-2xl md:text-3xl font-bold text-white mb-3">
+          The Numbers Don&apos;t Lie
+        </h2>
+        <p className="text-white/60 mb-2 text-sm max-w-lg mx-auto">
+          ${PAYMENT_CONFIG.oneTimePrice} for what others charge $3,000+.
+          This promotional price ends when the timer hits zero.
+        </p>
+        <div className="flex justify-center mb-6">
+          <CountdownTimer minutes={30} variant="minimal" accentColor="white" />
+        </div>
+        <div className="max-w-md mx-auto">
+          <EbookCaptureForm
+            sourceLp="deal-breaker"
+            accentColor={GREEN}
+            buttonText="Get the Free Price Report"
+            variant="inline"
+          />
+        </div>
+      </section>
+
+      <StickyMobileCTA
+        accentColor={BLUE}
+        buttonText="Get Free Report"
+        targetId="signup-form"
+      />
+    </div>
+  )
+}
diff --git a/src/components/lp/pages/LP33EscapePlan.tsx b/src/components/lp/pages/LP33EscapePlan.tsx
new file mode 100644
index 0000000..2881a9c
--- /dev/null
+++ b/src/components/lp/pages/LP33EscapePlan.tsx
@@ -0,0 +1,518 @@
+'use client'
+
+import { useState } from 'react'
+import {
+  Shield, Target, MapPin, Clock, CheckCircle2,
+  ChevronRight, Lock, Crosshair, Radio,
+  Plane, Palmtree, Sun, Waves, Eye, Zap,
+  ArrowRight, AlertTriangle,
+} from 'lucide-react'
+import EbookCaptureForm from '@/components/lp/shared/EbookCaptureForm'
+import PayNowForm from '@/components/lp/shared/PayNowForm'
+import TestimonialCard from '@/components/lp/shared/TestimonialCard'
+import FAQAccordion from '@/components/lp/shared/FAQAccordion'
+import TrustBadges from '@/components/lp/shared/TrustBadges'
+import StickyMobileCTA from '@/components/lp/shared/StickyMobileCTA'
+import CountdownTimer from '@/components/lp/shared/CountdownTimer'
+import SocialProofTicker from '@/components/lp/shared/SocialProofTicker'
+import UrgencyBanner from '@/components/lp/shared/UrgencyBanner'
+import InfluencerBuzz from '@/components/lp/shared/InfluencerBuzz'
+import { PAYMENT_CONFIG, TESTIMONIALS, DESTINATIONS, FAQ_ITEMS } from '@/app/lp/_config/types'
+
+const DARK = '#111827'
+const GREEN = '#22C55E'
+const DARK_GREEN = '#15803D'
+const TERMINAL_BG = '#0A0F1A'
+
+const missionSteps = [
+  {
+    phase: 'PHASE 01',
+    title: 'INTELLIGENCE GATHERING',
+    description: 'Download the free classified travel dossier. Contains insider intel on luxury Mexico vacations at deep-cover prices.',
+    icon: Eye,
+    status: 'READY',
+  },
+  {
+    phase: 'PHASE 02',
+    title: 'SELECT YOUR DESTINATION',
+    description: 'Choose from 4 confirmed safe houses: Cancun, Cabo, Riviera Maya, or Puerto Vallarta. All 5-star. All all-inclusive.',
+    icon: MapPin,
+    status: 'PENDING',
+  },
+  {
+    phase: 'PHASE 03',
+    title: 'SECURE YOUR CERTIFICATE',
+    description: 'Lock in the $29/mo payment plan or deploy $249 in a single strike. 30-day extraction guarantee if the mission doesn\'t meet expectations.',
+    icon: Lock,
+    status: 'PENDING',
+  },
+  {
+    phase: 'PHASE 04',
+    title: 'EXECUTE THE ESCAPE',
+    description: 'Book your dates within 18 months. Pack your bags. Leave the office behind. Mission complete.',
+    icon: Plane,
+    status: 'PENDING',
+  },
+]
+
+const missionBriefing = [
+  { label: 'MISSION', value: 'Get out of your office and onto a beach' },
+  { label: 'OBJECTIVE', value: 'All-inclusive paradise for $1.30/day' },
+  { label: 'DURATION', value: '5 days / 4 nights' },
+  { label: 'COVER', value: 'Luxury resort guest' },
+  { label: 'CLEARANCE', value: 'All-inclusive (meals, drinks, amenities)' },
+  { label: 'BUDGET', value: `$${PAYMENT_CONFIG.monthlyPrice}/mo x ${PAYMENT_CONFIG.totalMonths} or $${PAYMENT_CONFIG.oneTimePrice} total` },
+]
+
+const targetLocations = DESTINATIONS.map((d) => ({
+  name: d.name,
+  image: d.images[0],
+  tagline: d.tagline,
+  codename: d.name.toUpperCase().replace(/\s+/g, '-'),
+}))
+
+export default function LP33EscapePlan() {
+  const [activeStep, setActiveStep] = useState(0)
+
+  return (
+    <div
+      className="min-h-screen"
+      style={{
+        fontFamily: 'var(--font-roboto), sans-serif',
+        backgroundColor: DARK,
+        color: 'white',
+      }}
+    >
+      <UrgencyBanner variant="countdown" />
+
+      {/* Hero */}
+      <section className="relative min-h-[90vh] flex items-center justify-center overflow-hidden pt-20">
+        <div className="absolute inset-0">
+          <img
+            src="/images/cdn/photo-1507525428034-b723cf961d3e.jpg"
+            alt="Beach paradise escape destination"
+            className="w-full h-full object-cover opacity-20"
+          />
+          <div
+            className="absolute inset-0"
+            style={{
+              background: `linear-gradient(180deg, ${DARK} 0%, ${DARK}dd 50%, ${DARK} 100%)`,
+            }}
+          />
+          {/* Scan lines effect */}
+          <div
+            className="absolute inset-0 opacity-5"
+            style={{
+              backgroundImage:
+                'repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(34,197,94,0.1) 2px, rgba(34,197,94,0.1) 4px)',
+            }}
+          />
+        </div>
+
+        <div className="relative z-10 max-w-4xl mx-auto px-6 text-center">
+          <div
+            className="inline-flex items-center gap-2 px-4 py-2 rounded text-xs font-mono font-bold tracking-widest mb-8 animate-pulse"
+            style={{ backgroundColor: `${GREEN}22`, border: `1px solid ${GREEN}44`, color: GREEN }}
+          >
+            <Radio className="w-3 h-3" />
+            CLASSIFIED // TOP SECRET // EYES ONLY
+          </div>
+
+          <h1
+            className="text-5xl md:text-7xl lg:text-8xl font-black mb-6 tracking-tight uppercase"
+            style={{ fontFamily: 'var(--font-oswald), sans-serif', color: 'white' }}
+          >
+            Your <span style={{ color: GREEN }}>Escape</span> Plan
+          </h1>
+
+          <div
+            className="max-w-xl mx-auto rounded-lg p-6 mb-8 text-left font-mono text-sm"
+            style={{ backgroundColor: TERMINAL_BG, border: `1px solid ${GREEN}33` }}
+          >
+            <p style={{ color: GREEN }} className="mb-2">
+              &gt; INITIATING ESCAPE SEQUENCE...
+            </p>
+            <p className="text-white/60 mb-1">
+              &gt; TARGET: All-inclusive Mexico resort
+            </p>
+            <p className="text-white/60 mb-1">
+              &gt; COST: <span className="line-through text-red-400">$59/mo</span>{' '}
+              <span style={{ color: GREEN }}>${PAYMENT_CONFIG.monthlyPrice}/mo</span> x {PAYMENT_CONFIG.totalMonths}
+            </p>
+            <p className="text-white/60 mb-1">
+              &gt; DURATION: 5 days / 4 nights
+            </p>
+            <p style={{ color: GREEN }} className="animate-pulse">
+              &gt; STATUS: AWAITING YOUR COMMAND_
+            </p>
+          </div>
+
+          <a
+            href="#signup-form"
+            className="inline-flex items-center gap-2 px-8 py-4 rounded text-lg font-bold uppercase tracking-wider transition-all hover:scale-105"
+            style={{
+              backgroundColor: GREEN,
+              color: DARK,
+              fontFamily: 'var(--font-oswald), sans-serif',
+            }}
+          >
+            <Target className="w-5 h-5" /> Begin Mission
+          </a>
+        </div>
+      </section>
+
+      <SocialProofTicker className="bg-black/50" />
+
+      {/* Mission Briefing */}
+      <section className="py-20 px-6" style={{ backgroundColor: TERMINAL_BG }}>
+        <div className="max-w-4xl mx-auto">
+          <div className="text-center mb-14">
+            <Crosshair className="w-8 h-8 mx-auto mb-4" style={{ color: GREEN }} />
+            <h2
+              className="text-3xl md:text-5xl font-black uppercase tracking-tight mb-3"
+              style={{ fontFamily: 'var(--font-oswald), sans-serif' }}
+            >
+              Mission <span style={{ color: GREEN }}>Briefing</span>
+            </h2>
+            <p className="text-white/50 font-mono text-sm">
+              // CLASSIFICATION: FOR YOUR EYES ONLY
+            </p>
+          </div>
+
+          <div
+            className="rounded-lg overflow-hidden"
+            style={{ border: `1px solid ${GREEN}33` }}
+          >
+            {missionBriefing.map((item, i) => (
+              <div
+                key={item.label}
+                className="flex items-start gap-4 p-4 font-mono text-sm"
+                style={{
+                  backgroundColor: i % 2 === 0 ? `${GREEN}08` : 'transparent',
+                  borderBottom: `1px solid ${GREEN}15`,
+                }}
+              >
+                <span
+                  className="shrink-0 font-bold uppercase tracking-wider"
+                  style={{ color: GREEN, width: '120px' }}
+                >
+                  {item.label}:
+                </span>
+                <span className="text-white/80">{item.value}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Mission Steps */}
+      <section className="py-20 px-6" style={{ backgroundColor: DARK }}>
+        <div className="max-w-4xl mx-auto">
+          <div className="text-center mb-14">
+            <h2
+              className="text-3xl md:text-4xl font-black uppercase tracking-tight mb-3"
+              style={{ fontFamily: 'var(--font-oswald), sans-serif' }}
+            >
+              Operation <span style={{ color: GREEN }}>Paradise</span>
+            </h2>
+            <p className="text-white/50 text-sm">
+              Follow the mission objectives to secure your escape
+            </p>
+          </div>
+
+          <div className="space-y-6">
+            {missionSteps.map((step, index) => (
+              <button
+                key={step.phase}
+                onClick={() => setActiveStep(index)}
+                className="w-full text-left transition-all"
+              >
+                <div
+                  className="rounded-lg p-6 flex items-start gap-6 transition-all"
+                  style={{
+                    backgroundColor: activeStep === index ? `${GREEN}15` : `${GREEN}05`,
+                    border: `1px solid ${activeStep === index ? GREEN : `${GREEN}22`}`,
+                  }}
+                >
+                  {/* Step number */}
+                  <div
+                    className="w-14 h-14 rounded-lg flex items-center justify-center shrink-0"
+                    style={{
+                      backgroundColor: activeStep === index ? GREEN : `${GREEN}22`,
+                    }}
+                  >
+                    <step.icon
+                      className="w-6 h-6"
+                      style={{ color: activeStep === index ? DARK : GREEN }}
+                    />
+                  </div>
+
+                  <div className="flex-1">
+                    <div className="flex items-center gap-3 mb-2">
+                      <span
+                        className="text-xs font-mono tracking-widest"
+                        style={{ color: GREEN }}
+                      >
+                        {step.phase}
+                      </span>
+                      <span
+                        className="text-xs px-2 py-0.5 rounded font-mono"
+                        style={{
+                          backgroundColor: index === 0 ? `${GREEN}33` : `${GREEN}11`,
+                          color: index === 0 ? GREEN : `${GREEN}88`,
+                        }}
+                      >
+                        [{step.status}]
+                      </span>
+                    </div>
+                    <h3
+                      className="text-xl font-black uppercase tracking-wide mb-2"
+                      style={{ fontFamily: 'var(--font-oswald), sans-serif' }}
+                    >
+                      {step.title}
+                    </h3>
+                    {activeStep === index && (
+                      <p className="text-white/60 text-sm leading-relaxed">
+                        {step.description}
+                      </p>
+                    )}
+                  </div>
+
+                  <ChevronRight
+                    className="w-5 h-5 shrink-0 mt-2 transition-transform"
+                    style={{
+                      color: `${GREEN}66`,
+                      transform: activeStep === index ? 'rotate(90deg)' : 'none',
+                    }}
+                  />
+                </div>
+              </button>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Target Locations */}
+      <section className="py-20 px-6" style={{ backgroundColor: TERMINAL_BG }}>
+        <div className="max-w-5xl mx-auto">
+          <div className="text-center mb-14">
+            <h2
+              className="text-3xl md:text-4xl font-black uppercase tracking-tight mb-3"
+              style={{ fontFamily: 'var(--font-oswald), sans-serif' }}
+            >
+              Target <span style={{ color: GREEN }}>Locations</span>
+            </h2>
+            <p className="text-white/50 text-sm font-mono">
+              // SELECT YOUR EXTRACTION POINT
+            </p>
+          </div>
+
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+            {targetLocations.map((loc) => (
+              <div
+                key={loc.name}
+                className="rounded-lg overflow-hidden group cursor-pointer"
+                style={{ border: `1px solid ${GREEN}33` }}
+              >
+                <div className="aspect-square overflow-hidden relative">
+                  <img
+                    src={loc.image}
+                    alt={loc.name}
+                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500 opacity-70"
+                  />
+                  <div
+                    className="absolute inset-0"
+                    style={{
+                      background: `linear-gradient(180deg, transparent 50%, ${DARK} 100%)`,
+                    }}
+                  />
+                  <div className="absolute bottom-3 left-3 right-3">
+                    <p className="font-mono text-xs mb-1" style={{ color: GREEN }}>
+                      CODENAME: {loc.codename}
+                    </p>
+                    <h3
+                      className="text-lg font-black uppercase"
+                      style={{ fontFamily: 'var(--font-oswald), sans-serif' }}
+                    >
+                      {loc.name}
+                    </h3>
+                    <p className="text-xs text-white/50">{loc.tagline}</p>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Countdown + Ebook */}
+      <section
+        className="py-20 px-6"
+        style={{
+          backgroundColor: DARK,
+          borderTop: `1px solid ${GREEN}22`,
+          borderBottom: `1px solid ${GREEN}22`,
+        }}
+        id="signup-form"
+      >
+        <div className="max-w-2xl mx-auto text-center">
+          <AlertTriangle className="w-10 h-10 mx-auto mb-4 animate-pulse" style={{ color: GREEN }} />
+
+          <h2
+            className="text-3xl md:text-4xl font-black uppercase tracking-tight mb-3"
+            style={{ fontFamily: 'var(--font-oswald), sans-serif' }}
+          >
+            Download Your <span style={{ color: GREEN }}>Escape Plan</span>
+          </h2>
+          <p className="text-white/60 mb-2">
+            Free classified dossier: &ldquo;Budget Luxury Travel&rdquo; &mdash; everything you need
+            to execute your escape to paradise
+          </p>
+          <p className="text-sm font-mono mb-4" style={{ color: GREEN }}>
+            MISSION WINDOW CLOSES IN:
+          </p>
+
+          <div className="flex justify-center mb-8">
+            <CountdownTimer
+              minutes={30}
+              variant="flip"
+              accentColor={GREEN}
+              bgColor={TERMINAL_BG}
+            />
+          </div>
+
+          <div className="max-w-md mx-auto">
+            <EbookCaptureForm
+              sourceLp="escape-plan"
+              accentColor={GREEN}
+              buttonText="Download Your Escape Plan"
+              variant="card"
+              className="bg-white/5 border-green-900 text-white"
+            />
+          </div>
+        </div>
+      </section>
+
+      {/* Pay Now */}
+      <section className="py-20 px-6" style={{ backgroundColor: TERMINAL_BG }}>
+        <div className="max-w-xl mx-auto">
+          <div className="text-center mb-10">
+            <h2
+              className="text-3xl md:text-4xl font-black uppercase tracking-tight mb-3"
+              style={{ fontFamily: 'var(--font-oswald), sans-serif' }}
+            >
+              Execute <span style={{ color: GREEN }}>Mission</span>
+            </h2>
+            <p className="text-white/50 text-sm font-mono">
+              // SECURE YOUR VACATION CERTIFICATE NOW
+            </p>
+          </div>
+
+          <div
+            className="rounded-lg p-8"
+            style={{
+              backgroundColor: `${GREEN}08`,
+              border: `1px solid ${GREEN}33`,
+            }}
+          >
+            <div className="text-center mb-6">
+              <p className="text-sm line-through text-red-400 font-mono">$59/mo</p>
+              <span className="text-5xl font-bold" style={{ color: GREEN }}>
+                ${PAYMENT_CONFIG.monthlyPrice}
+              </span>
+              <span className="text-white/50">
+                /mo x {PAYMENT_CONFIG.totalMonths} months
+              </span>
+              <p className="text-sm mt-1 text-white/40">
+                or ${PAYMENT_CONFIG.oneTimePrice} one-time &middot; 30-day extraction guarantee
+              </p>
+            </div>
+
+            <PayNowForm
+              variant="dark"
+              accentColor={GREEN}
+              buttonText="EXECUTE MISSION"
+            />
+          </div>
+
+          <TrustBadges variant="compact" className="mt-6" />
+        </div>
+      </section>
+
+      {/* Testimonials */}
+      <section className="py-20 px-6" style={{ backgroundColor: DARK }}>
+        <div className="max-w-5xl mx-auto">
+          <h2
+            className="text-3xl md:text-4xl font-black uppercase tracking-tight text-center mb-12"
+            style={{ fontFamily: 'var(--font-oswald), sans-serif' }}
+          >
+            Successful <span style={{ color: GREEN }}>Operatives</span>
+          </h2>
+          <div className="grid md:grid-cols-3 gap-6">
+            {TESTIMONIALS.slice(0, 3).map((t) => (
+              <TestimonialCard
+                key={t.name}
+                quote={t.quote}
+                name={t.name}
+                location={t.location}
+                photo={t.photo}
+              />
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* FAQ */}
+      <InfluencerBuzz variant="dark" />
+
+      <section className="py-20 px-6" style={{ backgroundColor: TERMINAL_BG }}>
+        <div className="max-w-2xl mx-auto">
+          <h2
+            className="text-3xl font-black uppercase text-center mb-10"
+            style={{ fontFamily: 'var(--font-oswald), sans-serif' }}
+          >
+            Mission <span style={{ color: GREEN }}>Intel</span>
+          </h2>
+          <FAQAccordion />
+        </div>
+      </section>
+
+      {/* Final CTA */}
+      <section
+        className="py-16 px-6 text-center"
+        style={{
+          background: `linear-gradient(135deg, ${DARK} 0%, ${DARK_GREEN}44 100%)`,
+          borderTop: `1px solid ${GREEN}33`,
+        }}
+      >
+        <Target className="w-8 h-8 mx-auto mb-4" style={{ color: GREEN }} />
+        <h2
+          className="text-2xl md:text-3xl font-black uppercase text-white mb-3"
+          style={{ fontFamily: 'var(--font-oswald), sans-serif' }}
+        >
+          The Clock Is Ticking, Agent
+        </h2>
+        <p className="text-white/50 mb-2 text-sm font-mono">
+          MISSION WINDOW CLOSING IN:
+        </p>
+        <div className="flex justify-center mb-6">
+          <CountdownTimer minutes={30} variant="minimal" accentColor={GREEN} />
+        </div>
+        <div className="max-w-md mx-auto">
+          <EbookCaptureForm
+            sourceLp="escape-plan"
+            accentColor={GREEN}
+            buttonText="Download Escape Plan"
+            variant="inline"
+          />
+        </div>
+      </section>
+
+      <StickyMobileCTA
+        accentColor={GREEN}
+        buttonText="Get Escape Plan"
+        targetId="signup-form"
+      />
+    </div>
+  )
+}
diff --git a/src/components/lp/pages/LP34TikTokVibes.tsx b/src/components/lp/pages/LP34TikTokVibes.tsx
new file mode 100644
index 0000000..8a5cfe5
--- /dev/null
+++ b/src/components/lp/pages/LP34TikTokVibes.tsx
@@ -0,0 +1,471 @@
+'use client'
+
+import {
+  Heart, MessageCircle, Share2, Bookmark, Music2,
+  ArrowRight, Sparkles, Eye, Flame, TrendingUp,
+  Shield, Star, Play, Users, Zap,
+} from 'lucide-react'
+import EbookCaptureForm from '@/components/lp/shared/EbookCaptureForm'
+import PayNowForm from '@/components/lp/shared/PayNowForm'
+import TikTokCarousel from '@/components/lp/shared/TikTokCarousel'
+import TestimonialCard from '@/components/lp/shared/TestimonialCard'
+import FAQAccordion from '@/components/lp/shared/FAQAccordion'
+import TrustBadges from '@/components/lp/shared/TrustBadges'
+import StickyMobileCTA from '@/components/lp/shared/StickyMobileCTA'
+import CountdownTimer from '@/components/lp/shared/CountdownTimer'
+import SocialProofTicker from '@/components/lp/shared/SocialProofTicker'
+import UrgencyBanner from '@/components/lp/shared/UrgencyBanner'
+import InfluencerBuzz from '@/components/lp/shared/InfluencerBuzz'
+import { PAYMENT_CONFIG, TESTIMONIALS, FAQ_ITEMS } from '@/app/lp/_config/types'
+
+const BLACK = '#000000'
+const CYAN = '#25F4EE'
+const PINK = '#FE2C55'
+const DARK_BG = '#121212'
+
+const engagementStats = [
+  { icon: Eye, label: 'views', value: '12.3M', color: 'white' },
+  { icon: Heart, label: 'likes', value: '847K', color: PINK },
+  { icon: MessageCircle, label: 'comments', value: '156K', color: CYAN },
+  { icon: Share2, label: 'shares', value: '23K', color: 'white' },
+]
+
+const creatorReactions = [
+  {
+    handle: '@travelwithsoph',
+    reaction: 'NO WAY this is only $39/mo for ALL INCLUSIVE??',
+    likes: '234K',
+    avatar: '/images/cdn/photo-1494790108377-be9c29b29330.jpg',
+  },
+  {
+    handle: '@budgetluxury_',
+    reaction: 'I literally booked this after seeing one TikTok. Best decision ever.',
+    likes: '189K',
+    avatar: '/images/cdn/photo-1472099645785-5658abf4ff4e.jpg',
+  },
+  {
+    handle: '@mexicovibes.co',
+    reaction: 'The cenote photos are INSANE. $1.30/day for 5-star? STOPPPP.',
+    likes: '312K',
+    avatar: '/images/cdn/photo-1438761681033-6461ffad8d80.jpg',
+  },
+  {
+    handle: '@thecheaptraveler',
+    reaction: 'POV: You find the Mexico vacation deal that ACTUALLY delivers',
+    likes: '445K',
+    avatar: '/images/cdn/photo-1500648767791-00dcc994a43e.jpg',
+  },
+]
+
+const trendingHashtags = [
+  '#MexicoParadise', '#AllInclusive', '#TravelTikTok',
+  '#BudgetLuxury', '#VacationDeal', '#CancunTikTok',
+  '#ResortLife', '#TravelHack',
+]
+
+export default function LP34TikTokVibes() {
+  return (
+    <div
+      className="min-h-screen"
+      style={{
+        fontFamily: 'var(--font-inter), sans-serif',
+        backgroundColor: BLACK,
+        color: 'white',
+      }}
+    >
+      <UrgencyBanner variant="countdown" />
+
+      {/* Hero */}
+      <section className="relative min-h-[95vh] flex items-center justify-center overflow-hidden pt-20">
+        <div className="absolute inset-0">
+          <img
+            src="/images/cdn/photo-1552074284-5e88ef1aef18.jpg"
+            alt="Stunning Mexico beach resort"
+            className="w-full h-full object-cover opacity-30"
+          />
+          <div
+            className="absolute inset-0"
+            style={{
+              background: `linear-gradient(180deg, ${BLACK} 0%, ${BLACK}cc 40%, ${BLACK} 100%)`,
+            }}
+          />
+        </div>
+
+        <div className="relative z-10 max-w-4xl mx-auto px-6 text-center">
+          {/* TikTok-style badge */}
+          <div
+            className="inline-flex items-center gap-2 px-5 py-2 rounded-full text-sm font-bold mb-8"
+            style={{
+              background: `linear-gradient(135deg, ${PINK}, ${CYAN})`,
+              color: BLACK,
+            }}
+          >
+            <Flame className="w-4 h-4" />
+            TRENDING NOW
+            <TrendingUp className="w-4 h-4" />
+          </div>
+
+          <h1
+            className="text-4xl md:text-6xl lg:text-8xl font-black mb-6 leading-none"
+            style={{ fontFamily: 'var(--font-outfit), sans-serif' }}
+          >
+            The Mexico deal
+            <br />
+            that <span style={{ color: PINK }}>broke</span>{' '}
+            <span style={{ color: CYAN }}>TikTok</span>
+          </h1>
+
+          <p className="text-lg md:text-xl text-white/60 mb-8 max-w-xl mx-auto">
+            12.3 million views. 847K likes. One vacation deal that&apos;s going viral
+            for a reason.
+          </p>
+
+          {/* Engagement Stats */}
+          <div className="flex items-center justify-center gap-6 md:gap-10 mb-10">
+            {engagementStats.map((stat) => (
+              <div key={stat.label} className="text-center">
+                <div className="flex items-center justify-center gap-1 mb-1">
+                  <stat.icon className="w-4 h-4" style={{ color: stat.color }} />
+                  <span className="text-lg md:text-2xl font-black" style={{ color: stat.color }}>
+                    {stat.value}
+                  </span>
+                </div>
+                <p className="text-xs text-white/40 uppercase tracking-wider">{stat.label}</p>
+              </div>
+            ))}
+          </div>
+
+          <div className="flex items-center justify-center gap-2 text-white/40 text-sm mb-6">
+            <span>Swipe through real TikToks below</span>
+            <span className="text-xl">👇</span>
+          </div>
+
+          <a
+            href="#signup-form"
+            className="inline-flex items-center gap-2 px-8 py-4 rounded-full text-lg font-bold transition-all hover:scale-105"
+            style={{
+              background: `linear-gradient(135deg, ${PINK}, ${CYAN})`,
+              color: BLACK,
+            }}
+          >
+            Get the Insider Guide <ArrowRight className="w-5 h-5" />
+          </a>
+        </div>
+      </section>
+
+      {/* TikTok Carousel - Main Feature */}
+      <TikTokCarousel
+        className="bg-black"
+        title="See Why TikTok Can't Stop Talking About This"
+        subtitle="Real creators. Real vacations. Real reactions."
+      />
+
+      {/* Creator Reactions */}
+      <section className="py-20 px-6" style={{ backgroundColor: DARK_BG }}>
+        <div className="max-w-4xl mx-auto">
+          <div className="text-center mb-12">
+            <h2
+              className="text-3xl md:text-4xl font-black mb-3"
+              style={{ fontFamily: 'var(--font-outfit), sans-serif' }}
+            >
+              Creator <span style={{ color: PINK }}>Reactions</span>
+            </h2>
+            <p className="text-white/50">
+              What TikTok creators are saying about this deal
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-2 gap-4">
+            {creatorReactions.map((creator) => (
+              <div
+                key={creator.handle}
+                className="rounded-2xl p-5 flex items-start gap-4"
+                style={{ backgroundColor: `rgba(255,255,255,0.05)`, border: '1px solid rgba(255,255,255,0.1)' }}
+              >
+                <img
+                  src={creator.avatar}
+                  alt={creator.handle}
+                  className="w-12 h-12 rounded-full object-cover shrink-0"
+                />
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm font-bold" style={{ color: CYAN }}>
+                    {creator.handle}
+                  </p>
+                  <p className="text-white/80 text-sm mt-1 leading-relaxed">
+                    &ldquo;{creator.reaction}&rdquo;
+                  </p>
+                  <div className="flex items-center gap-3 mt-2">
+                    <span className="flex items-center gap-1 text-xs text-white/40">
+                      <Heart className="w-3 h-3" style={{ color: PINK }} /> {creator.likes}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+
+          {/* Trending Hashtags */}
+          <div className="flex flex-wrap items-center justify-center gap-2 mt-10">
+            {trendingHashtags.map((tag) => (
+              <span
+                key={tag}
+                className="px-3 py-1.5 rounded-full text-xs font-semibold"
+                style={{ backgroundColor: 'rgba(255,255,255,0.08)', color: CYAN }}
+              >
+                {tag}
+              </span>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* The Deal Section */}
+      <section className="py-20 px-6" style={{ backgroundColor: BLACK }}>
+        <div className="max-w-3xl mx-auto text-center">
+          <h2
+            className="text-3xl md:text-5xl font-black mb-6"
+            style={{ fontFamily: 'var(--font-outfit), sans-serif' }}
+          >
+            Why <span style={{ color: CYAN }}>12 Million</span> People
+            <br />
+            Can&apos;t Look Away
+          </h2>
+
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-12">
+            {[
+              { label: '5 Days / 4 Nights', icon: '🏖️' },
+              { label: 'All-Inclusive', icon: '🍹' },
+              { label: '5-Star Resort', icon: '⭐' },
+              { label: '$1.30/Day', icon: '🤯' },
+            ].map((item) => (
+              <div
+                key={item.label}
+                className="rounded-xl p-5"
+                style={{ backgroundColor: 'rgba(255,255,255,0.05)' }}
+              >
+                <span className="text-3xl block mb-2">{item.icon}</span>
+                <p className="text-sm font-semibold text-white/80">{item.label}</p>
+              </div>
+            ))}
+          </div>
+
+          <div
+            className="rounded-2xl p-8"
+            style={{
+              background: `linear-gradient(135deg, ${PINK}22, ${CYAN}22)`,
+              border: `1px solid rgba(255,255,255,0.1)`,
+            }}
+          >
+            <h3
+              className="text-2xl font-black mb-4"
+              style={{ fontFamily: 'var(--font-outfit), sans-serif' }}
+            >
+              The math that made this go viral:
+            </h3>
+            <div className="flex items-center justify-center gap-4 flex-wrap">
+              <div className="text-center">
+                <p className="text-sm text-white/40">Regular price</p>
+                <p className="text-2xl font-bold line-through" style={{ color: PINK }}>
+                  $3,000+
+                </p>
+              </div>
+              <ArrowRight className="w-6 h-6 text-white/30" />
+              <div className="text-center">
+                <p className="text-sm text-white/40">Our price</p>
+                <p className="text-2xl font-bold" style={{ color: CYAN }}>
+                  ${PAYMENT_CONFIG.oneTimePrice}
+                </p>
+              </div>
+              <ArrowRight className="w-6 h-6 text-white/30" />
+              <div className="text-center">
+                <p className="text-sm text-white/40">Per day</p>
+                <p className="text-2xl font-bold" style={{ color: CYAN }}>
+                  $1.30
+                </p>
+              </div>
+            </div>
+            <p className="text-white/50 text-sm mt-4">
+              <span className="line-through">$59/mo</span> &rarr;{' '}
+              <span className="font-bold" style={{ color: CYAN }}>
+                ${PAYMENT_CONFIG.monthlyPrice}/mo
+              </span>{' '}
+              x {PAYMENT_CONFIG.totalMonths} months (promotional pricing)
+            </p>
+          </div>
+        </div>
+      </section>
+
+      {/* Ebook Capture */}
+      <section
+        className="py-20 px-6"
+        style={{ backgroundColor: DARK_BG }}
+        id="signup-form"
+      >
+        <div className="max-w-2xl mx-auto text-center">
+          <Sparkles className="w-10 h-10 mx-auto mb-4" style={{ color: CYAN }} />
+
+          <h2
+            className="text-3xl md:text-4xl font-black mb-3"
+            style={{ fontFamily: 'var(--font-outfit), sans-serif' }}
+          >
+            Want the <span style={{ color: CYAN }}>Insider Tips</span>
+            <br />
+            These Creators Used?
+          </h2>
+          <p className="text-white/60 mb-2">
+            Free e-book: &ldquo;Budget Luxury Travel&rdquo; &mdash; the TikTok travel guide
+            that&apos;s been shared 23K+ times
+          </p>
+          <p className="text-sm text-white/40 mb-4">
+            Free guide + promotional pricing expires in:
+          </p>
+
+          <div className="flex justify-center mb-8">
+            <CountdownTimer
+              minutes={30}
+              variant="flip"
+              accentColor={PINK}
+              bgColor={BLACK}
+            />
+          </div>
+
+          <div className="max-w-md mx-auto">
+            <EbookCaptureForm
+              sourceLp="tiktok-vibes"
+              accentColor={PINK}
+              buttonText="Get the Free TikTok Travel Guide"
+              variant="card"
+              className="bg-white/5 border-white/10 text-white"
+            />
+          </div>
+        </div>
+      </section>
+
+      {/* Pay Now */}
+      <section className="py-20 px-6" style={{ backgroundColor: BLACK }}>
+        <div className="max-w-xl mx-auto">
+          <div className="text-center mb-10">
+            <h2
+              className="text-3xl md:text-4xl font-black mb-3"
+              style={{ fontFamily: 'var(--font-outfit), sans-serif' }}
+            >
+              Ready to <span style={{ color: PINK }}>Go Viral</span> on Vacation?
+            </h2>
+            <p className="text-white/50 text-sm">
+              Join 23K+ people who already claimed this deal
+            </p>
+          </div>
+
+          <div
+            className="rounded-2xl p-8"
+            style={{
+              background: `linear-gradient(135deg, ${PINK}15, ${CYAN}15)`,
+              border: '1px solid rgba(255,255,255,0.1)',
+            }}
+          >
+            <div className="text-center mb-6">
+              <div
+                className="inline-flex items-center gap-2 px-3 py-1 rounded-full text-xs font-bold mb-3"
+                style={{ backgroundColor: PINK, color: 'white' }}
+              >
+                <Flame className="w-3 h-3" /> VIRAL DEAL
+              </div>
+              <p className="text-sm line-through text-white/40">$59/mo</p>
+              <span className="text-5xl font-bold" style={{ color: CYAN }}>
+                ${PAYMENT_CONFIG.monthlyPrice}
+              </span>
+              <span className="text-white/50">
+                /mo x {PAYMENT_CONFIG.totalMonths} months
+              </span>
+              <p className="text-sm mt-1 text-white/30">
+                or ${PAYMENT_CONFIG.oneTimePrice} one-time &middot; 30-day money-back guarantee
+              </p>
+            </div>
+
+            <PayNowForm
+              variant="dark"
+              accentColor={PINK}
+              buttonText="Claim the Viral Deal"
+            />
+          </div>
+
+          <TrustBadges variant="compact" className="mt-6" />
+        </div>
+      </section>
+
+      {/* Testimonials */}
+      <section className="py-20 px-6" style={{ backgroundColor: DARK_BG }}>
+        <div className="max-w-5xl mx-auto">
+          <h2
+            className="text-3xl md:text-4xl font-black text-center mb-12"
+            style={{ fontFamily: 'var(--font-outfit), sans-serif' }}
+          >
+            Real Reviews from <span style={{ color: CYAN }}>Real Travelers</span>
+          </h2>
+          <div className="grid md:grid-cols-3 gap-6">
+            {TESTIMONIALS.slice(0, 3).map((t) => (
+              <TestimonialCard
+                key={t.name}
+                quote={t.quote}
+                name={t.name}
+                location={t.location}
+                photo={t.photo}
+              />
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* FAQ */}
+      <InfluencerBuzz variant="dark" />
+
+      <section className="py-20 px-6" style={{ backgroundColor: BLACK }}>
+        <div className="max-w-2xl mx-auto">
+          <h2
+            className="text-3xl font-black text-center mb-10"
+            style={{ fontFamily: 'var(--font-outfit), sans-serif' }}
+          >
+            The <span style={{ color: CYAN }}>FAQ</span> Section
+          </h2>
+          <FAQAccordion />
+        </div>
+      </section>
+
+      {/* Final CTA */}
+      <section
+        className="py-16 px-6 text-center"
+        style={{
+          background: `linear-gradient(135deg, ${PINK}33, ${CYAN}33)`,
+        }}
+      >
+        <Flame className="w-8 h-8 mx-auto mb-4" style={{ color: PINK }} />
+        <h2
+          className="text-2xl md:text-3xl font-black text-white mb-3"
+          style={{ fontFamily: 'var(--font-outfit), sans-serif' }}
+        >
+          Don&apos;t Just Watch the TikToks &mdash; Live It
+        </h2>
+        <p className="text-white/50 mb-2 text-sm">
+          This deal is going fast. Promotional pricing ends when the timer hits zero.
+        </p>
+        <div className="flex justify-center mb-6">
+          <CountdownTimer minutes={30} variant="minimal" accentColor={CYAN} />
+        </div>
+        <div className="max-w-md mx-auto">
+          <EbookCaptureForm
+            sourceLp="tiktok-vibes"
+            accentColor={PINK}
+            buttonText="Get the Free Guide"
+            variant="inline"
+          />
+        </div>
+      </section>
+
+      <StickyMobileCTA
+        accentColor={PINK}
+        buttonText="Get Free Guide"
+        targetId="signup-form"
+      />
+    </div>
+  )
+}
diff --git a/src/components/lp/pages/LP35NoBrainer.tsx b/src/components/lp/pages/LP35NoBrainer.tsx
new file mode 100644
index 0000000..b119232
--- /dev/null
+++ b/src/components/lp/pages/LP35NoBrainer.tsx
@@ -0,0 +1,569 @@
+'use client'
+
+import {
+  Calculator, Check, ArrowRight, TrendingDown,
+  Shield, Sparkles, Coffee, Tv, UtensilsCrossed,
+  Palmtree, Star, Zap, Brain, ChevronRight,
+  DollarSign, Equal,
+} from 'lucide-react'
+import EbookCaptureForm from '@/components/lp/shared/EbookCaptureForm'
+import PayNowForm from '@/components/lp/shared/PayNowForm'
+import TestimonialCard from '@/components/lp/shared/TestimonialCard'
+import FAQAccordion from '@/components/lp/shared/FAQAccordion'
+import TrustBadges from '@/components/lp/shared/TrustBadges'
+import StickyMobileCTA from '@/components/lp/shared/StickyMobileCTA'
+import CountdownTimer from '@/components/lp/shared/CountdownTimer'
+import SocialProofTicker from '@/components/lp/shared/SocialProofTicker'
+import UrgencyBanner from '@/components/lp/shared/UrgencyBanner'
+import InfluencerBuzz from '@/components/lp/shared/InfluencerBuzz'
+import { PAYMENT_CONFIG, TESTIMONIALS, FAQ_ITEMS } from '@/app/lp/_config/types'
+
+const WHITE = '#FFFFFF'
+const INDIGO = '#4F46E5'
+const GREEN = '#10B981'
+const LIGHT_INDIGO = '#EEF2FF'
+const LIGHT_GREEN = '#ECFDF5'
+
+const dailyCostComparisons = [
+  {
+    label: 'Morning Coffee',
+    cost: 5.50,
+    icon: Coffee,
+    frequency: 'daily',
+    color: '#92400E',
+    bgColor: '#FEF3C7',
+  },
+  {
+    label: 'Lunch Out',
+    cost: 12.00,
+    icon: UtensilsCrossed,
+    frequency: 'daily',
+    color: '#9F1239',
+    bgColor: '#FFE4E6',
+  },
+  {
+    label: 'Streaming Services',
+    cost: 1.80,
+    icon: Tv,
+    frequency: 'daily',
+    color: '#5B21B6',
+    bgColor: '#EDE9FE',
+  },
+  {
+    label: 'THIS VACATION',
+    cost: 1.30,
+    icon: Palmtree,
+    frequency: 'daily',
+    color: WHITE,
+    bgColor: GREEN,
+    highlight: true,
+  },
+]
+
+const mathBreakdown = [
+  { label: '$1.30/day', sublabel: 'daily cost' },
+  { label: '300 days', sublabel: 'payment period' },
+  { label: '$390', sublabel: 'total investment' },
+  { label: '5-day luxury vacation', sublabel: 'what you get' },
+]
+
+const whatYouGet = [
+  '5 days / 4 nights at a 5-star resort',
+  'All meals included (breakfast, lunch, dinner)',
+  'Unlimited drinks (including alcohol)',
+  'Resort pools, beach, and amenities',
+  'Evening entertainment and live shows',
+  '18 months to book your travel dates',
+  '30-day money-back guarantee',
+  'Flexible payment plan available',
+]
+
+export default function LP35NoBrainer() {
+  return (
+    <div
+      className="min-h-screen"
+      style={{
+        fontFamily: 'var(--font-dm-sans), sans-serif',
+        backgroundColor: WHITE,
+      }}
+    >
+      <UrgencyBanner variant="countdown" />
+
+      {/* Hero */}
+      <section
+        className="relative min-h-[90vh] flex items-center justify-center overflow-hidden pt-20"
+        style={{ backgroundColor: WHITE }}
+      >
+        <div className="absolute inset-0 opacity-5">
+          <div
+            className="w-full h-full"
+            style={{
+              backgroundImage:
+                'radial-gradient(circle at 25px 25px, #4F46E5 1px, transparent 0)',
+              backgroundSize: '50px 50px',
+            }}
+          />
+        </div>
+
+        <div className="relative z-10 max-w-4xl mx-auto px-6 text-center">
+          <div
+            className="inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm font-bold mb-8"
+            style={{ backgroundColor: LIGHT_GREEN, color: GREEN }}
+          >
+            <Calculator className="w-4 h-4" />
+            SIMPLE MATH. INCREDIBLE VALUE.
+          </div>
+
+          <h1
+            className="text-4xl md:text-6xl lg:text-7xl font-black mb-6 leading-tight"
+            style={{ color: '#111827' }}
+          >
+            Let&apos;s Do the Math.
+            <br />
+            It&apos;s a <span style={{ color: INDIGO }}>No-Brainer</span>.
+          </h1>
+
+          <p className="text-lg md:text-xl mb-10 max-w-2xl mx-auto leading-relaxed" style={{ color: '#6B7280' }}>
+            We&apos;re about to show you why this is the easiest decision you&apos;ll make all year.
+            No tricks. Just math.
+          </p>
+
+          {/* Hero Math */}
+          <div
+            className="max-w-2xl mx-auto rounded-2xl p-8 mb-10"
+            style={{ backgroundColor: LIGHT_INDIGO }}
+          >
+            <div className="flex items-center justify-center gap-3 md:gap-6 flex-wrap">
+              {mathBreakdown.map((item, index) => (
+                <div key={item.label} className="flex items-center gap-3 md:gap-6">
+                  <div className="text-center">
+                    <p
+                      className="text-xl md:text-3xl font-black"
+                      style={{ color: index === mathBreakdown.length - 1 ? GREEN : INDIGO }}
+                    >
+                      {item.label}
+                    </p>
+                    <p className="text-xs text-gray-400 uppercase tracking-wider mt-1">
+                      {item.sublabel}
+                    </p>
+                  </div>
+                  {index < mathBreakdown.length - 1 && (
+                    <span className="text-2xl font-bold" style={{ color: '#D1D5DB' }}>
+                      {index === mathBreakdown.length - 2 ? '=' : '\u00D7'}
+                    </span>
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <a
+            href="#signup-form"
+            className="inline-flex items-center gap-2 px-8 py-4 rounded-xl text-lg font-bold text-white transition-all hover:scale-105"
+            style={{ backgroundColor: INDIGO }}
+          >
+            See the Full Breakdown <ArrowRight className="w-5 h-5" />
+          </a>
+        </div>
+      </section>
+
+      <SocialProofTicker />
+
+      {/* Daily Cost Comparison - Big Bold Cards */}
+      <section className="py-20 px-6" style={{ backgroundColor: '#F9FAFB' }}>
+        <div className="max-w-4xl mx-auto">
+          <div className="text-center mb-14">
+            <h2 className="text-3xl md:text-5xl font-black mb-4" style={{ color: '#111827' }}>
+              If You Can Afford a <span style={{ color: INDIGO }}>Coffee</span>,
+              <br />
+              You Can Afford <span style={{ color: GREEN }}>Paradise</span>
+            </h2>
+            <p style={{ color: '#6B7280' }}>
+              Here&apos;s what $1.30/day looks like compared to things you already spend on
+            </p>
+          </div>
+
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-10">
+            {dailyCostComparisons.map((item) => (
+              <div
+                key={item.label}
+                className="rounded-2xl p-6 text-center relative overflow-hidden transition-transform hover:scale-105"
+                style={{
+                  backgroundColor: item.highlight ? GREEN : 'white',
+                  border: item.highlight ? 'none' : '2px solid #F3F4F6',
+                  transform: item.highlight ? 'scale(1.05)' : 'none',
+                }}
+              >
+                {item.highlight && (
+                  <div className="absolute top-0 left-0 right-0 py-1 text-xs font-bold text-center"
+                    style={{ backgroundColor: '#059669', color: 'white' }}
+                  >
+                    BEST VALUE
+                  </div>
+                )}
+                <div
+                  className="w-14 h-14 rounded-xl flex items-center justify-center mx-auto mb-4"
+                  style={{
+                    backgroundColor: item.highlight ? 'rgba(255,255,255,0.2)' : item.bgColor,
+                    marginTop: item.highlight ? '12px' : '0',
+                  }}
+                >
+                  <item.icon
+                    className="w-7 h-7"
+                    style={{ color: item.highlight ? 'white' : item.color }}
+                  />
+                </div>
+                <p
+                  className="text-3xl md:text-4xl font-black mb-2"
+                  style={{ color: item.highlight ? 'white' : '#111827' }}
+                >
+                  ${item.cost.toFixed(2)}
+                </p>
+                <p
+                  className="text-sm font-semibold mb-1"
+                  style={{ color: item.highlight ? 'white' : '#374151' }}
+                >
+                  {item.label}
+                </p>
+                <p
+                  className="text-xs"
+                  style={{ color: item.highlight ? 'rgba(255,255,255,0.7)' : '#9CA3AF' }}
+                >
+                  per day
+                </p>
+              </div>
+            ))}
+          </div>
+
+          {/* Visual Bar Chart */}
+          <div
+            className="rounded-2xl p-8"
+            style={{ backgroundColor: 'white', border: '2px solid #F3F4F6' }}
+          >
+            <h3 className="text-lg font-bold mb-6 text-center" style={{ color: '#111827' }}>
+              Daily Cost Comparison
+            </h3>
+            <div className="space-y-4">
+              {dailyCostComparisons.map((item) => {
+                const maxCost = 12
+                const widthPercent = (item.cost / maxCost) * 100
+                return (
+                  <div key={item.label} className="flex items-center gap-4">
+                    <div className="w-32 text-right">
+                      <span className="text-sm font-medium" style={{ color: '#374151' }}>
+                        {item.label}
+                      </span>
+                    </div>
+                    <div className="flex-1 h-10 bg-gray-100 rounded-lg overflow-hidden">
+                      <div
+                        className="h-full rounded-lg flex items-center justify-end pr-3 transition-all"
+                        style={{
+                          width: `${widthPercent}%`,
+                          backgroundColor: item.highlight ? GREEN : INDIGO,
+                          opacity: item.highlight ? 1 : 0.6,
+                        }}
+                      >
+                        <span className="text-white text-sm font-bold">
+                          ${item.cost.toFixed(2)}
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                )
+              })}
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* The Math Proof */}
+      <section className="py-20 px-6" style={{ backgroundColor: LIGHT_INDIGO }}>
+        <div className="max-w-3xl mx-auto">
+          <div className="text-center mb-12">
+            <Brain className="w-10 h-10 mx-auto mb-4" style={{ color: INDIGO }} />
+            <h2 className="text-3xl md:text-4xl font-black mb-3" style={{ color: '#111827' }}>
+              The Logic Is Simple
+            </h2>
+            <p style={{ color: '#6B7280' }}>
+              Here&apos;s the value breakdown that makes this a no-brainer
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-2 gap-8">
+            {/* What you pay */}
+            <div
+              className="rounded-2xl p-8 text-center"
+              style={{ backgroundColor: 'white', border: '2px solid #E5E7EB' }}
+            >
+              <h3 className="text-lg font-bold mb-6" style={{ color: INDIGO }}>
+                What You Pay
+              </h3>
+              <div className="space-y-4">
+                <div>
+                  <p className="text-sm text-gray-400 mb-1">Option A: Payment Plan</p>
+                  <p className="text-sm line-through text-gray-400">$59/mo</p>
+                  <p className="text-4xl font-black" style={{ color: INDIGO }}>
+                    ${PAYMENT_CONFIG.monthlyPrice}/mo
+                  </p>
+                  <p className="text-sm text-gray-500">
+                    x {PAYMENT_CONFIG.totalMonths} months = ${PAYMENT_CONFIG.totalPrice}
+                  </p>
+                </div>
+                <div className="py-2">
+                  <p className="text-xs text-gray-400 uppercase tracking-wider">or</p>
+                </div>
+                <div>
+                  <p className="text-sm text-gray-400 mb-1">Option B: One-Time</p>
+                  <p className="text-4xl font-black" style={{ color: INDIGO }}>
+                    ${PAYMENT_CONFIG.oneTimePrice}
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            {/* What you get */}
+            <div
+              className="rounded-2xl p-8"
+              style={{ backgroundColor: LIGHT_GREEN, border: `2px solid ${GREEN}33` }}
+            >
+              <h3 className="text-lg font-bold mb-6" style={{ color: GREEN }}>
+                What You Get ($3,000+ Value)
+              </h3>
+              <div className="space-y-3">
+                {whatYouGet.map((item) => (
+                  <div key={item} className="flex items-start gap-3">
+                    <Check className="w-5 h-5 shrink-0 mt-0.5" style={{ color: GREEN }} />
+                    <span className="text-sm" style={{ color: '#374151' }}>{item}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+
+          {/* Savings callout */}
+          <div
+            className="mt-8 rounded-2xl p-8 text-center"
+            style={{ backgroundColor: GREEN, color: 'white' }}
+          >
+            <h3 className="text-2xl md:text-3xl font-black mb-2">
+              You Save Over $2,600
+            </h3>
+            <p className="text-white/80">
+              That&apos;s an 87% discount on a $3,000+ vacation. The math doesn&apos;t lie.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      {/* The "Can I Afford It" Section */}
+      <section className="py-20 px-6" style={{ backgroundColor: 'white' }}>
+        <div className="max-w-3xl mx-auto text-center">
+          <h2 className="text-3xl md:text-4xl font-black mb-8" style={{ color: '#111827' }}>
+            &ldquo;But Can I <span style={{ color: INDIGO }}>Really</span> Afford It?&rdquo;
+          </h2>
+
+          <div
+            className="rounded-2xl p-8 mb-8"
+            style={{ backgroundColor: LIGHT_INDIGO }}
+          >
+            <p className="text-lg mb-6" style={{ color: '#374151' }}>
+              Let&apos;s check. Do you spend money on any of these?
+            </p>
+
+            <div className="grid grid-cols-2 md:grid-cols-3 gap-3 mb-8">
+              {[
+                { text: 'Coffee 3x/week', savings: '$9/wk' },
+                { text: 'Fast food once/week', savings: '$12/wk' },
+                { text: 'Streaming subscriptions', savings: '$15/mo' },
+                { text: 'Gas station snacks', savings: '$5/wk' },
+                { text: 'Impulse Amazon buys', savings: '$20/mo' },
+                { text: 'Uber Eats delivery fees', savings: '$8/wk' },
+              ].map((item) => (
+                <div
+                  key={item.text}
+                  className="rounded-xl p-4 text-left"
+                  style={{ backgroundColor: 'white' }}
+                >
+                  <p className="text-sm font-medium mb-1" style={{ color: '#374151' }}>
+                    {item.text}
+                  </p>
+                  <p className="text-xs" style={{ color: '#9CA3AF' }}>
+                    ~ {item.savings}
+                  </p>
+                </div>
+              ))}
+            </div>
+
+            <p className="text-lg font-bold" style={{ color: INDIGO }}>
+              If you checked even ONE &mdash; you can afford this vacation.
+            </p>
+            <p className="text-sm mt-2" style={{ color: '#6B7280' }}>
+              ${PAYMENT_CONFIG.monthlyPrice}/mo is less than what most people spend on coffee in a week.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      {/* Ebook Capture */}
+      <section
+        className="py-20 px-6"
+        style={{
+          background: `linear-gradient(135deg, ${INDIGO} 0%, #312E81 100%)`,
+        }}
+        id="signup-form"
+      >
+        <div className="max-w-2xl mx-auto text-center">
+          <Calculator className="w-10 h-10 mx-auto mb-4 text-white" />
+
+          <h2 className="text-3xl md:text-4xl font-black text-white mb-3">
+            Get the Full Cost Breakdown
+          </h2>
+          <p className="text-white/70 mb-2">
+            Free e-book: &ldquo;Budget Luxury Travel&rdquo; &mdash; detailed pricing analysis,
+            savings tips, and the complete math behind the deal
+          </p>
+          <p className="text-white/50 text-sm mb-4">
+            Free guide + promotional pricing available for:
+          </p>
+
+          <div className="flex justify-center mb-8">
+            <CountdownTimer
+              minutes={30}
+              variant="flip"
+              accentColor={GREEN}
+              bgColor="#1E1B4B"
+            />
+          </div>
+
+          <div className="max-w-md mx-auto">
+            <EbookCaptureForm
+              sourceLp="no-brainer"
+              accentColor={GREEN}
+              buttonText="Get the Full Cost Breakdown"
+              variant="card"
+              className="bg-white/10 border-white/20 text-white"
+            />
+          </div>
+        </div>
+      </section>
+
+      {/* Pay Now */}
+      <section className="py-20 px-6" style={{ backgroundColor: '#F9FAFB' }}>
+        <div className="max-w-xl mx-auto">
+          <div className="text-center mb-10">
+            <h2 className="text-3xl md:text-4xl font-black mb-3" style={{ color: '#111827' }}>
+              The Math Checks Out
+            </h2>
+            <p style={{ color: '#6B7280' }}>
+              $1.30/day. 5-star resort. All-inclusive. It really is that simple.
+            </p>
+          </div>
+
+          <div
+            className="rounded-2xl p-8 shadow-lg"
+            style={{
+              backgroundColor: 'white',
+              border: `2px solid ${GREEN}`,
+            }}
+          >
+            <div className="text-center mb-6">
+              <div
+                className="inline-flex items-center gap-2 px-3 py-1 rounded-full text-xs font-bold text-white mb-3"
+                style={{ backgroundColor: GREEN }}
+              >
+                <Zap className="w-3 h-3" /> NO-BRAINER DEAL
+              </div>
+              <p className="text-sm line-through" style={{ color: '#9CA3AF' }}>
+                $59/mo
+              </p>
+              <span className="text-5xl font-black" style={{ color: INDIGO }}>
+                ${PAYMENT_CONFIG.monthlyPrice}
+              </span>
+              <span style={{ color: '#6B7280' }}>
+                /mo x {PAYMENT_CONFIG.totalMonths} months
+              </span>
+              <p className="text-sm mt-1" style={{ color: '#9CA3AF' }}>
+                or ${PAYMENT_CONFIG.oneTimePrice} one-time &middot; 30-day money-back guarantee
+              </p>
+              <p className="text-xs mt-2 font-medium" style={{ color: GREEN }}>
+                = $1.30/day for a luxury Mexico vacation
+              </p>
+            </div>
+
+            <PayNowForm
+              accentColor={INDIGO}
+              buttonText="It's a No-Brainer"
+            />
+          </div>
+
+          <TrustBadges variant="compact" className="mt-6" />
+        </div>
+      </section>
+
+      {/* Testimonials */}
+      <section className="py-20 px-6" style={{ backgroundColor: 'white' }}>
+        <div className="max-w-5xl mx-auto">
+          <h2 className="text-3xl md:text-4xl font-black text-center mb-12" style={{ color: '#111827' }}>
+            Smart People Who Did the Math
+          </h2>
+          <div className="grid md:grid-cols-3 gap-6">
+            {TESTIMONIALS.slice(0, 3).map((t) => (
+              <TestimonialCard
+                key={t.name}
+                quote={t.quote}
+                name={t.name}
+                location={t.location}
+                photo={t.photo}
+              />
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <InfluencerBuzz />
+
+      {/* FAQ */}
+      <section className="py-20 px-6" style={{ backgroundColor: '#F9FAFB' }}>
+        <div className="max-w-2xl mx-auto">
+          <h2 className="text-3xl font-black text-center mb-10" style={{ color: '#111827' }}>
+            Frequently Asked Questions
+          </h2>
+          <FAQAccordion />
+        </div>
+      </section>
+
+      {/* Final CTA */}
+      <section
+        className="py-16 px-6 text-center"
+        style={{
+          background: `linear-gradient(135deg, ${INDIGO} 0%, ${GREEN} 100%)`,
+        }}
+      >
+        <Brain className="w-8 h-8 mx-auto mb-4 text-white" />
+        <h2 className="text-2xl md:text-3xl font-black text-white mb-3">
+          $1.30/Day. 5-Star Resort. All-Inclusive.
+        </h2>
+        <p className="text-white/60 mb-2 text-sm">
+          The math is clear. The deal expires when the timer hits zero.
+        </p>
+        <div className="flex justify-center mb-6">
+          <CountdownTimer minutes={30} variant="minimal" accentColor="white" />
+        </div>
+        <div className="max-w-md mx-auto">
+          <EbookCaptureForm
+            sourceLp="no-brainer"
+            accentColor={GREEN}
+            buttonText="Get the Free Cost Breakdown"
+            variant="inline"
+          />
+        </div>
+      </section>
+
+      <StickyMobileCTA
+        accentColor={INDIGO}
+        buttonText="Get Free Guide"
+        targetId="signup-form"
+      />
+    </div>
+  )
+}
diff --git a/src/components/lp/pages/LP36WeekendEscape.tsx b/src/components/lp/pages/LP36WeekendEscape.tsx
new file mode 100644
index 0000000..baf707c
--- /dev/null
+++ b/src/components/lp/pages/LP36WeekendEscape.tsx
@@ -0,0 +1,493 @@
+'use client'
+
+import { useState } from 'react'
+import {
+  Calendar, Sun, Plane, MapPin, Clock, CheckCircle2,
+  ArrowRight, Sparkles, Star, ChevronRight, Heart,
+  CalendarDays, CalendarCheck, Palmtree, Umbrella,
+  Coffee, Sunset, PartyPopper, Shield,
+} from 'lucide-react'
+import EbookCaptureForm from '@/components/lp/shared/EbookCaptureForm'
+import PayNowForm from '@/components/lp/shared/PayNowForm'
+import CountdownTimer from '@/components/lp/shared/CountdownTimer'
+import TrustBadges from '@/components/lp/shared/TrustBadges'
+import StickyMobileCTA from '@/components/lp/shared/StickyMobileCTA'
+import TestimonialCard from '@/components/lp/shared/TestimonialCard'
+import DestinationCarousel from '@/components/lp/shared/DestinationCarousel'
+import SocialProofTicker from '@/components/lp/shared/SocialProofTicker'
+import FAQAccordion from '@/components/lp/shared/FAQAccordion'
+import UrgencyBanner from '@/components/lp/shared/UrgencyBanner'
+import InfluencerBuzz from '@/components/lp/shared/InfluencerBuzz'
+import { PAYMENT_CONFIG, TESTIMONIALS, FAQ_ITEMS } from '@/app/lp/_config/types'
+
+const SKY_BLUE = '#0EA5E9'
+const ORANGE = '#F97316'
+const WHITE = '#FFFFFF'
+
+const calendarDays = [
+  { day: 'Mon', date: 12, type: 'normal' },
+  { day: 'Tue', date: 13, type: 'normal' },
+  { day: 'Wed', date: 14, type: 'vacation' },
+  { day: 'Thu', date: 15, type: 'vacation' },
+  { day: 'Fri', date: 16, type: 'vacation' },
+  { day: 'Sat', date: 17, type: 'vacation' },
+  { day: 'Sun', date: 18, type: 'vacation' },
+  { day: 'Mon', date: 19, type: 'normal' },
+  { day: 'Tue', date: 20, type: 'normal' },
+]
+
+const flexFeatures = [
+  {
+    icon: CalendarDays,
+    title: 'Pick Any 5 Days',
+    description: 'No fixed dates. Choose when YOU want to go within 18 months.',
+  },
+  {
+    icon: Plane,
+    title: 'Any Airport, Any Airline',
+    description: 'Fly from wherever is most convenient. We handle the resort.',
+  },
+  {
+    icon: MapPin,
+    title: '4 Stunning Destinations',
+    description: 'Cancun, Cabo, Riviera Maya, or Puerto Vallarta — your pick.',
+  },
+  {
+    icon: Umbrella,
+    title: 'All-Inclusive Everything',
+    description: 'Food, drinks, activities, pools, beach — all included.',
+  },
+]
+
+const weekendIdeas = [
+  {
+    title: 'The Long Weekend',
+    dates: 'Thu–Mon',
+    description: 'Take 2 days off, get a 5-day paradise escape. Back by Tuesday.',
+    image: '/images/cdn/photo-1507525428034-b723cf961d3e.jpg',
+  },
+  {
+    title: 'The Mid-Week Reset',
+    dates: 'Mon–Fri',
+    description: 'Skip one work week. Come back completely recharged.',
+    image: '/images/cdn/photo-1510097467424-192d713fd8b2.jpg',
+  },
+  {
+    title: 'The Holiday Extension',
+    dates: 'Around any holiday',
+    description: 'Attach your trip to a long weekend. Maximize your PTO.',
+    image: '/images/cdn/photo-1512100356356-de1b84283e18.jpg',
+  },
+  {
+    title: 'The Celebration Trip',
+    dates: 'Any special date',
+    description: 'Birthday? Anniversary? Make it unforgettable in Mexico.',
+    image: '/images/cdn/photo-1581710862235-eb6e05d8783f.jpg',
+  },
+]
+
+const dailyBreakdown = [
+  { icon: Coffee, label: 'Morning', text: 'Wake up to ocean views, gourmet breakfast buffet' },
+  { icon: Sun, label: 'Afternoon', text: 'Pool, beach, snorkeling, spa — your choice' },
+  { icon: Sunset, label: 'Evening', text: 'Sunset cocktails, fine dining, live entertainment' },
+  { icon: PartyPopper, label: 'Night', text: 'Dance, stargaze, or just listen to the waves' },
+]
+
+export default function LP36WeekendEscape() {
+  const [selectedDay, setSelectedDay] = useState<number | null>(null)
+
+  return (
+    <div className="min-h-screen bg-white" style={{ fontFamily: 'var(--font-quicksand), sans-serif' }}>
+      <UrgencyBanner variant="countdown" />
+
+      {/* Hero Section */}
+      <section
+        className="relative pt-20 pb-16 overflow-hidden"
+        style={{
+          background: `linear-gradient(135deg, ${SKY_BLUE} 0%, #38BDF8 50%, ${ORANGE} 100%)`,
+        }}
+      >
+        <div className="absolute inset-0 opacity-10">
+          <div className="absolute top-10 left-10 w-64 h-64 rounded-full bg-white/20 blur-3xl" />
+          <div className="absolute bottom-10 right-10 w-96 h-96 rounded-full bg-white/10 blur-3xl" />
+        </div>
+
+        <div className="relative max-w-6xl mx-auto px-4 text-center text-white">
+          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/20 backdrop-blur-sm mb-6">
+            <Calendar className="w-4 h-4" />
+            <span className="text-sm font-medium">Limited Time: Special Weekend Pricing</span>
+          </div>
+
+          <h1
+            className="text-4xl md:text-6xl lg:text-7xl font-bold mb-6 leading-tight"
+            style={{ fontFamily: 'var(--font-poppins), sans-serif' }}
+          >
+            Turn Any Week Into
+            <br />
+            <span className="relative">
+              <span className="relative z-10">Paradise</span>
+              <span
+                className="absolute -bottom-2 left-0 right-0 h-3 opacity-40 rounded"
+                style={{ backgroundColor: ORANGE }}
+              />
+            </span>
+          </h1>
+
+          <p className="text-xl md:text-2xl mb-4 text-white/90 max-w-2xl mx-auto">
+            5 days & 4 nights all-inclusive in Mexico.
+            <br />
+            <strong>Pick any 5 days. We handle the rest.</strong>
+          </p>
+
+          <div className="flex items-center justify-center gap-3 mb-8">
+            <span className="text-lg line-through text-white/60">$59/mo</span>
+            <span className="text-3xl font-bold">${PAYMENT_CONFIG.monthlyPrice}/mo</span>
+            <span className="px-3 py-1 rounded-full text-sm font-bold" style={{ backgroundColor: ORANGE }}>
+              SAVE 34%
+            </span>
+          </div>
+
+          {/* Calendar Visual */}
+          <div className="max-w-lg mx-auto bg-white/10 backdrop-blur-md rounded-2xl p-6 mb-8">
+            <div className="flex items-center justify-between mb-4">
+              <h3
+                className="text-lg font-semibold"
+                style={{ fontFamily: 'var(--font-poppins), sans-serif' }}
+              >
+                Your Calendar
+              </h3>
+              <span className="text-sm text-white/70">March 2026</span>
+            </div>
+            <div className="grid grid-cols-9 gap-2">
+              {calendarDays.map((d, i) => (
+                <button
+                  key={i}
+                  onClick={() => setSelectedDay(i)}
+                  className={`flex flex-col items-center p-2 rounded-lg transition-all ${
+                    d.type === 'vacation'
+                      ? 'bg-orange-400/90 text-white scale-105 shadow-lg'
+                      : 'bg-white/10 text-white/70 hover:bg-white/20'
+                  } ${selectedDay === i ? 'ring-2 ring-white' : ''}`}
+                >
+                  <span className="text-[10px] uppercase">{d.day}</span>
+                  <span className="text-lg font-bold">{d.date}</span>
+                  {d.type === 'vacation' && <Sun className="w-3 h-3 mt-0.5" />}
+                </button>
+              ))}
+            </div>
+            <div className="flex items-center justify-center gap-4 mt-4 text-sm text-white/80">
+              <span className="flex items-center gap-1">
+                <span className="w-3 h-3 rounded bg-orange-400" /> Paradise days
+              </span>
+              <span className="flex items-center gap-1">
+                <span className="w-3 h-3 rounded bg-white/20" /> Regular days
+              </span>
+            </div>
+          </div>
+
+          <a
+            href="#signup-form"
+            className="inline-flex items-center gap-2 px-8 py-4 rounded-full text-lg font-bold text-white shadow-xl hover:scale-105 transition-transform"
+            style={{ backgroundColor: ORANGE }}
+          >
+            Plan My Escape <ArrowRight className="w-5 h-5" />
+          </a>
+        </div>
+      </section>
+
+      <SocialProofTicker />
+
+      {/* Flexibility Features */}
+      <section className="py-20 px-4 bg-sky-50">
+        <div className="max-w-6xl mx-auto">
+          <h2
+            className="text-3xl md:text-5xl font-bold text-center mb-4"
+            style={{ fontFamily: 'var(--font-poppins), sans-serif', color: SKY_BLUE }}
+          >
+            Total Flexibility. Zero Stress.
+          </h2>
+          <p className="text-center text-gray-600 text-lg mb-12 max-w-2xl mx-auto">
+            Stop waiting for the &ldquo;perfect time.&rdquo; With our flexible certificates,
+            <strong> any time becomes the perfect time.</strong>
+          </p>
+
+          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+            {flexFeatures.map((f, i) => (
+              <div
+                key={i}
+                className="bg-white rounded-2xl p-6 shadow-md hover:shadow-xl transition-shadow border border-sky-100"
+              >
+                <div
+                  className="w-14 h-14 rounded-xl flex items-center justify-center mb-4"
+                  style={{ backgroundColor: `${SKY_BLUE}15` }}
+                >
+                  <f.icon className="w-7 h-7" style={{ color: SKY_BLUE }} />
+                </div>
+                <h3
+                  className="text-xl font-bold mb-2 text-gray-900"
+                  style={{ fontFamily: 'var(--font-poppins), sans-serif' }}
+                >
+                  {f.title}
+                </h3>
+                <p className="text-gray-600">{f.description}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Weekend Ideas */}
+      <section className="py-20 px-4 bg-white">
+        <div className="max-w-6xl mx-auto">
+          <h2
+            className="text-3xl md:text-5xl font-bold text-center mb-4"
+            style={{ fontFamily: 'var(--font-poppins), sans-serif' }}
+          >
+            4 Ways to Plan Your <span style={{ color: ORANGE }}>Escape</span>
+          </h2>
+          <p className="text-center text-gray-500 text-lg mb-12">
+            However you slice it, paradise fits into your schedule.
+          </p>
+
+          <div className="grid md:grid-cols-2 gap-8">
+            {weekendIdeas.map((idea, i) => (
+              <div
+                key={i}
+                className="group rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl transition-all"
+              >
+                <div className="relative h-48 overflow-hidden">
+                  <img
+                    src={idea.image}
+                    alt={idea.title}
+                    className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
+                  />
+                  <div className="absolute top-4 left-4 px-3 py-1 rounded-full bg-white/90 text-sm font-semibold" style={{ color: SKY_BLUE }}>
+                    {idea.dates}
+                  </div>
+                </div>
+                <div className="p-6 bg-white">
+                  <h3
+                    className="text-xl font-bold mb-2"
+                    style={{ fontFamily: 'var(--font-poppins), sans-serif' }}
+                  >
+                    {idea.title}
+                  </h3>
+                  <p className="text-gray-600">{idea.description}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Daily Breakdown */}
+      <section
+        className="py-20 px-4"
+        style={{ background: `linear-gradient(180deg, ${SKY_BLUE}08 0%, ${SKY_BLUE}15 100%)` }}
+      >
+        <div className="max-w-4xl mx-auto">
+          <h2
+            className="text-3xl md:text-5xl font-bold text-center mb-4"
+            style={{ fontFamily: 'var(--font-poppins), sans-serif' }}
+          >
+            A Day in <span style={{ color: SKY_BLUE }}>Paradise</span>
+          </h2>
+          <p className="text-center text-gray-500 text-lg mb-12">
+            Every day is designed for pure enjoyment. Here&apos;s a taste.
+          </p>
+
+          <div className="space-y-6">
+            {dailyBreakdown.map((item, i) => (
+              <div key={i} className="flex items-start gap-6 bg-white rounded-2xl p-6 shadow-md">
+                <div
+                  className="w-16 h-16 rounded-2xl flex-shrink-0 flex items-center justify-center"
+                  style={{ backgroundColor: `${ORANGE}15` }}
+                >
+                  <item.icon className="w-8 h-8" style={{ color: ORANGE }} />
+                </div>
+                <div>
+                  <h4
+                    className="text-lg font-bold mb-1"
+                    style={{ fontFamily: 'var(--font-poppins), sans-serif', color: SKY_BLUE }}
+                  >
+                    {item.label}
+                  </h4>
+                  <p className="text-gray-600 text-lg">{item.text}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Pricing Anchor */}
+      <section className="py-20 px-4 bg-white">
+        <div className="max-w-4xl mx-auto text-center">
+          <h2
+            className="text-3xl md:text-5xl font-bold mb-4"
+            style={{ fontFamily: 'var(--font-poppins), sans-serif' }}
+          >
+            Less Than Your <span style={{ color: ORANGE }}>Daily Coffee</span>
+          </h2>
+          <p className="text-gray-500 text-lg mb-8">
+            At ${PAYMENT_CONFIG.monthlyPrice}/mo, that&apos;s just <strong>$1.30/day</strong> for 5 days of all-inclusive paradise.
+          </p>
+
+          <div className="grid md:grid-cols-3 gap-4 mb-12">
+            <div className="bg-gray-50 rounded-xl p-6 text-center">
+              <p className="text-4xl font-bold text-gray-300 line-through">$3,200+</p>
+              <p className="text-sm text-gray-400 mt-1">Typical all-inclusive vacation</p>
+            </div>
+            <div className="bg-gray-50 rounded-xl p-6 text-center">
+              <p className="text-4xl font-bold text-gray-300 line-through">$59/mo</p>
+              <p className="text-sm text-gray-400 mt-1">Regular certificate price</p>
+            </div>
+            <div className="rounded-xl p-6 text-center border-2" style={{ borderColor: ORANGE, backgroundColor: `${ORANGE}08` }}>
+              <p className="text-4xl font-bold" style={{ color: ORANGE }}>${PAYMENT_CONFIG.monthlyPrice}/mo</p>
+              <p className="text-sm font-semibold mt-1" style={{ color: SKY_BLUE }}>Your price today</p>
+            </div>
+          </div>
+
+          <CountdownTimer
+            minutes={30}
+            message="Special pricing available for"
+            accentColor={ORANGE}
+          />
+        </div>
+      </section>
+
+      {/* Destination Carousel */}
+      <section className="py-20 px-4 bg-sky-50">
+        <div className="max-w-6xl mx-auto">
+          <h2
+            className="text-3xl md:text-5xl font-bold text-center mb-4"
+            style={{ fontFamily: 'var(--font-poppins), sans-serif', color: SKY_BLUE }}
+          >
+            Choose Your Destination
+          </h2>
+          <p className="text-center text-gray-600 mb-12">
+            Four incredible Mexican destinations. All yours to explore.
+          </p>
+          <DestinationCarousel />
+        </div>
+      </section>
+
+      {/* Testimonials */}
+      <section className="py-20 px-4 bg-white">
+        <div className="max-w-6xl mx-auto">
+          <h2
+            className="text-3xl md:text-5xl font-bold text-center mb-12"
+            style={{ fontFamily: 'var(--font-poppins), sans-serif' }}
+          >
+            Travelers Who <span style={{ color: SKY_BLUE }}>Took the Leap</span>
+          </h2>
+          <div className="grid md:grid-cols-3 gap-6">
+            {TESTIMONIALS.slice(0, 3).map((t, i) => (
+              <TestimonialCard key={i} quote={t.quote} name={t.name} location={t.location} photo={t.photo} />
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Primary CTA - Ebook */}
+      <section
+        id="signup-form"
+        className="py-20 px-4"
+        style={{ background: `linear-gradient(135deg, ${SKY_BLUE} 0%, #0284C7 100%)` }}
+      >
+        <div className="max-w-2xl mx-auto text-center">
+          <CalendarCheck className="w-16 h-16 text-white/80 mx-auto mb-6" />
+          <h2
+            className="text-3xl md:text-5xl font-bold text-white mb-4"
+            style={{ fontFamily: 'var(--font-poppins), sans-serif' }}
+          >
+            Get the Date Planning Guide
+          </h2>
+          <p className="text-white/80 text-lg mb-8">
+            Our free &ldquo;Budget Luxury Travel&rdquo; ebook shows you exactly how to plan
+            the perfect getaway around your schedule. Download it now before this offer expires.
+          </p>
+
+          <EbookCaptureForm
+            sourceLp="weekend-escape"
+            accentColor={ORANGE}
+            buttonText="Get the Date Planning Guide"
+            variant="card"
+          />
+
+          <p className="text-white/50 text-sm mt-4">
+            Free instant download. No spam, ever.
+          </p>
+        </div>
+      </section>
+
+      {/* Secondary CTA - Pay Now */}
+      <section className="py-20 px-4 bg-gray-50">
+        <div className="max-w-2xl mx-auto text-center">
+          <h2
+            className="text-3xl md:text-4xl font-bold mb-4"
+            style={{ fontFamily: 'var(--font-poppins), sans-serif' }}
+          >
+            Ready to Book? <span style={{ color: ORANGE }}>Lock In Your Rate</span>
+          </h2>
+          <p className="text-gray-600 mb-2">
+            Don&apos;t let this price slip away. Once the timer hits zero, the rate goes back to $59/mo.
+          </p>
+          <p className="text-gray-400 text-sm mb-8">
+            30-day money-back guarantee. Cancel anytime.
+          </p>
+
+          <PayNowForm accentColor={ORANGE} />
+        </div>
+      </section>
+
+      {/* Trust Badges */}
+      <section className="py-12 px-4 bg-white">
+        <TrustBadges />
+      </section>
+
+      {/* FAQ */}
+      <InfluencerBuzz />
+
+      <section className="py-20 px-4 bg-sky-50">
+        <div className="max-w-3xl mx-auto">
+          <h2
+            className="text-3xl md:text-4xl font-bold text-center mb-12"
+            style={{ fontFamily: 'var(--font-poppins), sans-serif', color: SKY_BLUE }}
+          >
+            Questions? We&apos;ve Got Answers
+          </h2>
+          <FAQAccordion items={FAQ_ITEMS} />
+        </div>
+      </section>
+
+      {/* Final CTA Banner */}
+      <section
+        className="py-16 px-4 text-center text-white"
+        style={{ background: `linear-gradient(135deg, ${ORANGE} 0%, #EA580C 100%)` }}
+      >
+        <h2
+          className="text-2xl md:text-4xl font-bold mb-4"
+          style={{ fontFamily: 'var(--font-poppins), sans-serif' }}
+        >
+          Your Calendar Deserves Some Color
+        </h2>
+        <p className="text-white/80 text-lg mb-6 max-w-xl mx-auto">
+          Stop scrolling. Start planning. 5 days of paradise are waiting for you.
+        </p>
+        <a
+          href="#signup-form"
+          className="inline-flex items-center gap-2 px-8 py-4 bg-white rounded-full text-lg font-bold shadow-xl hover:scale-105 transition-transform"
+          style={{ color: ORANGE }}
+        >
+          Claim My Spot <ArrowRight className="w-5 h-5" />
+        </a>
+      </section>
+
+      <StickyMobileCTA
+        buttonText="Plan My Escape"
+        accentColor={ORANGE}
+      />
+    </div>
+  )
+}
diff --git a/src/components/lp/pages/LP37TrustFall.tsx b/src/components/lp/pages/LP37TrustFall.tsx
new file mode 100644
index 0000000..1b54363
--- /dev/null
+++ b/src/components/lp/pages/LP37TrustFall.tsx
@@ -0,0 +1,459 @@
+'use client'
+
+import {
+  Star, Shield, CheckCircle2, Award, Users, ThumbsUp,
+  Quote, ArrowRight, BadgeCheck, MessageSquare, Eye,
+  Lock, Heart, TrendingUp, Verified, Clock,
+  ShieldCheck, Sparkles, ChevronRight,
+} from 'lucide-react'
+import EbookCaptureForm from '@/components/lp/shared/EbookCaptureForm'
+import PayNowForm from '@/components/lp/shared/PayNowForm'
+import CountdownTimer from '@/components/lp/shared/CountdownTimer'
+import TrustBadges from '@/components/lp/shared/TrustBadges'
+import StickyMobileCTA from '@/components/lp/shared/StickyMobileCTA'
+import TestimonialCard from '@/components/lp/shared/TestimonialCard'
+import TikTokCarousel from '@/components/lp/shared/TikTokCarousel'
+import SocialProofTicker from '@/components/lp/shared/SocialProofTicker'
+import FAQAccordion from '@/components/lp/shared/FAQAccordion'
+import ComparisonTable from '@/components/lp/shared/ComparisonTable'
+import UrgencyBanner from '@/components/lp/shared/UrgencyBanner'
+import InfluencerBuzz from '@/components/lp/shared/InfluencerBuzz'
+import { PAYMENT_CONFIG, TESTIMONIALS, FAQ_ITEMS } from '@/app/lp/_config/types'
+
+const DARK_BLUE = '#1E3A5F'
+const GOLD = '#F59E0B'
+const WHITE = '#FFFFFF'
+
+const stats = [
+  { value: '4.8', suffix: '★', label: 'Average Rating', icon: Star },
+  { value: '2,847', suffix: '', label: 'Happy Travelers', icon: Users },
+  { value: '98', suffix: '%', label: 'Satisfaction Rate', icon: ThumbsUp },
+  { value: '30', suffix: '-day', label: 'Money-Back Guarantee', icon: Shield },
+]
+
+const trustPoints = [
+  {
+    icon: ShieldCheck,
+    title: '30-Day Full Refund',
+    description: 'Not satisfied? Get 100% of your money back within 30 days. No questions, no hassle.',
+  },
+  {
+    icon: Lock,
+    title: 'Secure Payment',
+    description: 'Bank-level 256-bit SSL encryption. Your financial data is always protected.',
+  },
+  {
+    icon: BadgeCheck,
+    title: 'Verified Resorts',
+    description: 'Every resort is personally inspected and rated 4+ stars by our team.',
+  },
+  {
+    icon: Verified,
+    title: 'Real Reviews Only',
+    description: 'Every review is from a verified guest. Zero fake testimonials, ever.',
+  },
+  {
+    icon: Award,
+    title: 'BBB Accredited',
+    description: 'A+ rating with the Better Business Bureau since 2019.',
+  },
+  {
+    icon: Heart,
+    title: 'Family-Owned',
+    description: 'Not a faceless corporation. Real people who care about your experience.',
+  },
+]
+
+const reviewHighlights = [
+  { text: 'Best vacation deal we\'ve ever found', count: 847, stars: 5 },
+  { text: 'The resort was even better than the photos', count: 623, stars: 5 },
+  { text: 'Worth every penny — exceeded expectations', count: 512, stars: 5 },
+  { text: 'Already planning our second trip', count: 489, stars: 5 },
+  { text: 'Customer service was phenomenal', count: 394, stars: 5 },
+  { text: 'All-inclusive really means ALL inclusive', count: 371, stars: 4 },
+]
+
+const ratingDistribution = [
+  { stars: 5, percentage: 78, count: 2221 },
+  { stars: 4, percentage: 16, count: 455 },
+  { stars: 3, percentage: 4, count: 114 },
+  { stars: 2, percentage: 1, count: 28 },
+  { stars: 1, percentage: 1, count: 29 },
+]
+
+export default function LP37TrustFall() {
+  return (
+    <div className="min-h-screen bg-white" style={{ fontFamily: 'var(--font-open-sans), sans-serif' }}>
+      <UrgencyBanner variant="countdown" />
+
+      {/* Hero Section */}
+      <section className="relative pt-20 pb-20 overflow-hidden" style={{ backgroundColor: DARK_BLUE }}>
+        <div className="absolute inset-0 opacity-5">
+          <div className="absolute top-0 left-0 w-full h-full"
+            style={{
+              backgroundImage: 'radial-gradient(circle at 25% 25%, rgba(245,158,11,0.3) 0%, transparent 50%), radial-gradient(circle at 75% 75%, rgba(245,158,11,0.2) 0%, transparent 50%)',
+            }}
+          />
+        </div>
+
+        <div className="relative max-w-6xl mx-auto px-4 text-center text-white">
+          <div className="inline-flex items-center gap-1 mb-6">
+            {[1, 2, 3, 4, 5].map((s) => (
+              <Star key={s} className="w-8 h-8 fill-current" style={{ color: GOLD }} />
+            ))}
+          </div>
+
+          <h1
+            className="text-4xl md:text-6xl lg:text-7xl font-bold mb-6 leading-tight"
+            style={{ fontFamily: 'var(--font-merriweather), serif' }}
+          >
+            Don&apos;t Trust Us.
+            <br />
+            Trust <span style={{ color: GOLD }}>2,847 Travelers.</span>
+          </h1>
+
+          <p className="text-xl md:text-2xl mb-4 text-white/80 max-w-2xl mx-auto">
+            5 days & 4 nights all-inclusive in Mexico. See why thousands of travelers
+            rate us <strong>4.8 out of 5 stars</strong>.
+          </p>
+
+          <div className="flex items-center justify-center gap-3 mb-8">
+            <span className="text-lg line-through text-white/50">$59/mo</span>
+            <span className="text-3xl font-bold">${PAYMENT_CONFIG.monthlyPrice}/mo</span>
+            <span className="px-3 py-1 rounded-full text-sm font-bold" style={{ backgroundColor: GOLD, color: DARK_BLUE }}>
+              SAVE 34%
+            </span>
+          </div>
+
+          {/* Stats Bar */}
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 max-w-3xl mx-auto mb-10">
+            {stats.map((s, i) => (
+              <div key={i} className="bg-white/10 backdrop-blur-sm rounded-xl p-4">
+                <s.icon className="w-6 h-6 mx-auto mb-2" style={{ color: GOLD }} />
+                <p className="text-2xl md:text-3xl font-bold">
+                  {s.value}<span className="text-lg" style={{ color: GOLD }}>{s.suffix}</span>
+                </p>
+                <p className="text-xs text-white/60 mt-1">{s.label}</p>
+              </div>
+            ))}
+          </div>
+
+          <a
+            href="#signup-form"
+            className="inline-flex items-center gap-2 px-8 py-4 rounded-full text-lg font-bold shadow-xl hover:scale-105 transition-transform"
+            style={{ backgroundColor: GOLD, color: DARK_BLUE }}
+          >
+            See All Reviews <ArrowRight className="w-5 h-5" />
+          </a>
+        </div>
+      </section>
+
+      <SocialProofTicker />
+
+      {/* Rating Distribution */}
+      <section className="py-20 px-4 bg-gray-50">
+        <div className="max-w-4xl mx-auto">
+          <h2
+            className="text-3xl md:text-5xl font-bold text-center mb-4"
+            style={{ fontFamily: 'var(--font-merriweather), serif', color: DARK_BLUE }}
+          >
+            The Numbers Don&apos;t Lie
+          </h2>
+          <p className="text-center text-gray-500 text-lg mb-12">
+            Based on 2,847 verified traveler reviews
+          </p>
+
+          <div className="grid md:grid-cols-2 gap-12 items-center">
+            {/* Overall Rating */}
+            <div className="text-center">
+              <p className="text-8xl font-bold" style={{ color: DARK_BLUE }}>4.8</p>
+              <div className="flex items-center justify-center gap-1 my-3">
+                {[1, 2, 3, 4, 5].map((s) => (
+                  <Star key={s} className="w-6 h-6 fill-current" style={{ color: GOLD }} />
+                ))}
+              </div>
+              <p className="text-gray-500">2,847 reviews</p>
+            </div>
+
+            {/* Distribution Bars */}
+            <div className="space-y-3">
+              {ratingDistribution.map((r) => (
+                <div key={r.stars} className="flex items-center gap-3">
+                  <div className="flex items-center gap-1 w-16">
+                    <span className="text-sm font-medium text-gray-600">{r.stars}</span>
+                    <Star className="w-4 h-4 fill-current" style={{ color: GOLD }} />
+                  </div>
+                  <div className="flex-1 bg-gray-200 rounded-full h-3 overflow-hidden">
+                    <div
+                      className="h-full rounded-full transition-all duration-1000"
+                      style={{ width: `${r.percentage}%`, backgroundColor: GOLD }}
+                    />
+                  </div>
+                  <span className="text-sm text-gray-400 w-12 text-right">{r.count}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Review Highlights */}
+      <section className="py-20 px-4 bg-white">
+        <div className="max-w-6xl mx-auto">
+          <h2
+            className="text-3xl md:text-5xl font-bold text-center mb-4"
+            style={{ fontFamily: 'var(--font-merriweather), serif', color: DARK_BLUE }}
+          >
+            What Travelers Say Most
+          </h2>
+          <p className="text-center text-gray-500 text-lg mb-12">
+            The most common themes from verified reviews
+          </p>
+
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {reviewHighlights.map((r, i) => (
+              <div key={i} className="bg-gray-50 rounded-xl p-5 border border-gray-100 hover:shadow-md transition-shadow">
+                <div className="flex items-center gap-1 mb-2">
+                  {Array.from({ length: r.stars }).map((_, j) => (
+                    <Star key={j} className="w-4 h-4 fill-current" style={{ color: GOLD }} />
+                  ))}
+                </div>
+                <p className="font-semibold text-gray-800 mb-2">&ldquo;{r.text}&rdquo;</p>
+                <p className="text-sm text-gray-400">
+                  <MessageSquare className="w-3 h-3 inline mr-1" />
+                  Mentioned in {r.count} reviews
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Full Testimonial Grid */}
+      <section className="py-20 px-4" style={{ backgroundColor: `${DARK_BLUE}05` }}>
+        <div className="max-w-6xl mx-auto">
+          <h2
+            className="text-3xl md:text-5xl font-bold text-center mb-4"
+            style={{ fontFamily: 'var(--font-merriweather), serif', color: DARK_BLUE }}
+          >
+            Real Stories From Real Travelers
+          </h2>
+          <p className="text-center text-gray-500 text-lg mb-12">
+            Every review is verified. Every traveler is real.
+          </p>
+
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {TESTIMONIALS.map((t, i) => (
+              <TestimonialCard key={i} quote={t.quote} name={t.name} location={t.location} photo={t.photo} />
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* TikTok Videos */}
+      <section className="py-20 px-4 bg-white">
+        <div className="max-w-6xl mx-auto">
+          <h2
+            className="text-3xl md:text-5xl font-bold text-center mb-4"
+            style={{ fontFamily: 'var(--font-merriweather), serif', color: DARK_BLUE }}
+          >
+            Watch Real Travelers at Our Resorts
+          </h2>
+          <p className="text-center text-gray-500 text-lg mb-12">
+            Don&apos;t just take our word for it. See it for yourself.
+          </p>
+          <TikTokCarousel
+            title=""
+            subtitle=""
+          />
+        </div>
+      </section>
+
+      {/* Trust Points */}
+      <section className="py-20 px-4 bg-gray-50">
+        <div className="max-w-6xl mx-auto">
+          <h2
+            className="text-3xl md:text-5xl font-bold text-center mb-4"
+            style={{ fontFamily: 'var(--font-merriweather), serif', color: DARK_BLUE }}
+          >
+            Your Trust Is <span style={{ color: GOLD }}>Everything</span>
+          </h2>
+          <p className="text-center text-gray-500 text-lg mb-12">
+            We know you&apos;re careful with your money. Here&apos;s why we&apos;ve earned the trust of thousands.
+          </p>
+
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {trustPoints.map((tp, i) => (
+              <div key={i} className="bg-white rounded-2xl p-6 shadow-md border border-gray-100">
+                <div
+                  className="w-14 h-14 rounded-xl flex items-center justify-center mb-4"
+                  style={{ backgroundColor: `${GOLD}15` }}
+                >
+                  <tp.icon className="w-7 h-7" style={{ color: GOLD }} />
+                </div>
+                <h3
+                  className="text-lg font-bold mb-2"
+                  style={{ fontFamily: 'var(--font-merriweather), serif', color: DARK_BLUE }}
+                >
+                  {tp.title}
+                </h3>
+                <p className="text-gray-600 text-sm">{tp.description}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Trust Badges - Larger */}
+      <section className="py-16 px-4 bg-white">
+        <div className="max-w-4xl mx-auto">
+          <TrustBadges />
+        </div>
+      </section>
+
+      {/* Comparison Table */}
+      <section className="py-20 px-4 bg-gray-50">
+        <div className="max-w-4xl mx-auto">
+          <h2
+            className="text-3xl md:text-4xl font-bold text-center mb-4"
+            style={{ fontFamily: 'var(--font-merriweather), serif', color: DARK_BLUE }}
+          >
+            See How We Compare
+          </h2>
+          <p className="text-center text-gray-500 mb-12">
+            Side-by-side with traditional booking options
+          </p>
+          <ComparisonTable accentColor={GOLD} />
+        </div>
+      </section>
+
+      {/* Pricing + Countdown */}
+      <section className="py-20 px-4 bg-white">
+        <div className="max-w-4xl mx-auto text-center">
+          <h2
+            className="text-3xl md:text-5xl font-bold mb-4"
+            style={{ fontFamily: 'var(--font-merriweather), serif', color: DARK_BLUE }}
+          >
+            The Price Won&apos;t Last
+          </h2>
+          <p className="text-gray-500 text-lg mb-4">
+            Regular price: <span className="line-through">$59/mo</span>. Today only:
+            <strong style={{ color: GOLD }}> ${PAYMENT_CONFIG.monthlyPrice}/mo</strong> or
+            <strong style={{ color: GOLD }}> ${PAYMENT_CONFIG.oneTimePrice} one-time</strong>.
+          </p>
+          <p className="text-gray-400 text-sm mb-8">
+            2,847 travelers trusted us. You can too. 30-day money-back guarantee.
+          </p>
+
+          <CountdownTimer
+            minutes={30}
+            message="This special rate expires in"
+            accentColor={GOLD}
+          />
+        </div>
+      </section>
+
+      {/* FAQ */}
+      <section className="py-20 px-4 bg-gray-50">
+        <div className="max-w-3xl mx-auto">
+          <InfluencerBuzz />
+
+          <h2
+            className="text-3xl md:text-4xl font-bold text-center mb-4"
+            style={{ fontFamily: 'var(--font-merriweather), serif', color: DARK_BLUE }}
+          >
+            Still Have Questions?
+          </h2>
+          <p className="text-center text-gray-500 mb-12">
+            We believe in total transparency. Here are the most common questions.
+          </p>
+          <FAQAccordion items={FAQ_ITEMS} />
+        </div>
+      </section>
+
+      {/* Primary CTA - Ebook */}
+      <section
+        id="signup-form"
+        className="py-20 px-4"
+        style={{ backgroundColor: DARK_BLUE }}
+      >
+        <div className="max-w-2xl mx-auto text-center">
+          <Eye className="w-16 h-16 mx-auto mb-6" style={{ color: GOLD }} />
+          <h2
+            className="text-3xl md:text-5xl font-bold text-white mb-4"
+            style={{ fontFamily: 'var(--font-merriweather), serif' }}
+          >
+            See All 500+ Reviews
+          </h2>
+          <p className="text-white/70 text-lg mb-8">
+            Download our free &ldquo;Budget Luxury Travel&rdquo; guide and get access to our full
+            review collection. See exactly what 2,847 travelers experienced.
+          </p>
+
+          <EbookCaptureForm
+            sourceLp="trust-fall"
+            accentColor={GOLD}
+            buttonText="See All 500+ Reviews"
+            variant="card"
+          />
+
+          <p className="text-white/40 text-sm mt-4">
+            Free instant download. Your data is protected.
+          </p>
+        </div>
+      </section>
+
+      {/* Secondary CTA - Pay Now */}
+      <section className="py-20 px-4 bg-white">
+        <div className="max-w-2xl mx-auto text-center">
+          <h2
+            className="text-3xl md:text-4xl font-bold mb-4"
+            style={{ fontFamily: 'var(--font-merriweather), serif', color: DARK_BLUE }}
+          >
+            Ready to Join <span style={{ color: GOLD }}>2,847 Happy Travelers?</span>
+          </h2>
+          <p className="text-gray-500 mb-2">
+            This price disappears when the timer hits zero. Don&apos;t lose your spot.
+          </p>
+          <p className="text-gray-400 text-sm mb-8">
+            30-day full refund guarantee. Zero risk.
+          </p>
+
+          <PayNowForm accentColor={GOLD} />
+        </div>
+      </section>
+
+      {/* Final CTA */}
+      <section
+        className="py-16 px-4 text-center"
+        style={{ backgroundColor: DARK_BLUE }}
+      >
+        <div className="max-w-xl mx-auto">
+          <div className="flex items-center justify-center gap-1 mb-4">
+            {[1, 2, 3, 4, 5].map((s) => (
+              <Star key={s} className="w-6 h-6 fill-current" style={{ color: GOLD }} />
+            ))}
+          </div>
+          <h2
+            className="text-2xl md:text-4xl font-bold text-white mb-4"
+            style={{ fontFamily: 'var(--font-merriweather), serif' }}
+          >
+            4.8 Stars. 2,847 Travelers. Your Turn.
+          </h2>
+          <a
+            href="#signup-form"
+            className="inline-flex items-center gap-2 px-8 py-4 rounded-full text-lg font-bold shadow-xl hover:scale-105 transition-transform"
+            style={{ backgroundColor: GOLD, color: DARK_BLUE }}
+          >
+            Get Started Today <ArrowRight className="w-5 h-5" />
+          </a>
+        </div>
+      </section>
+
+      <StickyMobileCTA
+        buttonText="Join 2,847 Travelers"
+        accentColor={GOLD}
+      />
+    </div>
+  )
+}
diff --git a/src/components/lp/pages/LP38Sunrise.tsx b/src/components/lp/pages/LP38Sunrise.tsx
new file mode 100644
index 0000000..8f60273
--- /dev/null
+++ b/src/components/lp/pages/LP38Sunrise.tsx
@@ -0,0 +1,513 @@
+'use client'
+
+import {
+  Sun, Sunrise, Waves, Wind, Music, Utensils,
+  Heart, Sparkles, Eye, Palette, ArrowRight,
+  Star, CloudSun, Shell, Flower2, Coffee,
+  GlassWater, TreePalm, Camera,
+} from 'lucide-react'
+import EbookCaptureForm from '@/components/lp/shared/EbookCaptureForm'
+import PayNowForm from '@/components/lp/shared/PayNowForm'
+import CountdownTimer from '@/components/lp/shared/CountdownTimer'
+import TrustBadges from '@/components/lp/shared/TrustBadges'
+import StickyMobileCTA from '@/components/lp/shared/StickyMobileCTA'
+import TestimonialCard from '@/components/lp/shared/TestimonialCard'
+import PricingDisplay from '@/components/lp/shared/PricingDisplay'
+import SocialProofTicker from '@/components/lp/shared/SocialProofTicker'
+import FAQAccordion from '@/components/lp/shared/FAQAccordion'
+import UrgencyBanner from '@/components/lp/shared/UrgencyBanner'
+import InfluencerBuzz from '@/components/lp/shared/InfluencerBuzz'
+import { PAYMENT_CONFIG, TESTIMONIALS, FAQ_ITEMS } from '@/app/lp/_config/types'
+
+const SUNRISE_ORANGE = '#FB923C'
+const WARM_PINK = '#F472B6'
+const GOLD = '#FBBF24'
+const CREAM = '#FFFBEB'
+
+const sensoryExperiences = [
+  {
+    sense: 'See',
+    icon: Eye,
+    title: 'Sunrises That Take Your Breath Away',
+    description: 'Watch the sky paint itself in shades of gold, coral, and lavender as the sun rises over the Caribbean.',
+    image: '/images/cdn/photo-1506929562872-bb421503ef21.jpg',
+  },
+  {
+    sense: 'Hear',
+    icon: Waves,
+    title: 'The Rhythm of the Ocean',
+    description: 'Fall asleep to gentle waves. Wake up to birdsong. No alarm clocks. No traffic. Just nature.',
+    image: '/images/cdn/photo-1507525428034-b723cf961d3e.jpg',
+  },
+  {
+    sense: 'Taste',
+    icon: Utensils,
+    title: 'Flavors You\'ll Dream About',
+    description: 'Fresh ceviche by the pool. Authentic mole at dinner. Exotic cocktails at sunset. All included.',
+    image: '/images/cdn/photo-1504674900247-0877df9cc836.jpg',
+  },
+  {
+    sense: 'Feel',
+    icon: Wind,
+    title: 'Warm Sand Between Your Toes',
+    description: 'Sink into powder-soft sand. Feel the warm breeze on your skin. Let every muscle relax.',
+    image: '/images/cdn/photo-1520454974749-611b7248ffdb.jpg',
+  },
+]
+
+const morningMoments = [
+  {
+    time: '6:00 AM',
+    icon: Sunrise,
+    title: 'The Sunrise',
+    text: 'Step onto your private balcony. The sky is painted in impossible colors.',
+  },
+  {
+    time: '7:30 AM',
+    icon: Coffee,
+    title: 'Coffee with a View',
+    text: 'Rich Mexican coffee, delivered to your terrace. The ocean stretches forever.',
+  },
+  {
+    time: '8:30 AM',
+    icon: Utensils,
+    title: 'Breakfast Paradise',
+    text: 'Fresh tropical fruits, made-to-order omelets, pastries still warm from the oven.',
+  },
+  {
+    time: '10:00 AM',
+    icon: TreePalm,
+    title: 'Your Day Begins',
+    text: 'Beach, pool, spa, adventure — the whole day is yours. No plans required.',
+  },
+]
+
+const dreamScenes = [
+  {
+    title: 'Crystal Clear Waters',
+    image: '/images/cdn/photo-1510097467424-192d713fd8b2.jpg',
+    caption: 'Water so clear you can see the ocean floor',
+  },
+  {
+    title: 'Sunset Cocktails',
+    image: '/images/cdn/photo-1581710862235-eb6e05d8783f.jpg',
+    caption: 'Every evening ends with a masterpiece sky',
+  },
+  {
+    title: 'Infinity Pool',
+    image: '/images/cdn/photo-1540541338287-41700207dee6.jpg',
+    caption: 'Where the pool meets the horizon',
+  },
+  {
+    title: 'Tropical Gardens',
+    image: '/images/cdn/photo-1512100356356-de1b84283e18.jpg',
+    caption: 'Lush, vibrant beauty at every turn',
+  },
+]
+
+const feelings = [
+  { icon: Heart, text: 'Pure relaxation without guilt' },
+  { icon: Sparkles, text: 'Wonder at nature\'s beauty' },
+  { icon: Music, text: 'Joy in every moment' },
+  { icon: Shell, text: 'Connection with someone special' },
+  { icon: CloudSun, text: 'Freedom from daily stress' },
+  { icon: Flower2, text: 'Peace you haven\'t felt in years' },
+]
+
+export default function LP38Sunrise() {
+  return (
+    <div className="min-h-screen" style={{ backgroundColor: CREAM, fontFamily: 'var(--font-raleway), sans-serif' }}>
+      <UrgencyBanner variant="countdown" />
+
+      {/* Hero Section */}
+      <section className="relative pt-20 pb-24 overflow-hidden">
+        <div
+          className="absolute inset-0"
+          style={{
+            background: `linear-gradient(180deg, ${WARM_PINK}40 0%, ${SUNRISE_ORANGE}50 30%, ${GOLD}40 60%, ${CREAM} 100%)`,
+          }}
+        />
+        <div className="absolute inset-0">
+          <img
+            src="/images/cdn/photo-1506929562872-bb421503ef21.jpg"
+            alt="Sunrise over Mexican beach"
+            className="w-full h-full object-cover opacity-30 mix-blend-overlay"
+          />
+        </div>
+
+        <div className="relative max-w-5xl mx-auto px-4 text-center">
+          <Sunrise className="w-16 h-16 mx-auto mb-6" style={{ color: SUNRISE_ORANGE }} />
+
+          <h1
+            className="text-4xl md:text-6xl lg:text-7xl font-bold mb-6 leading-tight"
+            style={{ fontFamily: 'var(--font-cormorant), serif', color: '#1a1a1a' }}
+          >
+            Imagine Waking Up
+            <br />
+            <span
+              className="italic"
+              style={{
+                background: `linear-gradient(135deg, ${SUNRISE_ORANGE}, ${WARM_PINK})`,
+                WebkitBackgroundClip: 'text',
+                WebkitTextFillColor: 'transparent',
+              }}
+            >
+              To This
+            </span>
+          </h1>
+
+          <p className="text-xl md:text-2xl mb-6 max-w-2xl mx-auto text-gray-700" style={{ fontFamily: 'var(--font-cormorant), serif' }}>
+            Close your eyes. Feel the warm sand. Hear the waves.
+            <br />
+            Smell the salt air. This is your morning in Mexico.
+          </p>
+
+          <div className="flex items-center justify-center gap-3 mb-8">
+            <span className="text-lg line-through text-gray-400">$59/mo</span>
+            <span className="text-3xl font-bold text-gray-900">${PAYMENT_CONFIG.monthlyPrice}/mo</span>
+            <span
+              className="px-3 py-1 rounded-full text-sm font-bold text-white"
+              style={{ backgroundColor: SUNRISE_ORANGE }}
+            >
+              SAVE 34%
+            </span>
+          </div>
+
+          <p className="text-gray-500 mb-8">
+            5 days & 4 nights all-inclusive. Just $1.30/day for paradise.
+          </p>
+
+          <a
+            href="#signup-form"
+            className="inline-flex items-center gap-2 px-8 py-4 rounded-full text-lg font-bold text-white shadow-xl hover:scale-105 transition-transform"
+            style={{
+              background: `linear-gradient(135deg, ${SUNRISE_ORANGE}, ${WARM_PINK})`,
+            }}
+          >
+            Start My Paradise Morning <ArrowRight className="w-5 h-5" />
+          </a>
+        </div>
+      </section>
+
+      <SocialProofTicker />
+
+      {/* Sensory Section */}
+      <section className="py-20 px-4" style={{ backgroundColor: CREAM }}>
+        <div className="max-w-6xl mx-auto">
+          <h2
+            className="text-3xl md:text-5xl font-bold text-center mb-4"
+            style={{ fontFamily: 'var(--font-cormorant), serif' }}
+          >
+            Experience Paradise With <span style={{ color: SUNRISE_ORANGE }}>Every Sense</span>
+          </h2>
+          <p className="text-center text-gray-500 text-lg mb-16 max-w-2xl mx-auto">
+            This isn&apos;t just a vacation. It&apos;s a feeling. One you&apos;ll carry with you forever.
+          </p>
+
+          <div className="space-y-20">
+            {sensoryExperiences.map((exp, i) => (
+              <div
+                key={i}
+                className={`flex flex-col ${i % 2 === 0 ? 'md:flex-row' : 'md:flex-row-reverse'} gap-8 items-center`}
+              >
+                <div className="w-full md:w-1/2">
+                  <div className="relative rounded-3xl overflow-hidden shadow-2xl">
+                    <img
+                      src={exp.image}
+                      alt={exp.title}
+                      className="w-full h-72 md:h-96 object-cover"
+                    />
+                    <div
+                      className="absolute top-4 left-4 px-4 py-2 rounded-full text-sm font-bold text-white backdrop-blur-sm"
+                      style={{ backgroundColor: `${WARM_PINK}90` }}
+                    >
+                      {exp.sense}
+                    </div>
+                  </div>
+                </div>
+                <div className="w-full md:w-1/2">
+                  <div
+                    className="w-14 h-14 rounded-2xl flex items-center justify-center mb-4"
+                    style={{ backgroundColor: `${SUNRISE_ORANGE}15` }}
+                  >
+                    <exp.icon className="w-7 h-7" style={{ color: SUNRISE_ORANGE }} />
+                  </div>
+                  <h3
+                    className="text-2xl md:text-3xl font-bold mb-4"
+                    style={{ fontFamily: 'var(--font-cormorant), serif' }}
+                  >
+                    {exp.title}
+                  </h3>
+                  <p className="text-gray-600 text-lg leading-relaxed">{exp.description}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Morning Timeline */}
+      <section
+        className="py-20 px-4"
+        style={{
+          background: `linear-gradient(180deg, ${CREAM} 0%, ${GOLD}10 50%, ${CREAM} 100%)`,
+        }}
+      >
+        <div className="max-w-3xl mx-auto">
+          <h2
+            className="text-3xl md:text-5xl font-bold text-center mb-4"
+            style={{ fontFamily: 'var(--font-cormorant), serif' }}
+          >
+            Your Morning in <span style={{ color: WARM_PINK }}>Paradise</span>
+          </h2>
+          <p className="text-center text-gray-500 text-lg mb-16">
+            Every sunrise is an invitation to fall in love with life again.
+          </p>
+
+          <div className="space-y-8 relative">
+            <div
+              className="absolute left-8 top-0 bottom-0 w-px"
+              style={{
+                background: `linear-gradient(180deg, ${SUNRISE_ORANGE}, ${WARM_PINK}, ${GOLD})`,
+              }}
+            />
+
+            {morningMoments.map((moment, i) => (
+              <div key={i} className="flex items-start gap-6 relative">
+                <div
+                  className="w-16 h-16 rounded-full flex-shrink-0 flex items-center justify-center z-10 shadow-lg"
+                  style={{
+                    background: `linear-gradient(135deg, ${SUNRISE_ORANGE}, ${WARM_PINK})`,
+                  }}
+                >
+                  <moment.icon className="w-7 h-7 text-white" />
+                </div>
+                <div className="bg-white rounded-2xl p-6 shadow-md flex-1 border border-orange-50">
+                  <span className="text-sm font-semibold" style={{ color: WARM_PINK }}>{moment.time}</span>
+                  <h4
+                    className="text-xl font-bold mt-1 mb-2"
+                    style={{ fontFamily: 'var(--font-cormorant), serif' }}
+                  >
+                    {moment.title}
+                  </h4>
+                  <p className="text-gray-600">{moment.text}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Dream Gallery */}
+      <section className="py-20 px-4" style={{ backgroundColor: CREAM }}>
+        <div className="max-w-6xl mx-auto">
+          <h2
+            className="text-3xl md:text-5xl font-bold text-center mb-4"
+            style={{ fontFamily: 'var(--font-cormorant), serif' }}
+          >
+            Scenes From Your <span style={{ color: SUNRISE_ORANGE }}>Future Vacation</span>
+          </h2>
+          <p className="text-center text-gray-500 text-lg mb-12">
+            Let yourself dream. These could be your photos in a few months.
+          </p>
+
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+            {dreamScenes.map((scene, i) => (
+              <div key={i} className="group relative rounded-2xl overflow-hidden shadow-lg">
+                <img
+                  src={scene.image}
+                  alt={scene.title}
+                  className="w-full h-64 md:h-80 object-cover group-hover:scale-110 transition-transform duration-700"
+                />
+                <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
+                <div className="absolute bottom-0 left-0 right-0 p-4 text-white">
+                  <p className="font-semibold">{scene.title}</p>
+                  <p className="text-xs text-white/70">{scene.caption}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Feelings Grid */}
+      <section
+        className="py-20 px-4"
+        style={{
+          background: `linear-gradient(135deg, ${WARM_PINK}15 0%, ${SUNRISE_ORANGE}15 50%, ${GOLD}15 100%)`,
+        }}
+      >
+        <div className="max-w-4xl mx-auto text-center">
+          <h2
+            className="text-3xl md:text-5xl font-bold mb-4"
+            style={{ fontFamily: 'var(--font-cormorant), serif' }}
+          >
+            What You&apos;ll <span style={{ color: WARM_PINK }}>Feel</span>
+          </h2>
+          <p className="text-gray-500 text-lg mb-12">
+            More than a trip. A transformation.
+          </p>
+
+          <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
+            {feelings.map((f, i) => (
+              <div
+                key={i}
+                className="bg-white/80 backdrop-blur-sm rounded-2xl p-6 shadow-sm hover:shadow-md transition-shadow"
+              >
+                <f.icon className="w-8 h-8 mx-auto mb-3" style={{ color: WARM_PINK }} />
+                <p className="font-medium text-gray-700">{f.text}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Pricing */}
+      <section className="py-20 px-4" style={{ backgroundColor: CREAM }}>
+        <div className="max-w-4xl mx-auto text-center">
+          <h2
+            className="text-3xl md:text-5xl font-bold mb-4"
+            style={{ fontFamily: 'var(--font-cormorant), serif' }}
+          >
+            This Feeling Costs Less Than You Think
+          </h2>
+          <p className="text-gray-500 text-lg mb-4">
+            <span className="line-through text-gray-400">$59/mo</span>{' '}
+            <strong style={{ color: SUNRISE_ORANGE }}>${PAYMENT_CONFIG.monthlyPrice}/mo</strong> or{' '}
+            <strong style={{ color: SUNRISE_ORANGE }}>${PAYMENT_CONFIG.oneTimePrice} one-time</strong>
+          </p>
+          <p className="text-gray-400 mb-8">
+            That&apos;s just $1.30/day. Less than your morning coffee.
+          </p>
+          <CountdownTimer
+            minutes={30}
+            message="This sunrise special expires in"
+            accentColor={SUNRISE_ORANGE}
+          />
+        </div>
+      </section>
+
+      {/* Testimonials */}
+      <section className="py-20 px-4 bg-white">
+        <div className="max-w-6xl mx-auto">
+          <h2
+            className="text-3xl md:text-5xl font-bold text-center mb-12"
+            style={{ fontFamily: 'var(--font-cormorant), serif' }}
+          >
+            They Found Their <span style={{ color: WARM_PINK }}>Sunrise</span>
+          </h2>
+          <div className="grid md:grid-cols-3 gap-6">
+            {TESTIMONIALS.slice(0, 3).map((t, i) => (
+              <TestimonialCard key={i} quote={t.quote} name={t.name} location={t.location} photo={t.photo} />
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Primary CTA - Ebook */}
+      <section
+        id="signup-form"
+        className="py-20 px-4"
+        style={{
+          background: `linear-gradient(135deg, ${SUNRISE_ORANGE} 0%, ${WARM_PINK} 50%, ${GOLD} 100%)`,
+        }}
+      >
+        <div className="max-w-2xl mx-auto text-center">
+          <Sun className="w-16 h-16 text-white/80 mx-auto mb-6" />
+          <h2
+            className="text-3xl md:text-5xl font-bold text-white mb-4"
+            style={{ fontFamily: 'var(--font-cormorant), serif' }}
+          >
+            Start Planning Your Paradise Morning
+          </h2>
+          <p className="text-white/80 text-lg mb-8">
+            Download our free &ldquo;Budget Luxury Travel&rdquo; guide and start
+            imagining your first sunrise in Mexico. Don&apos;t wait — this feeling is closer than you think.
+          </p>
+
+          <EbookCaptureForm
+            sourceLp="sunrise"
+            accentColor={SUNRISE_ORANGE}
+            buttonText="Start Planning Your Paradise Morning"
+            variant="card"
+          />
+
+          <p className="text-white/40 text-sm mt-4">
+            Free instant download. Pure inspiration inside.
+          </p>
+        </div>
+      </section>
+
+      {/* Secondary CTA - Pay Now */}
+      <section className="py-20 px-4" style={{ backgroundColor: CREAM }}>
+        <div className="max-w-2xl mx-auto text-center">
+          <h2
+            className="text-3xl md:text-4xl font-bold mb-4"
+            style={{ fontFamily: 'var(--font-cormorant), serif' }}
+          >
+            Don&apos;t Let This <span style={{ color: WARM_PINK }}>Feeling Fade</span>
+          </h2>
+          <p className="text-gray-500 mb-2">
+            You felt something reading this page. That&apos;s your heart telling you it&apos;s time.
+            Lock in this special price before it disappears.
+          </p>
+          <p className="text-gray-400 text-sm mb-8">
+            30-day money-back guarantee. Zero risk.
+          </p>
+
+          <PayNowForm accentColor={SUNRISE_ORANGE} />
+        </div>
+      </section>
+
+      {/* Trust Badges */}
+      <section className="py-12 px-4 bg-white">
+        <TrustBadges />
+      </section>
+
+      {/* FAQ */}
+      <InfluencerBuzz />
+
+      <section className="py-20 px-4" style={{ backgroundColor: CREAM }}>
+        <div className="max-w-3xl mx-auto">
+          <h2
+            className="text-3xl md:text-4xl font-bold text-center mb-12"
+            style={{ fontFamily: 'var(--font-cormorant), serif' }}
+          >
+            Common Questions
+          </h2>
+          <FAQAccordion items={FAQ_ITEMS} />
+        </div>
+      </section>
+
+      {/* Final CTA */}
+      <section
+        className="py-16 px-4 text-center text-white"
+        style={{
+          background: `linear-gradient(135deg, ${WARM_PINK} 0%, ${SUNRISE_ORANGE} 100%)`,
+        }}
+      >
+        <h2
+          className="text-2xl md:text-4xl font-bold mb-4"
+          style={{ fontFamily: 'var(--font-cormorant), serif' }}
+        >
+          Your Sunrise Is Waiting
+        </h2>
+        <p className="text-white/80 text-lg mb-6 max-w-xl mx-auto">
+          Stop dreaming. Start living. Paradise is only ${PAYMENT_CONFIG.monthlyPrice}/mo away.
+        </p>
+        <a
+          href="#signup-form"
+          className="inline-flex items-center gap-2 px-8 py-4 bg-white rounded-full text-lg font-bold shadow-xl hover:scale-105 transition-transform"
+          style={{ color: SUNRISE_ORANGE }}
+        >
+          Begin My Journey <ArrowRight className="w-5 h-5" />
+        </a>
+      </section>
+
+      <StickyMobileCTA
+        buttonText="Start My Sunrise"
+        accentColor={SUNRISE_ORANGE}
+      />
+    </div>
+  )
+}
diff --git a/src/components/lp/pages/LP39Adrenaline.tsx b/src/components/lp/pages/LP39Adrenaline.tsx
new file mode 100644
index 0000000..1bb24a9
--- /dev/null
+++ b/src/components/lp/pages/LP39Adrenaline.tsx
@@ -0,0 +1,452 @@
+'use client'
+
+import {
+  Zap, Mountain, Waves, Wind, ArrowRight, Star,
+  Shield, Clock, Flame, Target, Trophy, Compass,
+  ChevronRight, Swords, Bike, Anchor,
+  Eye, Sparkles, Users,
+} from 'lucide-react'
+import EbookCaptureForm from '@/components/lp/shared/EbookCaptureForm'
+import PayNowForm from '@/components/lp/shared/PayNowForm'
+import CountdownTimer from '@/components/lp/shared/CountdownTimer'
+import TrustBadges from '@/components/lp/shared/TrustBadges'
+import StickyMobileCTA from '@/components/lp/shared/StickyMobileCTA'
+import TestimonialCard from '@/components/lp/shared/TestimonialCard'
+import TikTokCarousel from '@/components/lp/shared/TikTokCarousel'
+import SocialProofTicker from '@/components/lp/shared/SocialProofTicker'
+import FAQAccordion from '@/components/lp/shared/FAQAccordion'
+import ComparisonTable from '@/components/lp/shared/ComparisonTable'
+import UrgencyBanner from '@/components/lp/shared/UrgencyBanner'
+import InfluencerBuzz from '@/components/lp/shared/InfluencerBuzz'
+import { PAYMENT_CONFIG, TESTIMONIALS, FAQ_ITEMS } from '@/app/lp/_config/types'
+
+const LIME = '#84CC16'
+const BLACK = '#0A0A0A'
+const ELECTRIC_BLUE = '#3B82F6'
+
+const adventures = [
+  {
+    title: 'Zip-Lining',
+    description: 'Soar 200 feet above the jungle canopy at 45mph. Feel the wind rip past as the rainforest blurs below.',
+    image: '/images/cdn/photo-1530866495561-507c83010e82.jpg',
+    icon: Wind,
+    intensity: 'HIGH',
+  },
+  {
+    title: 'Snorkeling',
+    description: 'Dive into crystal-clear cenotes. Swim alongside sea turtles and tropical fish in water so clear it feels unreal.',
+    image: '/images/cdn/photo-1544551763-46a013bb70d5.jpg',
+    icon: Waves,
+    intensity: 'MEDIUM',
+  },
+  {
+    title: 'ATV Tours',
+    description: 'Tear through jungle trails and coastal paths on all-terrain vehicles. Mud, dust, and pure adrenaline.',
+    image: '/images/cdn/photo-1558618666-fcd25c85f82e.jpg',
+    icon: Bike,
+    intensity: 'HIGH',
+  },
+  {
+    title: 'Cenote Diving',
+    description: 'Descend into ancient underground caves filled with impossibly blue water. Otherworldly and unforgettable.',
+    image: '/images/cdn/photo-1518638150340-f706e86654de.jpg',
+    icon: Compass,
+    intensity: 'EXTREME',
+  },
+  {
+    title: 'Cliff Jumping',
+    description: 'Stand at the edge. Look down at turquoise water 30 feet below. Three... two... one... JUMP.',
+    image: '/images/cdn/photo-1581710862235-eb6e05d8783f.jpg',
+    icon: Mountain,
+    intensity: 'EXTREME',
+  },
+  {
+    title: 'Parasailing',
+    description: 'Float 500 feet above the coastline. The entire Mexican Riviera stretches out below you like a painting.',
+    image: '/images/cdn/photo-1507525428034-b723cf961d3e.jpg',
+    icon: Anchor,
+    intensity: 'MEDIUM',
+  },
+]
+
+const dailyCost = [
+  { item: 'A large coffee', cost: '$6.50' },
+  { item: 'A fast food combo', cost: '$12.00' },
+  { item: 'A movie ticket', cost: '$15.00' },
+  { item: '5 DAYS IN MEXICO', cost: '$1.30/day', highlight: true },
+]
+
+const adventureStats = [
+  { value: '6+', label: 'Adventure Activities', icon: Flame },
+  { value: '4', label: 'Epic Destinations', icon: Target },
+  { value: '5', label: 'Days of Adrenaline', icon: Trophy },
+  { value: '∞', label: 'Food & Drinks', icon: Sparkles },
+]
+
+const intensityColors: Record<string, string> = {
+  'MEDIUM': ELECTRIC_BLUE,
+  'HIGH': LIME,
+  'EXTREME': '#EF4444',
+}
+
+export default function LP39Adrenaline() {
+  return (
+    <div className="min-h-screen bg-black text-white" style={{ fontFamily: 'var(--font-nunito), sans-serif' }}>
+      <UrgencyBanner variant="countdown" />
+
+      {/* Hero Section */}
+      <section className="relative pt-20 pb-20 overflow-hidden">
+        <div className="absolute inset-0">
+          <img
+            src="/images/cdn/photo-1530866495561-507c83010e82.jpg"
+            alt="Adventure in Mexico"
+            className="w-full h-full object-cover opacity-40"
+          />
+          <div className="absolute inset-0 bg-gradient-to-b from-black/70 via-black/50 to-black" />
+        </div>
+
+        <div className="relative max-w-6xl mx-auto px-4 text-center">
+          <div
+            className="inline-flex items-center gap-2 px-4 py-2 rounded-full mb-6 border"
+            style={{ borderColor: LIME, backgroundColor: `${LIME}15` }}
+          >
+            <Zap className="w-4 h-4" style={{ color: LIME }} />
+            <span className="text-sm font-bold" style={{ color: LIME }}>ADVENTURE AWAITS</span>
+          </div>
+
+          <h1
+            className="text-4xl md:text-6xl lg:text-7xl font-black mb-6 leading-tight uppercase tracking-tight"
+            style={{ fontFamily: 'var(--font-archivo), sans-serif' }}
+          >
+            Mexico Isn&apos;t Just Beaches.
+            <br />
+            It&apos;s{' '}
+            <span
+              style={{
+                background: `linear-gradient(135deg, ${LIME}, ${ELECTRIC_BLUE})`,
+                WebkitBackgroundClip: 'text',
+                WebkitTextFillColor: 'transparent',
+              }}
+            >
+              ADVENTURE.
+            </span>
+          </h1>
+
+          <p className="text-xl md:text-2xl mb-6 text-gray-300 max-w-2xl mx-auto">
+            Zip-lining. Cenote diving. ATV tours. Cliff jumping.
+            <br />
+            <strong>All this + unlimited food & drinks.</strong>
+          </p>
+
+          <div className="flex items-center justify-center gap-3 mb-8">
+            <span className="text-lg line-through text-gray-500">$59/mo</span>
+            <span className="text-3xl font-black">${PAYMENT_CONFIG.monthlyPrice}/mo</span>
+            <span
+              className="px-3 py-1 rounded-full text-sm font-black text-black"
+              style={{ backgroundColor: LIME }}
+            >
+              SAVE 34%
+            </span>
+          </div>
+
+          <a
+            href="#signup-form"
+            className="inline-flex items-center gap-2 px-8 py-4 rounded-full text-lg font-black text-black shadow-xl hover:scale-105 transition-transform uppercase tracking-wide"
+            style={{ backgroundColor: LIME }}
+          >
+            Get the Adventure Guide <ArrowRight className="w-5 h-5" />
+          </a>
+        </div>
+      </section>
+
+      <SocialProofTicker />
+
+      {/* Adventure Stats */}
+      <section className="py-16 px-4" style={{ backgroundColor: '#111' }}>
+        <div className="max-w-4xl mx-auto">
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+            {adventureStats.map((s, i) => (
+              <div key={i} className="text-center p-6 rounded-2xl bg-white/5 border border-white/10">
+                <s.icon className="w-8 h-8 mx-auto mb-3" style={{ color: LIME }} />
+                <p className="text-3xl md:text-4xl font-black" style={{ fontFamily: 'var(--font-archivo), sans-serif' }}>
+                  {s.value}
+                </p>
+                <p className="text-sm text-gray-400 mt-1">{s.label}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Adventure Activities Grid */}
+      <section className="py-20 px-4 bg-black">
+        <div className="max-w-6xl mx-auto">
+          <h2
+            className="text-3xl md:text-5xl font-black text-center mb-4 uppercase tracking-tight"
+            style={{ fontFamily: 'var(--font-archivo), sans-serif' }}
+          >
+            Your <span style={{ color: LIME }}>Adrenaline</span> Menu
+          </h2>
+          <p className="text-center text-gray-400 text-lg mb-12">
+            Six heart-pumping activities included with your all-inclusive certificate.
+          </p>
+
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {adventures.map((adv, i) => (
+              <div
+                key={i}
+                className="group relative rounded-2xl overflow-hidden bg-white/5 border border-white/10 hover:border-lime-500/50 transition-all"
+              >
+                <div className="relative h-48 overflow-hidden">
+                  <img
+                    src={adv.image}
+                    alt={adv.title}
+                    className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
+                  />
+                  <div className="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent" />
+                  <div
+                    className="absolute top-3 right-3 px-3 py-1 rounded-full text-xs font-black uppercase tracking-wider"
+                    style={{
+                      backgroundColor: `${intensityColors[adv.intensity]}20`,
+                      color: intensityColors[adv.intensity],
+                      border: `1px solid ${intensityColors[adv.intensity]}40`,
+                    }}
+                  >
+                    {adv.intensity}
+                  </div>
+                </div>
+                <div className="p-5">
+                  <div className="flex items-center gap-3 mb-3">
+                    <div
+                      className="w-10 h-10 rounded-lg flex items-center justify-center"
+                      style={{ backgroundColor: `${LIME}15` }}
+                    >
+                      <adv.icon className="w-5 h-5" style={{ color: LIME }} />
+                    </div>
+                    <h3
+                      className="text-xl font-black uppercase tracking-tight"
+                      style={{ fontFamily: 'var(--font-archivo), sans-serif' }}
+                    >
+                      {adv.title}
+                    </h3>
+                  </div>
+                  <p className="text-gray-400 text-sm">{adv.description}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Cost Comparison */}
+      <section className="py-20 px-4" style={{ backgroundColor: '#111' }}>
+        <div className="max-w-3xl mx-auto text-center">
+          <h2
+            className="text-3xl md:text-5xl font-black mb-4 uppercase tracking-tight"
+            style={{ fontFamily: 'var(--font-archivo), sans-serif' }}
+          >
+            All This For{' '}
+            <span style={{ color: LIME }}>${PAYMENT_CONFIG.monthlyPrice}/mo</span>
+          </h2>
+          <p className="text-gray-400 text-lg mb-12">
+            That&apos;s <strong className="text-white">$1.30/day</strong> for unlimited food,
+            drinks, resort access, AND adventure activities. Perspective check:
+          </p>
+
+          <div className="space-y-3 max-w-md mx-auto">
+            {dailyCost.map((item, i) => (
+              <div
+                key={i}
+                className={`flex items-center justify-between px-6 py-4 rounded-xl ${
+                  item.highlight
+                    ? 'border-2'
+                    : 'bg-white/5 border border-white/10'
+                }`}
+                style={item.highlight ? {
+                  borderColor: LIME,
+                  backgroundColor: `${LIME}10`,
+                } : {}}
+              >
+                <span className={item.highlight ? 'font-black text-white' : 'text-gray-400'}>
+                  {item.item}
+                </span>
+                <span
+                  className={`font-black ${item.highlight ? '' : 'text-gray-500'}`}
+                  style={item.highlight ? { color: LIME } : {}}
+                >
+                  {item.cost}
+                </span>
+              </div>
+            ))}
+          </div>
+
+          <div className="mt-12">
+            <CountdownTimer
+              minutes={30}
+              message="Adventure pricing expires in"
+              accentColor={LIME}
+              bgColor="#1a1a1a"
+            />
+          </div>
+        </div>
+      </section>
+
+      {/* TikTok Section */}
+      <section className="py-20 px-4 bg-black">
+        <div className="max-w-6xl mx-auto">
+          <h2
+            className="text-3xl md:text-5xl font-black text-center mb-4 uppercase tracking-tight"
+            style={{ fontFamily: 'var(--font-archivo), sans-serif' }}
+          >
+            Watch The <span style={{ color: ELECTRIC_BLUE }}>Action</span>
+          </h2>
+          <p className="text-center text-gray-400 text-lg mb-12">
+            Real travelers. Real adventures. Real Mexico.
+          </p>
+          <TikTokCarousel
+            title=""
+            subtitle=""
+          />
+        </div>
+      </section>
+
+      {/* Comparison Table */}
+      <section className="py-20 px-4" style={{ backgroundColor: '#111' }}>
+        <div className="max-w-4xl mx-auto">
+          <h2
+            className="text-3xl md:text-4xl font-black text-center mb-4 uppercase"
+            style={{ fontFamily: 'var(--font-archivo), sans-serif' }}
+          >
+            Us vs. Everyone Else
+          </h2>
+          <p className="text-center text-gray-400 mb-12">
+            Adventure + all-inclusive at a price that doesn&apos;t exist anywhere else
+          </p>
+          <ComparisonTable accentColor={LIME} variant="dark" />
+        </div>
+      </section>
+
+      {/* Testimonials */}
+      <section className="py-20 px-4 bg-black">
+        <div className="max-w-6xl mx-auto">
+          <h2
+            className="text-3xl md:text-5xl font-black text-center mb-12 uppercase tracking-tight"
+            style={{ fontFamily: 'var(--font-archivo), sans-serif' }}
+          >
+            Adrenaline <span style={{ color: LIME }}>Junkies</span> Approve
+          </h2>
+          <div className="grid md:grid-cols-3 gap-6">
+            {TESTIMONIALS.slice(0, 3).map((t, i) => (
+              <TestimonialCard key={i} quote={t.quote} name={t.name} location={t.location} photo={t.photo} />
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Primary CTA - Ebook */}
+      <section
+        id="signup-form"
+        className="py-20 px-4"
+        style={{
+          background: `linear-gradient(135deg, ${BLACK} 0%, #1a2e1a 50%, ${BLACK} 100%)`,
+        }}
+      >
+        <div className="max-w-2xl mx-auto text-center">
+          <Flame className="w-16 h-16 mx-auto mb-6" style={{ color: LIME }} />
+          <h2
+            className="text-3xl md:text-5xl font-black mb-4 uppercase tracking-tight"
+            style={{ fontFamily: 'var(--font-archivo), sans-serif' }}
+          >
+            Get the Adventure Activities Guide
+          </h2>
+          <p className="text-gray-400 text-lg mb-8">
+            Our free &ldquo;Budget Luxury Travel&rdquo; ebook includes a complete adventure
+            activities guide for all four destinations. Download it now — this price won&apos;t last.
+          </p>
+
+          <EbookCaptureForm
+            sourceLp="adrenaline"
+            accentColor={LIME}
+            buttonText="Get the Adventure Activities Guide"
+            variant="card"
+          />
+
+          <p className="text-gray-600 text-sm mt-4">
+            Free instant download. Fuel your adventure.
+          </p>
+        </div>
+      </section>
+
+      {/* Secondary CTA - Pay Now */}
+      <section className="py-20 px-4" style={{ backgroundColor: '#111' }}>
+        <div className="max-w-2xl mx-auto text-center">
+          <h2
+            className="text-3xl md:text-4xl font-black mb-4 uppercase"
+            style={{ fontFamily: 'var(--font-archivo), sans-serif' }}
+          >
+            Lock In Your <span style={{ color: LIME }}>Adventure</span>
+          </h2>
+          <p className="text-gray-400 mb-2">
+            Every second you wait, someone else claims your spot. The price goes back to $59/mo when the timer hits zero.
+          </p>
+          <p className="text-gray-600 text-sm mb-8">
+            30-day money-back guarantee. Zero risk. Maximum adrenaline.
+          </p>
+
+          <PayNowForm accentColor={LIME} variant="dark" />
+        </div>
+      </section>
+
+      {/* Trust Badges */}
+      <section className="py-12 px-4 bg-black">
+        <TrustBadges />
+      </section>
+
+      {/* FAQ */}
+      <InfluencerBuzz />
+
+      <section className="py-20 px-4" style={{ backgroundColor: '#111' }}>
+        <div className="max-w-3xl mx-auto">
+          <h2
+            className="text-3xl md:text-4xl font-black text-center mb-12 uppercase"
+            style={{ fontFamily: 'var(--font-archivo), sans-serif' }}
+          >
+            Quick Answers
+          </h2>
+          <FAQAccordion items={FAQ_ITEMS} />
+        </div>
+      </section>
+
+      {/* Final CTA */}
+      <section className="py-16 px-4 text-center bg-black">
+        <div
+          className="max-w-xl mx-auto p-8 rounded-2xl border"
+          style={{ borderColor: `${LIME}40`, backgroundColor: `${LIME}05` }}
+        >
+          <Zap className="w-10 h-10 mx-auto mb-4" style={{ color: LIME }} />
+          <h2
+            className="text-2xl md:text-4xl font-black mb-4 uppercase"
+            style={{ fontFamily: 'var(--font-archivo), sans-serif' }}
+          >
+            Your Adventure Starts Now
+          </h2>
+          <p className="text-gray-400 mb-6">
+            Stop watching. Start doing. Mexico is calling.
+          </p>
+          <a
+            href="#signup-form"
+            className="inline-flex items-center gap-2 px-8 py-4 rounded-full text-lg font-black text-black shadow-xl hover:scale-105 transition-transform uppercase"
+            style={{ backgroundColor: LIME }}
+          >
+            Let&apos;s Go <ArrowRight className="w-5 h-5" />
+          </a>
+        </div>
+      </section>
+
+      <StickyMobileCTA
+        buttonText="Get Adventure Guide"
+        accentColor={LIME}
+      />
+    </div>
+  )
+}
diff --git a/src/components/lp/pages/LP40GoldenTicket.tsx b/src/components/lp/pages/LP40GoldenTicket.tsx
new file mode 100644
index 0000000..5aacad5
--- /dev/null
+++ b/src/components/lp/pages/LP40GoldenTicket.tsx
@@ -0,0 +1,519 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import {
+  Ticket, Crown, Star, Sparkles, Gift, Lock,
+  ArrowRight, Shield, Award, Clock, Heart,
+  Gem, Trophy, Eye, Users, ChevronRight,
+  Zap, PartyPopper, BadgeCheck,
+} from 'lucide-react'
+import EbookCaptureForm from '@/components/lp/shared/EbookCaptureForm'
+import PayNowForm from '@/components/lp/shared/PayNowForm'
+import CountdownTimer from '@/components/lp/shared/CountdownTimer'
+import TrustBadges from '@/components/lp/shared/TrustBadges'
+import StickyMobileCTA from '@/components/lp/shared/StickyMobileCTA'
+import TestimonialCard from '@/components/lp/shared/TestimonialCard'
+import TikTokCarousel from '@/components/lp/shared/TikTokCarousel'
+import SocialProofTicker from '@/components/lp/shared/SocialProofTicker'
+import FAQAccordion from '@/components/lp/shared/FAQAccordion'
+import PricingDisplay from '@/components/lp/shared/PricingDisplay'
+import UrgencyBanner from '@/components/lp/shared/UrgencyBanner'
+import InfluencerBuzz from '@/components/lp/shared/InfluencerBuzz'
+import { PAYMENT_CONFIG, TESTIMONIALS, FAQ_ITEMS } from '@/app/lp/_config/types'
+
+const GOLD = '#F59E0B'
+const RICH_BROWN = '#78350F'
+const CREAM = '#FEF3C7'
+const DARK_GOLD = '#B45309'
+
+const goldenPerks = [
+  {
+    icon: Crown,
+    title: 'VIP Resort Access',
+    description: '5 days & 4 nights at a luxury all-inclusive resort. Food, drinks, activities — everything included.',
+  },
+  {
+    icon: Gift,
+    title: 'Exclusive Pricing',
+    description: `Only $${PAYMENT_CONFIG.monthlyPrice}/mo (regular $59/mo). This golden ticket rate is not available anywhere else.`,
+  },
+  {
+    icon: Gem,
+    title: '4 Premium Destinations',
+    description: 'Cancun, Cabo San Lucas, Riviera Maya, or Puerto Vallarta. Your choice.',
+  },
+  {
+    icon: Star,
+    title: '18-Month Flexibility',
+    description: 'Book your paradise trip anytime within 18 months. No rush, no pressure.',
+  },
+  {
+    icon: Shield,
+    title: '30-Day Guarantee',
+    description: 'Full refund within 30 days if you change your mind. Zero risk.',
+  },
+  {
+    icon: Heart,
+    title: 'Bring a Guest',
+    description: 'Your golden ticket covers 2 adults + 2 kids under 12. The whole family flies to paradise.',
+  },
+]
+
+const scarcityMilestones = [
+  { claimed: 38, total: 50, label: 'Golden Tickets Claimed' },
+  { claimed: 847, total: 1000, label: 'Views Today' },
+]
+
+const exclusiveReasons = [
+  'This link was shared privately — it is not publicly available',
+  'The golden ticket rate of $39/mo is 34% below standard pricing',
+  'Only 50 golden tickets exist in this batch',
+  'Each ticket is limited to one per household',
+  'This page will expire when the countdown reaches zero',
+]
+
+const ticketInclusions = [
+  { item: '5 Days / 4 Nights', included: true },
+  { item: 'All Meals & Drinks', included: true },
+  { item: 'Resort Pools & Beach', included: true },
+  { item: 'Entertainment & Activities', included: true },
+  { item: 'Airport Shuttle', included: true },
+  { item: '24/7 Concierge', included: true },
+]
+
+export default function LP40GoldenTicket() {
+  const [ticketsLeft, setTicketsLeft] = useState(12)
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setTicketsLeft((prev) => {
+        if (prev <= 3) return 3
+        return Math.random() > 0.7 ? prev - 1 : prev
+      })
+    }, 45000)
+    return () => clearInterval(interval)
+  }, [])
+
+  return (
+    <div className="min-h-screen" style={{ backgroundColor: CREAM, fontFamily: 'var(--font-fira), monospace' }}>
+      <UrgencyBanner variant="countdown" />
+
+      {/* Hero Section */}
+      <section className="relative pt-20 pb-20 overflow-hidden">
+        <div
+          className="absolute inset-0"
+          style={{
+            background: `linear-gradient(180deg, ${RICH_BROWN} 0%, ${DARK_GOLD} 50%, ${GOLD} 100%)`,
+          }}
+        />
+        {/* Decorative golden particles */}
+        <div className="absolute inset-0 overflow-hidden">
+          {Array.from({ length: 20 }).map((_, i) => (
+            <div
+              key={i}
+              className="absolute rounded-full animate-pulse"
+              style={{
+                width: `${Math.random() * 6 + 2}px`,
+                height: `${Math.random() * 6 + 2}px`,
+                backgroundColor: `${GOLD}60`,
+                top: `${Math.random() * 100}%`,
+                left: `${Math.random() * 100}%`,
+                animationDelay: `${Math.random() * 3}s`,
+                animationDuration: `${Math.random() * 2 + 2}s`,
+              }}
+            />
+          ))}
+        </div>
+
+        <div className="relative max-w-5xl mx-auto px-4 text-center">
+          {/* Golden Ticket Frame */}
+          <div
+            className="max-w-3xl mx-auto rounded-3xl p-1 mb-10"
+            style={{
+              background: `linear-gradient(135deg, ${GOLD}, #FDE68A, ${GOLD}, #FBBF24, ${GOLD})`,
+            }}
+          >
+            <div
+              className="rounded-3xl py-12 px-8 relative overflow-hidden"
+              style={{ backgroundColor: `${RICH_BROWN}F0` }}
+            >
+              {/* Perforation edges */}
+              <div className="absolute left-0 top-0 bottom-0 flex flex-col justify-around">
+                {Array.from({ length: 8 }).map((_, i) => (
+                  <div
+                    key={`l-${i}`}
+                    className="w-4 h-4 rounded-full -ml-2"
+                    style={{ backgroundColor: CREAM }}
+                  />
+                ))}
+              </div>
+              <div className="absolute right-0 top-0 bottom-0 flex flex-col justify-around">
+                {Array.from({ length: 8 }).map((_, i) => (
+                  <div
+                    key={`r-${i}`}
+                    className="w-4 h-4 rounded-full -mr-2"
+                    style={{ backgroundColor: CREAM }}
+                  />
+                ))}
+              </div>
+
+              <Ticket className="w-16 h-16 mx-auto mb-4" style={{ color: GOLD }} />
+
+              <h1
+                className="text-4xl md:text-6xl lg:text-7xl font-bold mb-4 leading-tight"
+                style={{ fontFamily: 'var(--font-playfair), serif', color: GOLD }}
+              >
+                You Found the
+                <br />
+                Golden Ticket
+              </h1>
+
+              <div
+                className="w-24 h-1 mx-auto mb-6 rounded-full"
+                style={{ backgroundColor: GOLD }}
+              />
+
+              <p className="text-xl text-amber-200/80 max-w-xl mx-auto mb-6">
+                This exclusive link was shared with you personally.
+                <br />
+                <strong className="text-amber-100">Only 50 golden tickets available.</strong>
+              </p>
+
+              <div className="flex items-center justify-center gap-3 mb-6">
+                <span className="text-lg line-through text-amber-200/40">$59/mo</span>
+                <span className="text-4xl font-bold" style={{ color: GOLD }}>
+                  ${PAYMENT_CONFIG.monthlyPrice}/mo
+                </span>
+              </div>
+
+              <p className="text-amber-200/60 text-sm">
+                5 days & 4 nights all-inclusive in Mexico
+              </p>
+            </div>
+          </div>
+
+          <a
+            href="#signup-form"
+            className="inline-flex items-center gap-2 px-8 py-4 rounded-full text-lg font-bold shadow-xl hover:scale-105 transition-transform"
+            style={{ backgroundColor: GOLD, color: RICH_BROWN }}
+          >
+            Claim My Golden Ticket <ArrowRight className="w-5 h-5" />
+          </a>
+        </div>
+      </section>
+
+      <SocialProofTicker />
+
+      {/* Scarcity Counter */}
+      <section className="py-12 px-4" style={{ backgroundColor: `${RICH_BROWN}10` }}>
+        <div className="max-w-3xl mx-auto">
+          <div
+            className="rounded-2xl p-6 border-2 text-center"
+            style={{ borderColor: `${GOLD}40`, backgroundColor: `${GOLD}08` }}
+          >
+            <Crown className="w-10 h-10 mx-auto mb-3" style={{ color: GOLD }} />
+            <p className="text-2xl font-bold mb-1" style={{ color: RICH_BROWN }}>
+              Only <span style={{ color: GOLD }}>{ticketsLeft}</span> Golden Tickets Remaining
+            </p>
+            <p className="text-gray-500 text-sm">
+              38 of 50 tickets have already been claimed. Once they&apos;re gone, this offer disappears forever.
+            </p>
+
+            <div className="mt-4 max-w-sm mx-auto">
+              <div className="bg-gray-200 rounded-full h-3 overflow-hidden">
+                <div
+                  className="h-full rounded-full transition-all duration-1000"
+                  style={{
+                    width: `${((50 - ticketsLeft) / 50) * 100}%`,
+                    background: `linear-gradient(90deg, ${GOLD}, ${DARK_GOLD})`,
+                  }}
+                />
+              </div>
+              <p className="text-xs text-gray-400 mt-2">{50 - ticketsLeft} of 50 claimed</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Why This Is Exclusive */}
+      <section className="py-20 px-4" style={{ backgroundColor: CREAM }}>
+        <div className="max-w-4xl mx-auto">
+          <h2
+            className="text-3xl md:text-5xl font-bold text-center mb-4"
+            style={{ fontFamily: 'var(--font-playfair), serif', color: RICH_BROWN }}
+          >
+            Why This <span style={{ color: GOLD }}>Golden Ticket</span> Is Special
+          </h2>
+          <p className="text-center text-gray-500 text-lg mb-12">
+            This isn&apos;t a regular promotion. Here&apos;s what makes it different.
+          </p>
+
+          <div className="space-y-4 max-w-2xl mx-auto">
+            {exclusiveReasons.map((reason, i) => (
+              <div
+                key={i}
+                className="flex items-start gap-4 bg-white rounded-xl p-5 shadow-sm border"
+                style={{ borderColor: `${GOLD}30` }}
+              >
+                <div
+                  className="w-8 h-8 rounded-full flex-shrink-0 flex items-center justify-center text-sm font-bold"
+                  style={{ backgroundColor: GOLD, color: RICH_BROWN }}
+                >
+                  {i + 1}
+                </div>
+                <p className="text-gray-700 pt-1">{reason}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* What Your Golden Ticket Includes */}
+      <section className="py-20 px-4 bg-white">
+        <div className="max-w-6xl mx-auto">
+          <h2
+            className="text-3xl md:text-5xl font-bold text-center mb-4"
+            style={{ fontFamily: 'var(--font-playfair), serif', color: RICH_BROWN }}
+          >
+            Your Golden Ticket Includes
+          </h2>
+          <p className="text-center text-gray-500 text-lg mb-12">
+            Everything you need for the vacation of a lifetime.
+          </p>
+
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {goldenPerks.map((perk, i) => (
+              <div
+                key={i}
+                className="rounded-2xl p-6 border-2 hover:shadow-xl transition-shadow"
+                style={{ borderColor: `${GOLD}30`, backgroundColor: `${GOLD}05` }}
+              >
+                <div
+                  className="w-14 h-14 rounded-xl flex items-center justify-center mb-4"
+                  style={{ backgroundColor: `${GOLD}20` }}
+                >
+                  <perk.icon className="w-7 h-7" style={{ color: DARK_GOLD }} />
+                </div>
+                <h3
+                  className="text-xl font-bold mb-2"
+                  style={{ fontFamily: 'var(--font-playfair), serif', color: RICH_BROWN }}
+                >
+                  {perk.title}
+                </h3>
+                <p className="text-gray-600 text-sm">{perk.description}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Ticket Checklist */}
+      <section className="py-20 px-4" style={{ backgroundColor: CREAM }}>
+        <div className="max-w-lg mx-auto">
+          <div
+            className="rounded-3xl p-1"
+            style={{
+              background: `linear-gradient(135deg, ${GOLD}, #FDE68A, ${GOLD})`,
+            }}
+          >
+            <div className="bg-white rounded-3xl p-8">
+              <h3
+                className="text-2xl font-bold text-center mb-6"
+                style={{ fontFamily: 'var(--font-playfair), serif', color: RICH_BROWN }}
+              >
+                What&apos;s Included
+              </h3>
+
+              <div className="space-y-4">
+                {ticketInclusions.map((item, i) => (
+                  <div key={i} className="flex items-center gap-3">
+                    <BadgeCheck className="w-6 h-6 flex-shrink-0" style={{ color: GOLD }} />
+                    <span className="text-gray-700 font-medium">{item.item}</span>
+                  </div>
+                ))}
+              </div>
+
+              <div className="mt-6 pt-6 border-t border-gray-100 text-center">
+                <p className="text-gray-400 text-sm">Total value: <span className="line-through">$3,200+</span></p>
+                <p className="text-3xl font-bold mt-1" style={{ color: GOLD }}>
+                  ${PAYMENT_CONFIG.monthlyPrice}/mo × {PAYMENT_CONFIG.totalMonths}
+                </p>
+                <p className="text-gray-400 text-sm mt-1">
+                  or ${PAYMENT_CONFIG.oneTimePrice} one-time
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Countdown */}
+      <section className="py-20 px-4 bg-white">
+        <div className="max-w-4xl mx-auto text-center">
+          <h2
+            className="text-3xl md:text-5xl font-bold mb-4"
+            style={{ fontFamily: 'var(--font-playfair), serif', color: RICH_BROWN }}
+          >
+            This Golden Ticket Expires In
+          </h2>
+          <p className="text-gray-500 mb-8">
+            When the timer reaches zero, this exclusive pricing disappears.
+            Don&apos;t lose your golden opportunity.
+          </p>
+
+          <CountdownTimer
+            minutes={30}
+            message="This golden ticket expires in"
+            accentColor={GOLD}
+          />
+        </div>
+      </section>
+
+      {/* TikTok */}
+      <section className="py-20 px-4" style={{ backgroundColor: CREAM }}>
+        <div className="max-w-6xl mx-auto">
+          <h2
+            className="text-3xl md:text-5xl font-bold text-center mb-4"
+            style={{ fontFamily: 'var(--font-playfair), serif', color: RICH_BROWN }}
+          >
+            See What Awaits <span style={{ color: GOLD }}>Golden Ticket</span> Holders
+          </h2>
+          <p className="text-center text-gray-500 text-lg mb-12">
+            Real guests. Real resorts. Real paradise.
+          </p>
+          <TikTokCarousel title="" subtitle="" />
+        </div>
+      </section>
+
+      {/* Testimonials */}
+      <section className="py-20 px-4 bg-white">
+        <div className="max-w-6xl mx-auto">
+          <h2
+            className="text-3xl md:text-5xl font-bold text-center mb-12"
+            style={{ fontFamily: 'var(--font-playfair), serif', color: RICH_BROWN }}
+          >
+            Previous <span style={{ color: GOLD }}>Golden Ticket</span> Winners
+          </h2>
+          <div className="grid md:grid-cols-3 gap-6">
+            {TESTIMONIALS.slice(0, 3).map((t, i) => (
+              <TestimonialCard key={i} quote={t.quote} name={t.name} location={t.location} photo={t.photo} />
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Primary CTA - Ebook */}
+      <section
+        id="signup-form"
+        className="py-20 px-4"
+        style={{ backgroundColor: RICH_BROWN }}
+      >
+        <div className="max-w-2xl mx-auto text-center">
+          <div
+            className="w-20 h-20 rounded-full mx-auto mb-6 flex items-center justify-center"
+            style={{ backgroundColor: `${GOLD}20` }}
+          >
+            <Ticket className="w-10 h-10" style={{ color: GOLD }} />
+          </div>
+          <h2
+            className="text-3xl md:text-5xl font-bold text-white mb-4"
+            style={{ fontFamily: 'var(--font-playfair), serif' }}
+          >
+            Claim Your <span style={{ color: GOLD }}>Golden Guide</span>
+          </h2>
+          <p className="text-amber-200/70 text-lg mb-8">
+            Download our free &ldquo;Budget Luxury Travel&rdquo; guide. See exactly what
+            your golden ticket unlocks. This exclusive guide is only available through golden ticket links.
+          </p>
+
+          <EbookCaptureForm
+            sourceLp="golden-ticket"
+            accentColor={GOLD}
+            buttonText="Claim Your Golden Guide"
+            variant="card"
+          />
+
+          <p className="text-amber-200/30 text-sm mt-4">
+            Free instant download. Exclusive golden ticket content.
+          </p>
+        </div>
+      </section>
+
+      {/* Secondary CTA - Pay Now */}
+      <section className="py-20 px-4" style={{ backgroundColor: CREAM }}>
+        <div className="max-w-2xl mx-auto text-center">
+          <h2
+            className="text-3xl md:text-4xl font-bold mb-4"
+            style={{ fontFamily: 'var(--font-playfair), serif', color: RICH_BROWN }}
+          >
+            Ready to <span style={{ color: GOLD }}>Redeem</span> Your Ticket?
+          </h2>
+          <p className="text-gray-500 mb-2">
+            Only {ticketsLeft} golden tickets remain. When they&apos;re gone, the price returns to $59/mo.
+            This is your moment.
+          </p>
+          <p className="text-gray-400 text-sm mb-8">
+            30-day money-back guarantee. Zero risk. Pure golden opportunity.
+          </p>
+
+          <PayNowForm
+            accentColor={GOLD}
+            buttonText="Redeem My Golden Ticket"
+          />
+        </div>
+      </section>
+
+      {/* Trust Badges */}
+      <section className="py-12 px-4 bg-white">
+        <TrustBadges />
+      </section>
+
+      {/* FAQ */}
+      <InfluencerBuzz />
+
+      <section className="py-20 px-4" style={{ backgroundColor: CREAM }}>
+        <div className="max-w-3xl mx-auto">
+          <h2
+            className="text-3xl md:text-4xl font-bold text-center mb-12"
+            style={{ fontFamily: 'var(--font-playfair), serif', color: RICH_BROWN }}
+          >
+            Golden Ticket FAQ
+          </h2>
+          <FAQAccordion items={FAQ_ITEMS} />
+        </div>
+      </section>
+
+      {/* Final CTA */}
+      <section className="py-16 px-4 text-center" style={{ backgroundColor: RICH_BROWN }}>
+        <div className="max-w-xl mx-auto">
+          <div className="flex items-center justify-center gap-1 mb-4">
+            {[1, 2, 3, 4, 5].map((s) => (
+              <Star key={s} className="w-6 h-6 fill-current" style={{ color: GOLD }} />
+            ))}
+          </div>
+          <h2
+            className="text-2xl md:text-4xl font-bold text-white mb-4"
+            style={{ fontFamily: 'var(--font-playfair), serif' }}
+          >
+            Don&apos;t Let Your Golden Ticket Expire
+          </h2>
+          <p className="text-amber-200/60 mb-6">
+            {ticketsLeft} tickets left. This page disappears when they&apos;re gone.
+          </p>
+          <a
+            href="#signup-form"
+            className="inline-flex items-center gap-2 px-8 py-4 rounded-full text-lg font-bold shadow-xl hover:scale-105 transition-transform"
+            style={{ backgroundColor: GOLD, color: RICH_BROWN }}
+          >
+            Claim My Golden Ticket <ArrowRight className="w-5 h-5" />
+          </a>
+        </div>
+      </section>
+
+      <StickyMobileCTA
+        buttonText="Claim Golden Ticket"
+        accentColor={GOLD}
+      />
+    </div>
+  )
+}
diff --git a/src/components/lp/pages/LP41SeatReserved.tsx b/src/components/lp/pages/LP41SeatReserved.tsx
new file mode 100644
index 0000000..aa16b41
--- /dev/null
+++ b/src/components/lp/pages/LP41SeatReserved.tsx
@@ -0,0 +1,549 @@
+'use client'
+
+import {
+  CheckCircle2, Sparkles, Clock, Lock, ShieldCheck,
+  ArrowRight, Star, Gift, PlayCircle, Users,
+  Ticket, BookOpen, MapPin, PartyPopper,
+} from 'lucide-react'
+import PayNowForm from '@/components/lp/shared/PayNowForm'
+import CountdownTimer from '@/components/lp/shared/CountdownTimer'
+import TestimonialCard from '@/components/lp/shared/TestimonialCard'
+import TrustBadges from '@/components/lp/shared/TrustBadges'
+import StickyMobileCTA from '@/components/lp/shared/StickyMobileCTA'
+import InfluencerBuzz from '@/components/lp/shared/InfluencerBuzz'
+import FAQAccordion from '@/components/lp/shared/FAQAccordion'
+import { PAYMENT_CONFIG } from '@/app/lp/_config/types'
+
+const ORANGE = '#E8651A'
+const DARK = '#0F172A'
+const GOLD = '#F59E0B'
+const CREAM = '#FEF7ED'
+
+const transformations = [
+  {
+    name: 'Todd & Jessica Dudley',
+    location: 'Chicago, IL',
+    photo: '/images/cdn/photo-1522529599102-193c0d76b5b6.jpg',
+    before: 'We\u2019d been pricing Cancun for months. Every site wanted $2,800+ per couple.',
+    moment: 'When I saw the $29/mo certificate I almost scrolled past \u2014 I thought it had to be fake.',
+    after: 'We booked Riviera Maya, flew out 5 weeks later. Oceanfront suite, unlimited everything. 95% of the puzzle we were missing was just this deal.',
+  },
+  {
+    name: 'Octavia Taylor',
+    location: 'Atlanta, GA',
+    photo: '/images/cdn/photo-1494790108377-be9c29b29330.jpg',
+    before: 'I kept putting off our anniversary trip \u2014 couldn\u2019t justify spending $3K.',
+    moment: 'A friend sent me the link. I locked in the $249 one-time option in under 10 minutes.',
+    after: 'Cabo San Lucas. Sunset catamaran, swim-up bar, the works. The only tweak I needed was letting myself book it.',
+  },
+  {
+    name: 'Debbie Dussler',
+    location: 'Phoenix, AZ',
+    photo: '/images/cdn/photo-1438761681033-6461ffad8d80.jpg',
+    before: 'My husband thought it was a scam \u2014 we almost cancelled after signing up.',
+    moment: 'Customer service walked us through everything. We kept the certificate and picked Puerto Vallarta.',
+    after: 'Best 5 days we\u2019ve had in a decade. We\u2019re already planning year two at Cancun.',
+  },
+]
+
+const benefits = [
+  {
+    icon: Ticket,
+    title: 'Your All-Inclusive Certificate',
+    desc: '5 days / 4 nights for two at a 4-5\u2605 Mexico resort \u2014 meals, drinks, pools, beaches included.',
+  },
+  {
+    icon: MapPin,
+    title: '4 Destinations to Choose From',
+    desc: 'Cancun, Cabo San Lucas, Riviera Maya, or Puerto Vallarta \u2014 book whichever fits your mood.',
+  },
+  {
+    icon: BookOpen,
+    title: 'The Paradise Planning Vault',
+    desc: 'Our 11-page insider guide: packing lists, excursion picks, flight hacks, what to skip.',
+  },
+  {
+    icon: PartyPopper,
+    title: 'Bring a Guest \u2014 Free',
+    desc: 'Family of 4 — 2 adults + 2 kids under 12, all covered at no extra charge.',
+  },
+]
+
+const socialProof = [
+  {
+    quote: 'Booked Cancun for our 10th anniversary. Ocean view suite, infinity pool, and we paid less than one night would cost elsewhere.',
+    name: 'Sarah & Mike',
+    location: 'Chicago, IL',
+    photo: '/images/cdn/photo-1522529599102-193c0d76b5b6.jpg',
+  },
+  {
+    quote: 'I\u2019m a travel agent. This is the single best certificate I\u2019ve seen in 14 years of booking Mexico trips.',
+    name: 'Rachel T.',
+    location: 'Phoenix, AZ',
+    photo: '/images/cdn/photo-1544005313-94ddf0286df2.jpg',
+  },
+  {
+    quote: 'Split it into $29/mo payments and barely felt it. Riviera Maya was unreal \u2014 cenote tour, swim-up bars, all included.',
+    name: 'James & Patricia',
+    location: 'Miami, FL',
+    photo: '/images/cdn/photo-1500648767791-00dcc994a43e.jpg',
+  },
+  {
+    quote: 'My husband thought it was a scam. I booked anyway. He spent the whole flight home apologizing.',
+    name: 'Maria G.',
+    location: 'Houston, TX',
+    photo: '/images/cdn/photo-1438761681033-6461ffad8d80.jpg',
+  },
+  {
+    quote: 'We paid $249 total. For 5 days all-inclusive. I\u2019ve done the math three times \u2014 it still works out.',
+    name: 'David & Lisa',
+    location: 'Denver, CO',
+    photo: '/images/cdn/photo-1472099645785-5658abf4ff4e.jpg',
+  },
+]
+
+export default function LP41SeatReserved() {
+  const scrollToForm = () => {
+    document.getElementById('signup-form')?.scrollIntoView({ behavior: 'smooth' })
+  }
+
+  return (
+    <div className="min-h-screen bg-white" style={{ fontFamily: 'var(--font-inter), sans-serif' }}>
+      <StickyMobileCTA accentColor={ORANGE} buttonText="Reserve My Certificate" />
+
+      {/* ===== HEADER CONFIRMATION ===== */}
+      <section className="pt-14 pb-10 px-4" style={{ backgroundColor: CREAM }}>
+        <div className="max-w-3xl mx-auto text-center">
+          <div className="inline-flex items-center gap-2 bg-white border-2 border-orange-300 rounded-full px-4 py-1.5 mb-5 shadow-sm">
+            <CheckCircle2 className="w-4 h-4" style={{ color: ORANGE }} />
+            <span className="text-xs font-bold tracking-widest uppercase" style={{ color: ORANGE }}>
+              Your Spot Is Being Held
+            </span>
+          </div>
+
+          <h1 className="text-4xl sm:text-5xl lg:text-6xl font-black mb-4 tracking-tight" style={{ color: DARK }}>
+            Your <span style={{ color: ORANGE }}>Paradise Seat</span> Is
+            <br className="hidden sm:block" /> Reserved &mdash; For the Next 30 Minutes
+          </h1>
+          <p className="text-lg sm:text-xl text-gray-600 max-w-2xl mx-auto mb-6">
+            Where guesswork ends and a real Mexico vacation begins. Private resort access, lifetime booking window, and
+            the insider documents no travel agent will send you.
+          </p>
+
+          <div className="inline-flex items-center gap-3 bg-white rounded-2xl border-2 border-gray-200 px-5 py-3 shadow-lg">
+            <Clock className="w-5 h-5" style={{ color: ORANGE }} />
+            <span className="text-sm font-medium text-gray-500">This price expires in</span>
+            <CountdownTimer minutes={30} variant="digital" bgColor="#FEF3C7" textColor={DARK} accentColor={ORANGE} />
+          </div>
+
+          <div className="mt-6">
+            <button
+              onClick={scrollToForm}
+              className="inline-flex items-center gap-2 px-8 py-4 rounded-xl text-white text-base font-bold transition-all hover:scale-105 hover:shadow-2xl"
+              style={{ backgroundColor: ORANGE, boxShadow: '0 6px 24px rgba(232,101,26,0.35)' }}
+            >
+              <Ticket className="w-5 h-5" />
+              Reserve My Certificate &mdash; ${PAYMENT_CONFIG.monthlyPrice}/mo
+              <ArrowRight className="w-5 h-5" />
+            </button>
+            <p className="text-xs text-gray-400 mt-2">or ${PAYMENT_CONFIG.oneTimePrice} one-time &middot; 100% refund within 30 days</p>
+          </div>
+        </div>
+      </section>
+
+      {/* ===== TRANSFORMATION STORIES ===== */}
+      <section className="py-16 px-4 bg-white">
+        <div className="max-w-5xl mx-auto">
+          <div className="text-center mb-12">
+            <span className="text-xs font-bold tracking-widest uppercase" style={{ color: ORANGE }}>Real Travelers</span>
+            <h2 className="text-3xl sm:text-4xl font-bold mt-2 mb-4" style={{ color: DARK }}>
+              The Missing Piece Most Couples Never Find
+            </h2>
+            <p className="text-gray-500 text-lg max-w-2xl mx-auto">
+              Not information. Not another listicle. A real certificate, redeemable at real resorts, for a price
+              that stops making sense the moment you see it.
+            </p>
+          </div>
+
+          <div className="space-y-8">
+            {transformations.map((t, i) => (
+              <div key={i} className="rounded-2xl border-2 border-gray-100 hover:border-orange-200 transition-all p-6 sm:p-8 shadow-sm hover:shadow-md">
+                <div className="flex flex-col sm:flex-row gap-6">
+                  <div className="shrink-0 flex sm:block items-center gap-4">
+                    <img src={t.photo} alt={t.name} className="w-20 h-20 rounded-full object-cover border-4 border-orange-100" />
+                    <div className="sm:mt-3">
+                      <p className="font-bold text-gray-900">{t.name}</p>
+                      <p className="text-xs text-gray-500">{t.location}</p>
+                      <div className="flex items-center gap-0.5 mt-1">
+                        {[...Array(5)].map((_, j) => <Star key={j} className="w-3.5 h-3.5" style={{ color: GOLD, fill: GOLD }} />)}
+                      </div>
+                    </div>
+                  </div>
+                  <div className="flex-1 space-y-3">
+                    <div>
+                      <p className="text-[11px] font-bold tracking-widest uppercase text-gray-400 mb-1">Before</p>
+                      <p className="text-gray-600 leading-relaxed">{t.before}</p>
+                    </div>
+                    <div className="border-l-4 pl-4" style={{ borderColor: ORANGE }}>
+                      <p className="text-[11px] font-bold tracking-widest uppercase mb-1" style={{ color: ORANGE }}>The Moment</p>
+                      <p className="text-gray-800 leading-relaxed italic">&ldquo;{t.moment}&rdquo;</p>
+                    </div>
+                    <div>
+                      <p className="text-[11px] font-bold tracking-widest uppercase text-green-600 mb-1">After</p>
+                      <p className="text-gray-700 leading-relaxed font-medium">{t.after}</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ===== CORE BENEFITS ===== */}
+      <section className="py-16 px-4" style={{ backgroundColor: DARK }}>
+        <div className="max-w-5xl mx-auto">
+          <div className="text-center mb-12">
+            <span className="text-xs font-bold tracking-widest uppercase" style={{ color: GOLD }}>What&apos;s Included</span>
+            <h2 className="text-3xl sm:text-4xl font-bold mt-2 mb-4 text-white">
+              A Certificate &mdash; Not Just Another Travel Membership
+            </h2>
+            <p className="text-gray-400 text-lg max-w-2xl mx-auto">
+              Four things stack together to make this work. Take any one away and the math breaks.
+            </p>
+          </div>
+
+          <div className="grid sm:grid-cols-2 gap-4">
+            {benefits.map((b, i) => (
+              <div key={i} className="bg-white/5 border border-white/10 rounded-2xl p-6 hover:bg-white/10 transition-all">
+                <div className="flex items-start gap-4">
+                  <div className="w-12 h-12 rounded-xl flex items-center justify-center shrink-0" style={{ backgroundColor: `${ORANGE}20` }}>
+                    <b.icon className="w-6 h-6" style={{ color: ORANGE }} />
+                  </div>
+                  <div>
+                    <h3 className="font-bold text-white text-lg mb-1">{b.title}</h3>
+                    <p className="text-gray-400 text-sm leading-relaxed">{b.desc}</p>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+
+          <div className="mt-10 text-center">
+            <div className="inline-flex items-center gap-3 bg-white/10 backdrop-blur rounded-full px-5 py-2.5 text-sm text-white">
+              <Clock className="w-4 h-4" style={{ color: GOLD }} />
+              <span>Lock-in price expires in</span>
+              <CountdownTimer minutes={30} variant="minimal" accentColor={GOLD} textColor="#FFFFFF" />
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* ===== PRICING COMPARISON ===== */}
+      <section className="py-16 px-4" style={{ backgroundColor: CREAM }}>
+        <div className="max-w-5xl mx-auto">
+          <div className="text-center mb-10">
+            <h2 className="text-3xl sm:text-4xl font-bold mb-3" style={{ color: DARK }}>
+              Pick Your <span style={{ color: ORANGE }}>Paradise Tier</span>
+            </h2>
+            <p className="text-gray-500 text-lg">
+              Both options include the same resort. The difference is how you pay &mdash; and what you save.
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-2 gap-6">
+            {/* Monthly */}
+            <div className="bg-white rounded-3xl border-2 border-gray-200 p-7 shadow-sm">
+              <div className="flex items-center justify-between mb-4">
+                <span className="text-sm font-bold tracking-wide uppercase text-gray-500">Payment Plan</span>
+                <span className="text-xs font-bold text-white px-2 py-0.5 rounded-full" style={{ backgroundColor: ORANGE }}>POPULAR</span>
+              </div>
+              <div className="mb-5">
+                <p className="text-gray-400 line-through text-lg">$59/mo</p>
+                <p className="text-5xl font-black" style={{ color: ORANGE }}>
+                  ${PAYMENT_CONFIG.monthlyPrice}<span className="text-base font-normal text-gray-500">/mo</span>
+                </p>
+                <p className="text-sm text-gray-500 mt-1">&times; {PAYMENT_CONFIG.totalMonths} months &middot; ${PAYMENT_CONFIG.totalPrice} total</p>
+              </div>
+              <ul className="space-y-3 mb-6">
+                {[
+                  '5 days / 4 nights all-inclusive',
+                  'Choose from 4 Mexico destinations',
+                  'Bring a guest at no extra cost',
+                  '18 months flexible booking',
+                  'Book immediately after first payment',
+                  'Paradise Planning Vault ebook',
+                ].map((f, i) => (
+                  <li key={i} className="flex items-start gap-3 text-sm text-gray-700">
+                    <CheckCircle2 className="w-5 h-5 shrink-0 mt-0.5" style={{ color: ORANGE }} />
+                    <span>{f}</span>
+                  </li>
+                ))}
+              </ul>
+              <button
+                onClick={scrollToForm}
+                className="w-full py-4 rounded-xl font-bold text-white text-base transition-all hover:brightness-110"
+                style={{ backgroundColor: ORANGE }}
+              >
+                Start at ${PAYMENT_CONFIG.monthlyPrice}/mo
+              </button>
+            </div>
+
+            {/* One-time */}
+            <div className="relative bg-white rounded-3xl border-2 p-7 shadow-xl" style={{ borderColor: DARK }}>
+              <div className="absolute -top-3 left-1/2 -translate-x-1/2">
+                <span className="text-xs font-black text-white px-3 py-1 rounded-full shadow-lg" style={{ backgroundColor: DARK }}>
+                  BEST VALUE &mdash; SAVE ${PAYMENT_CONFIG.totalPrice - PAYMENT_CONFIG.oneTimePrice}
+                </span>
+              </div>
+              <div className="flex items-center justify-between mb-4">
+                <span className="text-sm font-bold tracking-wide uppercase text-gray-500">Pay Once &amp; Done</span>
+                <Gift className="w-5 h-5" style={{ color: GOLD }} />
+              </div>
+              <div className="mb-5">
+                <p className="text-gray-400 line-through text-lg">$599</p>
+                <p className="text-5xl font-black" style={{ color: DARK }}>
+                  ${PAYMENT_CONFIG.oneTimePrice}
+                </p>
+                <p className="text-sm font-semibold mt-1" style={{ color: '#059669' }}>
+                  Save ${PAYMENT_CONFIG.totalPrice - PAYMENT_CONFIG.oneTimePrice} vs. monthly plan
+                </p>
+              </div>
+              <ul className="space-y-3 mb-6">
+                {[
+                  'Everything in the monthly plan',
+                  'No recurring charges, ever',
+                  'Priority resort assignment',
+                  'Extra guest upgrade voucher',
+                  'Concierge booking hotline',
+                  'VIP check-in at resort front desk',
+                ].map((f, i) => (
+                  <li key={i} className="flex items-start gap-3 text-sm text-gray-700">
+                    <CheckCircle2 className="w-5 h-5 shrink-0 mt-0.5" style={{ color: DARK }} />
+                    <span>{f}</span>
+                  </li>
+                ))}
+              </ul>
+              <button
+                onClick={scrollToForm}
+                className="w-full py-4 rounded-xl font-bold text-white text-base transition-all hover:brightness-110"
+                style={{ backgroundColor: DARK }}
+              >
+                Pay ${PAYMENT_CONFIG.oneTimePrice} Once
+              </button>
+            </div>
+          </div>
+
+          <p className="text-center text-xs text-gray-500 mt-6">
+            Both options include the full 30-day money-back guarantee. Cancel the monthly plan anytime.
+          </p>
+        </div>
+      </section>
+
+      {/* ===== SOCIAL PROOF ===== */}
+      <section className="py-16 px-4 bg-white">
+        <div className="max-w-6xl mx-auto">
+          <div className="text-center mb-10">
+            <div className="inline-flex items-center gap-2 text-sm text-gray-500 mb-3">
+              <Users className="w-4 h-4" style={{ color: ORANGE }} />
+              <span>Over 2,847 certificates claimed this month</span>
+            </div>
+            <h2 className="text-3xl sm:text-4xl font-bold mb-3" style={{ color: DARK }}>
+              Real Travelers. Real Resorts. Real Receipts.
+            </h2>
+          </div>
+
+          <div className="grid md:grid-cols-3 gap-5">
+            {socialProof.slice(0, 3).map((t, i) => <TestimonialCard key={i} {...t} />)}
+          </div>
+          <div className="grid md:grid-cols-2 gap-5 mt-5 max-w-4xl mx-auto">
+            {socialProof.slice(3).map((t, i) => <TestimonialCard key={i} {...t} />)}
+          </div>
+        </div>
+      </section>
+
+      {/* ===== MESSAGING REINFORCEMENT ===== */}
+      <section className="py-14 px-4" style={{ backgroundColor: DARK }}>
+        <div className="max-w-3xl mx-auto text-center text-white">
+          <PlayCircle className="w-14 h-14 mx-auto mb-5" style={{ color: GOLD }} />
+          <h2 className="text-3xl sm:text-4xl font-bold mb-4">
+            The Booking Window Is Closing
+          </h2>
+          <p className="text-lg text-gray-300 mb-2">
+            Resort allotments are released weekly. The current batch expires at midnight, and the same certificate will
+            reprice at <span className="line-through text-gray-400">$59/mo</span> for the next cohort.
+          </p>
+          <p className="text-gray-400 mb-7">
+            Later almost always turns into never. Lock it in while the discount is still on the table.
+          </p>
+          <button
+            onClick={scrollToForm}
+            className="inline-flex items-center gap-3 px-8 py-4 rounded-xl font-bold text-base transition-all hover:scale-105"
+            style={{ backgroundColor: GOLD, color: DARK }}
+          >
+            <Ticket className="w-5 h-5" />
+            Reserve Before Midnight
+            <ArrowRight className="w-5 h-5" />
+          </button>
+        </div>
+      </section>
+
+      {/* ===== RECAP ===== */}
+      <section className="py-14 px-4 bg-white">
+        <div className="max-w-3xl mx-auto">
+          <h2 className="text-2xl sm:text-3xl font-bold text-center mb-8" style={{ color: DARK }}>
+            Here&apos;s Everything You Get Today
+          </h2>
+          <div className="bg-gradient-to-br from-orange-50 to-amber-50 rounded-3xl p-7 border border-orange-200">
+            <ul className="space-y-3">
+              {[
+                { label: 'All-Inclusive Mexico Certificate (5D/4N)', value: '$1,499' },
+                { label: 'Bring-a-Guest Upgrade (included)', value: '$699' },
+                { label: 'Paradise Planning Vault (11-page ebook)', value: '$97' },
+                { label: 'Concierge Booking Hotline', value: '$149' },
+                { label: '18-Month Flexible Booking Window', value: '$199' },
+                { label: '30-Day Money-Back Guarantee', value: 'Priceless' },
+              ].map((row, i) => (
+                <li key={i} className="flex items-center justify-between py-2 border-b border-orange-200/60 last:border-0">
+                  <span className="flex items-center gap-2 text-gray-700">
+                    <CheckCircle2 className="w-4 h-4 shrink-0" style={{ color: ORANGE }} />
+                    {row.label}
+                  </span>
+                  <span className="text-gray-500 text-sm">{row.value}</span>
+                </li>
+              ))}
+            </ul>
+            <div className="mt-5 pt-5 border-t-2 border-orange-300 flex items-center justify-between">
+              <span className="text-sm font-bold text-gray-500">Total real-world value</span>
+              <span className="text-xl font-bold line-through text-gray-400">$2,643+</span>
+            </div>
+            <div className="mt-2 flex items-center justify-between">
+              <span className="text-base font-black text-gray-900">Your price today</span>
+              <span className="text-3xl font-black" style={{ color: ORANGE }}>
+                ${PAYMENT_CONFIG.monthlyPrice}<span className="text-sm font-normal">/mo</span>
+              </span>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* ===== ORDER FORM ===== */}
+      <section
+        id="signup-form"
+        className="py-16 px-4"
+        style={{ background: `linear-gradient(135deg, ${DARK} 0%, #1e293b 100%)` }}
+      >
+        <div className="max-w-xl mx-auto">
+          <div className="bg-white rounded-3xl shadow-2xl overflow-hidden">
+            {/* Top banner with countdown */}
+            <div className="px-6 py-4 text-center" style={{ backgroundColor: ORANGE }}>
+              <div className="flex items-center justify-center gap-2 text-white">
+                <Clock className="w-4 h-4" />
+                <span className="text-xs font-bold tracking-wide uppercase">Price locks in</span>
+                <CountdownTimer minutes={30} variant="minimal" accentColor="#FFFFFF" textColor="#FFFFFF" />
+              </div>
+            </div>
+
+            <div className="p-6 sm:p-8">
+              <div className="flex items-center gap-2 mb-2">
+                <Sparkles className="w-5 h-5" style={{ color: ORANGE }} />
+                <span className="text-xs font-bold tracking-widest uppercase text-gray-500">Step 1 of 2</span>
+              </div>
+              <h2 className="text-2xl font-bold mb-2" style={{ color: DARK }}>
+                Reserve Your Discounted Seat
+              </h2>
+              <p className="text-sm text-gray-500 mb-5">
+                Starts at <strong className="text-gray-800">${PAYMENT_CONFIG.monthlyPrice}/mo</strong> &middot; the
+                price rises after this countdown hits zero.
+              </p>
+
+              <PayNowForm
+                variant="default"
+                accentColor={ORANGE}
+                buttonText={`Reserve My Certificate \u2014 $${PAYMENT_CONFIG.monthlyPrice}/mo`}
+                sourceLp="seat-reserved"
+              />
+
+              <div className="mt-5 pt-5 border-t text-center">
+                <div className="flex items-center justify-center gap-2 mb-1 text-green-700">
+                  <ShieldCheck className="w-4 h-4" />
+                  <span className="text-sm font-bold">100% Money-Back Within 30 Days</span>
+                </div>
+                <p className="text-xs text-gray-400">
+                  If the resort doesn&apos;t meet your expectations, we refund every penny. No hoops, no hard feelings.
+                </p>
+              </div>
+
+              <div className="mt-5">
+                <TrustBadges variant="compact" textColor="#94a3b8" />
+              </div>
+            </div>
+          </div>
+
+          <p className="text-center text-xs text-gray-400 mt-5 flex items-center justify-center gap-1.5">
+            <Lock className="w-3 h-3" /> 256-bit SSL &middot; PCI compliant &middot; Cards charged via NMI
+          </p>
+        </div>
+      </section>
+
+      <InfluencerBuzz variant="light" count={3} />
+
+      {/* ===== FAQ ===== */}
+      <section className="py-16 px-4 bg-white">
+        <div className="max-w-2xl mx-auto">
+          <h2 className="text-3xl font-bold text-center mb-8" style={{ color: DARK }}>
+            Questions Before You Reserve?
+          </h2>
+          <FAQAccordion />
+        </div>
+      </section>
+
+      {/* ===== FINAL CTA ===== */}
+      <section className="py-14 px-4 text-center" style={{ backgroundColor: CREAM }}>
+        <div className="max-w-2xl mx-auto">
+          <CountdownTimer minutes={30} variant="digital" bgColor="#FFFFFF" textColor={DARK} accentColor={ORANGE} className="justify-center mb-6" />
+          <h3 className="text-2xl sm:text-3xl font-bold mb-3" style={{ color: DARK }}>
+            The Discount Closes When the Clock Hits Zero
+          </h3>
+          <p className="text-gray-600 mb-6">
+            Same resort. Same certificate. Same 5 days of unlimited everything. Just not at this price.
+          </p>
+          <button
+            onClick={scrollToForm}
+            className="inline-flex items-center gap-3 px-10 py-5 rounded-xl text-white text-lg font-bold transition-all hover:scale-105"
+            style={{ backgroundColor: ORANGE, boxShadow: '0 6px 24px rgba(232,101,26,0.35)' }}
+          >
+            <Ticket className="w-5 h-5" />
+            Reserve My Discounted Seat
+            <ArrowRight className="w-5 h-5" />
+          </button>
+          <p className="text-xs text-gray-400 mt-4">
+            Starts at ${PAYMENT_CONFIG.monthlyPrice}/mo &middot; 30-day money-back &middot; Cancel anytime
+          </p>
+        </div>
+      </section>
+
+      {/* ===== COMPLIANCE FOOTER ===== */}
+      <footer className="py-10 px-4 bg-gray-900 text-gray-400 text-xs">
+        <div className="max-w-4xl mx-auto space-y-3">
+          <p className="font-bold text-gray-300">Earnings &amp; Travel Disclaimer</p>
+          <p>
+            Travel certificates are subject to availability, blackout dates, and resort terms. Results shown reflect
+            individual traveler experiences and are not guaranteed. You are solely responsible for any flights,
+            transfers, and tips not covered by the all-inclusive package.
+          </p>
+          <p>
+            Mexico Paradise Vacations has been connecting travelers to certified Mexico resorts since 2008. For
+            questions, call <a href="tel:+18886022424" className="text-white underline">(888) 602-2424</a> or email{' '}
+            <a href="mailto:support@724vacation.com" className="text-white underline">support@724vacation.com</a>.
+          </p>
+          <p className="text-gray-500">
+            &copy; {new Date().getFullYear()} Mexico Paradise Vacations &middot;{' '}
+            <a href="/privacy" className="underline">Privacy Policy</a> &middot;{' '}
+            <a href="/terms" className="underline">Terms</a>
+          </p>
+        </div>
+      </footer>
+    </div>
+  )
+}
diff --git a/src/components/lp/pages/LP42VIPPass.tsx b/src/components/lp/pages/LP42VIPPass.tsx
new file mode 100644
index 0000000..f6bb285
--- /dev/null
+++ b/src/components/lp/pages/LP42VIPPass.tsx
@@ -0,0 +1,529 @@
+'use client'
+
+import {
+  Crown, Lock, Clock, CheckCircle2, XCircle, ArrowRight,
+  Gem, Gift, Sparkles, ShieldCheck, Star, Ticket,
+  PhoneCall, BookOpen, Plane, Users, MapPin,
+} from 'lucide-react'
+import PayNowForm from '@/components/lp/shared/PayNowForm'
+import CountdownTimer from '@/components/lp/shared/CountdownTimer'
+import TrustBadges from '@/components/lp/shared/TrustBadges'
+import StickyMobileCTA from '@/components/lp/shared/StickyMobileCTA'
+import TestimonialCard from '@/components/lp/shared/TestimonialCard'
+import InfluencerBuzz from '@/components/lp/shared/InfluencerBuzz'
+import { PAYMENT_CONFIG } from '@/app/lp/_config/types'
+
+const PURPLE = '#6D28D9'
+const DEEP = '#1E1B4B'
+const GOLD = '#F59E0B'
+const GOLD_DEEP = '#B45309'
+
+const vipBonuses = [
+  {
+    icon: PhoneCall,
+    title: 'Private Concierge Line',
+    desc: 'Direct access to our Mexico booking desk. No call centers, no waits.',
+    value: '$149',
+  },
+  {
+    icon: BookOpen,
+    title: 'Paradise Planning Vault',
+    desc: '11-page insider guide: packing, excursions, flight hacks, what to skip.',
+    value: '$97',
+  },
+  {
+    icon: Plane,
+    title: 'Free Guest Upgrade Voucher',
+    desc: 'Bring a third traveler at 50% off \u2014 only available to VIP holders.',
+    value: '$299',
+  },
+  {
+    icon: Sparkles,
+    title: 'VIP Check-in at Resort',
+    desc: 'Skip the front-desk line, welcome drink, early room assignment.',
+    value: '$129',
+  },
+  {
+    icon: Gift,
+    title: 'Lifetime Rebooking Rights',
+    desc: 'If dates fall through, re-use your certificate forever. No expiration.',
+    value: '$199',
+  },
+]
+
+const vipTestimonials = [
+  {
+    quote: "The concierge line alone paid for the VIP. She upgraded us to oceanfront for free and booked our catamaran sunset cruise.",
+    name: "Jennifer & Tom",
+    location: "New York, NY",
+    photo: "/images/cdn/photo-1494790108377-be9c29b29330.jpg",
+  },
+  {
+    quote: "VIP check-in was unreal. We walked past a 40-minute line, got welcome margaritas, and our suite was ready at 11am.",
+    name: "David & Lisa",
+    location: "Denver, CO",
+    photo: "/images/cdn/photo-1472099645785-5658abf4ff4e.jpg",
+  },
+  {
+    quote: "My sister joined us last-minute. The VIP guest voucher saved us $600. Cabo was a complete dream.",
+    name: "Maria G.",
+    location: "Houston, TX",
+    photo: "/images/cdn/photo-1438761681033-6461ffad8d80.jpg",
+  },
+]
+
+const standardFeatures = [
+  { label: '5 days / 4 nights all-inclusive', included: true },
+  { label: 'Choose 1 of 4 Mexico destinations', included: true },
+  { label: 'Bring a guest at no extra cost', included: true },
+  { label: '18-month flexible booking window', included: true },
+  { label: 'Paradise Planning Vault ebook', included: false },
+  { label: 'Private concierge booking line', included: false },
+  { label: 'VIP resort check-in privileges', included: false },
+  { label: 'Third-guest upgrade voucher', included: false },
+  { label: 'Lifetime rebooking rights', included: false },
+]
+
+const vipFeatures = [
+  { label: '5 days / 4 nights all-inclusive', included: true },
+  { label: 'Choose 1 of 4 Mexico destinations', included: true },
+  { label: 'Bring a guest at no extra cost', included: true },
+  { label: '18-month flexible booking window', included: true },
+  { label: 'Paradise Planning Vault ebook', included: true },
+  { label: 'Private concierge booking line', included: true },
+  { label: 'VIP resort check-in privileges', included: true },
+  { label: 'Third-guest upgrade voucher', included: true },
+  { label: 'Lifetime rebooking rights', included: true },
+]
+
+export default function LP42VIPPass() {
+  const scrollToForm = () => {
+    document.getElementById('signup-form')?.scrollIntoView({ behavior: 'smooth' })
+  }
+
+  return (
+    <div className="min-h-screen bg-white" style={{ fontFamily: 'var(--font-inter), sans-serif' }}>
+      <StickyMobileCTA accentColor={PURPLE} buttonText="Claim VIP Access" />
+
+      {/* ===== HERO ===== */}
+      <section
+        className="pt-14 pb-16 px-4 text-white"
+        style={{ background: `linear-gradient(135deg, ${DEEP} 0%, ${PURPLE} 100%)` }}
+      >
+        <div className="max-w-4xl mx-auto text-center">
+          <div className="inline-flex items-center gap-2 bg-yellow-400/15 border border-yellow-400/40 rounded-full px-4 py-1.5 mb-5">
+            <Crown className="w-4 h-4" style={{ color: GOLD }} />
+            <span className="text-xs font-bold tracking-widest uppercase" style={{ color: GOLD }}>
+              Invitation-Only VIP Access
+            </span>
+          </div>
+
+          <h1 className="text-4xl sm:text-5xl lg:text-6xl font-black mb-5 tracking-tight">
+            Upgrade Your Certificate to
+            <br className="hidden sm:block" />{' '}
+            <span style={{ color: GOLD }}>VIP Platinum</span>
+          </h1>
+          <p className="text-lg sm:text-xl text-purple-100 max-w-2xl mx-auto mb-4">
+            Private concierge, lifetime rebooking, guest upgrades, and skip-the-line check-in.
+            Only the first 100 seats each month unlock at this price.
+          </p>
+
+          <div className="inline-flex items-center gap-3 bg-white/10 backdrop-blur rounded-2xl border border-white/20 px-5 py-3 mt-3">
+            <Clock className="w-5 h-5" style={{ color: GOLD }} />
+            <span className="text-sm">VIP pricing locks in for</span>
+            <CountdownTimer minutes={30} variant="minimal" accentColor={GOLD} textColor="#FFFFFF" />
+          </div>
+
+          <div className="mt-7">
+            <button
+              onClick={scrollToForm}
+              className="inline-flex items-center gap-3 px-10 py-5 rounded-xl text-base font-bold transition-all hover:scale-105"
+              style={{ backgroundColor: GOLD, color: DEEP, boxShadow: '0 6px 30px rgba(245,158,11,0.45)' }}
+            >
+              <Crown className="w-5 h-5" />
+              Claim VIP Access &mdash; ${PAYMENT_CONFIG.monthlyPrice}/mo
+              <ArrowRight className="w-5 h-5" />
+            </button>
+            <p className="text-xs text-purple-200 mt-3">
+              or ${PAYMENT_CONFIG.oneTimePrice} one-time &middot; 100% money-back for 30 days
+            </p>
+          </div>
+        </div>
+      </section>
+
+      {/* ===== BONUS STACK ===== */}
+      <section className="py-16 px-4 bg-white">
+        <div className="max-w-5xl mx-auto">
+          <div className="text-center mb-10">
+            <span className="text-xs font-bold tracking-widest uppercase" style={{ color: PURPLE }}>The VIP Stack</span>
+            <h2 className="text-3xl sm:text-4xl font-bold mt-2 mb-3 text-gray-900">
+              5 Bonuses That Come Free With VIP
+            </h2>
+            <p className="text-gray-500 text-lg max-w-2xl mx-auto">
+              None of these are sold separately. They only unlock when you upgrade today.
+            </p>
+          </div>
+
+          <div className="space-y-3">
+            {vipBonuses.map((b, i) => (
+              <div key={i} className="flex items-center gap-5 p-5 rounded-2xl border-2 border-purple-100 bg-purple-50/40 hover:border-purple-300 transition-all">
+                <div className="w-12 h-12 rounded-xl flex items-center justify-center shrink-0" style={{ backgroundColor: `${PURPLE}15` }}>
+                  <b.icon className="w-6 h-6" style={{ color: PURPLE }} />
+                </div>
+                <div className="flex-1 min-w-0">
+                  <h3 className="font-bold text-gray-900">{b.title}</h3>
+                  <p className="text-sm text-gray-600">{b.desc}</p>
+                </div>
+                <div className="text-right shrink-0 hidden sm:block">
+                  <p className="text-xs text-gray-400 uppercase font-bold tracking-wide">Value</p>
+                  <p className="font-bold line-through text-gray-400">{b.value}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+
+          <div className="mt-8 bg-gradient-to-r from-purple-600 to-indigo-600 text-white rounded-2xl p-6 flex flex-col sm:flex-row items-center justify-between gap-4 shadow-xl">
+            <div className="text-center sm:text-left">
+              <p className="text-sm text-purple-200 mb-0.5">Total bonus value</p>
+              <p className="text-3xl font-black line-through text-purple-300">$873</p>
+            </div>
+            <div className="hidden sm:block w-px h-16 bg-white/20" />
+            <div className="text-center sm:text-left">
+              <p className="text-sm text-purple-200 mb-0.5">Your price</p>
+              <p className="text-3xl font-black">FREE with VIP</p>
+            </div>
+            <button
+              onClick={scrollToForm}
+              className="px-6 py-3 rounded-xl font-bold text-base transition-all hover:scale-105"
+              style={{ backgroundColor: GOLD, color: DEEP }}
+            >
+              Claim VIP Now
+            </button>
+          </div>
+        </div>
+      </section>
+
+      {/* ===== TIER COMPARISON ===== */}
+      <section className="py-16 px-4" style={{ backgroundColor: '#F8FAFC' }}>
+        <div className="max-w-5xl mx-auto">
+          <div className="text-center mb-10">
+            <h2 className="text-3xl sm:text-4xl font-bold mb-3 text-gray-900">
+              VIP Basic vs. <span style={{ color: PURPLE }}>VIP Platinum</span>
+            </h2>
+            <p className="text-gray-500 text-lg">
+              Same resort. Wildly different experience.
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-2 gap-6">
+            {/* Basic tier */}
+            <div className="bg-white rounded-3xl border-2 border-gray-200 p-7 shadow-sm">
+              <div className="flex items-center justify-between mb-4">
+                <div className="flex items-center gap-2">
+                  <Ticket className="w-5 h-5 text-gray-500" />
+                  <span className="text-sm font-bold tracking-wide uppercase text-gray-500">VIP Basic</span>
+                </div>
+                <span className="text-xs font-bold text-gray-500 bg-gray-100 px-2 py-0.5 rounded-full">AVAILABLE</span>
+              </div>
+              <div className="mb-5 pb-5 border-b">
+                <p className="text-gray-400 line-through text-lg">$299</p>
+                <p className="text-5xl font-black text-gray-800">
+                  ${PAYMENT_CONFIG.monthlyPrice}<span className="text-base font-normal text-gray-500">/mo</span>
+                </p>
+                <p className="text-xs text-gray-500 mt-1">for 10 months, total ${PAYMENT_CONFIG.totalPrice}</p>
+              </div>
+              <ul className="space-y-2.5 mb-6">
+                {standardFeatures.map((f, i) => (
+                  <li key={i} className="flex items-start gap-3 text-sm">
+                    {f.included ? (
+                      <CheckCircle2 className="w-5 h-5 shrink-0 mt-0.5 text-green-600" />
+                    ) : (
+                      <XCircle className="w-5 h-5 shrink-0 mt-0.5 text-gray-300" />
+                    )}
+                    <span className={f.included ? 'text-gray-700' : 'text-gray-400 line-through'}>{f.label}</span>
+                  </li>
+                ))}
+              </ul>
+              <button
+                onClick={scrollToForm}
+                className="w-full py-3 rounded-xl font-bold text-gray-700 border-2 border-gray-300 text-sm hover:bg-gray-50 transition-all"
+              >
+                Continue with Basic
+              </button>
+            </div>
+
+            {/* VIP Platinum tier */}
+            <div
+              className="relative rounded-3xl border-2 p-7 shadow-2xl text-white overflow-hidden"
+              style={{ background: `linear-gradient(160deg, ${DEEP}, ${PURPLE})`, borderColor: GOLD }}
+            >
+              <div className="absolute top-0 right-0 w-40 h-40 rounded-full blur-3xl opacity-40" style={{ backgroundColor: GOLD }} />
+
+              <div className="relative">
+                <div className="flex items-center justify-between mb-4">
+                  <div className="flex items-center gap-2">
+                    <Crown className="w-5 h-5" style={{ color: GOLD }} />
+                    <span className="text-sm font-bold tracking-wide uppercase" style={{ color: GOLD }}>
+                      VIP Platinum
+                    </span>
+                  </div>
+                  <span
+                    className="text-xs font-black px-2.5 py-0.5 rounded-full"
+                    style={{ backgroundColor: GOLD, color: DEEP }}
+                  >
+                    RECOMMENDED
+                  </span>
+                </div>
+                <div className="mb-5 pb-5 border-b border-white/20">
+                  <p className="text-purple-200 line-through text-lg">$599</p>
+                  <p className="text-5xl font-black">
+                    ${PAYMENT_CONFIG.oneTimePrice}<span className="text-base font-normal text-purple-200">/one-time</span>
+                  </p>
+                  <p className="text-xs font-semibold mt-1" style={{ color: GOLD }}>
+                    Save ${PAYMENT_CONFIG.totalPrice - PAYMENT_CONFIG.oneTimePrice} vs. monthly &middot; No recurring charges
+                  </p>
+                </div>
+                <ul className="space-y-2.5 mb-6">
+                  {vipFeatures.map((f, i) => (
+                    <li key={i} className="flex items-start gap-3 text-sm">
+                      <CheckCircle2 className="w-5 h-5 shrink-0 mt-0.5" style={{ color: GOLD }} />
+                      <span>{f.label}</span>
+                    </li>
+                  ))}
+                </ul>
+                <button
+                  onClick={scrollToForm}
+                  className="w-full py-4 rounded-xl font-black text-base transition-all hover:scale-105"
+                  style={{ backgroundColor: GOLD, color: DEEP, boxShadow: '0 4px 20px rgba(245,158,11,0.4)' }}
+                >
+                  <Crown className="w-4 h-4 inline mr-2 -mt-0.5" />
+                  Upgrade to VIP Platinum
+                </button>
+                <p className="text-center text-[11px] text-purple-200 mt-3">
+                  Only 100 seats released monthly &middot; this cohort expires at midnight
+                </p>
+              </div>
+            </div>
+          </div>
+
+          {/* Sold Out tier callout */}
+          <div className="mt-8 rounded-2xl border-2 border-dashed border-gray-300 p-6 bg-white/60 opacity-75">
+            <div className="flex flex-col sm:flex-row items-center gap-4">
+              <div className="w-14 h-14 rounded-xl flex items-center justify-center shrink-0 bg-gray-100">
+                <Gem className="w-7 h-7 text-gray-400" />
+              </div>
+              <div className="flex-1 text-center sm:text-left">
+                <div className="flex items-center gap-2 justify-center sm:justify-start">
+                  <h3 className="font-bold text-gray-500">VIP Black Tier</h3>
+                  <span className="text-[10px] font-black tracking-widest px-2 py-0.5 rounded-full bg-red-500 text-white">
+                    SOLD OUT
+                  </span>
+                </div>
+                <p className="text-sm text-gray-500 mt-1">
+                  Private villa, personal butler, $997 tier &mdash; all 12 seats claimed for this cycle. Waitlist opens next month.
+                </p>
+              </div>
+              <button disabled className="px-5 py-2.5 rounded-xl font-bold text-sm bg-gray-200 text-gray-400 cursor-not-allowed">
+                Waitlist Closed
+              </button>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* ===== VIP TESTIMONIALS ===== */}
+      <section className="py-16 px-4 bg-white">
+        <div className="max-w-5xl mx-auto">
+          <div className="text-center mb-10">
+            <div className="inline-flex items-center gap-2 text-sm text-gray-500 mb-3">
+              <Star className="w-4 h-4" style={{ color: GOLD, fill: GOLD }} />
+              <span>Verified VIP travelers</span>
+            </div>
+            <h2 className="text-3xl sm:text-4xl font-bold text-gray-900">
+              Why They Upgraded &mdash; And Would Again
+            </h2>
+          </div>
+
+          <div className="grid md:grid-cols-3 gap-5">
+            {vipTestimonials.map((t, i) => (
+              <div key={i} className="relative">
+                <div className="absolute -top-3 left-6 z-10">
+                  <span className="text-[11px] font-bold px-3 py-1 rounded-full text-white flex items-center gap-1" style={{ backgroundColor: PURPLE }}>
+                    <Crown className="w-3 h-3" /> VIP Platinum
+                  </span>
+                </div>
+                <TestimonialCard {...t} />
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ===== DESTINATIONS STRIP ===== */}
+      <section className="py-14 px-4" style={{ backgroundColor: '#F8FAFC' }}>
+        <div className="max-w-5xl mx-auto">
+          <div className="text-center mb-8">
+            <h3 className="text-2xl font-bold text-gray-900 mb-2">Redeemable At 4 Flagship Resorts</h3>
+            <p className="text-gray-500">VIP members get priority on all four locations, even during peak weeks.</p>
+          </div>
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+            {[
+              { name: 'Cancun', img: '/images/cdn/photo-1510097467424-192d713fd8b2.jpg' },
+              { name: 'Cabo San Lucas', img: '/images/cdn/photo-1593655600619-a88c11180241.jpg' },
+              { name: 'Riviera Maya', img: '/images/cdn/photo-1581710862235-eb6e05d8783f.jpg' },
+              { name: 'Puerto Vallarta', img: '/images/cdn/photo-1585793753011-397e6e4668d6.jpg' },
+            ].map((d, i) => (
+              <div key={i} className="relative rounded-2xl overflow-hidden aspect-[4/3] group">
+                <img src={d.img} alt={d.name} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
+                <div className="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent" />
+                <div className="absolute bottom-3 left-3 right-3 flex items-center gap-1.5 text-white">
+                  <MapPin className="w-4 h-4" style={{ color: GOLD }} />
+                  <span className="font-bold">{d.name}</span>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ===== GUARANTEE ===== */}
+      <section className="py-14 px-4 bg-white">
+        <div className="max-w-4xl mx-auto">
+          <div className="bg-gradient-to-br from-green-50 to-emerald-50 rounded-3xl border-2 border-green-200 p-8 sm:p-10">
+            <div className="flex flex-col sm:flex-row items-center gap-6">
+              <div className="shrink-0">
+                <div className="w-24 h-24 rounded-full bg-white shadow-lg flex items-center justify-center">
+                  <ShieldCheck className="w-14 h-14 text-green-600" />
+                </div>
+              </div>
+              <div className="text-center sm:text-left">
+                <h3 className="text-2xl font-bold text-gray-900 mb-2">
+                  The 30-Day VIP Guarantee
+                </h3>
+                <p className="text-gray-600 leading-relaxed">
+                  Claim VIP today. If you don&apos;t feel it&apos;s worth every penny within 30 days, we refund you in full
+                  and you keep the Paradise Planning Vault as a parting gift. No hoops. No phone tag.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* ===== ORDER FORM ===== */}
+      <section
+        id="signup-form"
+        className="py-16 px-4"
+        style={{ background: `linear-gradient(135deg, ${DEEP}, ${PURPLE})` }}
+      >
+        <div className="max-w-xl mx-auto">
+          <div className="bg-white rounded-3xl shadow-2xl overflow-hidden">
+            {/* Top banner with countdown */}
+            <div className="px-6 py-4 text-center text-white" style={{ background: `linear-gradient(90deg, ${GOLD_DEEP}, ${GOLD})` }}>
+              <div className="flex items-center justify-center gap-2">
+                <Clock className="w-4 h-4" />
+                <span className="text-xs font-bold tracking-wide uppercase">VIP cohort closes in</span>
+                <CountdownTimer minutes={30} variant="minimal" accentColor="#FFFFFF" textColor="#FFFFFF" />
+              </div>
+            </div>
+
+            <div className="p-6 sm:p-8">
+              <div className="flex items-center gap-2 mb-2">
+                <Crown className="w-5 h-5" style={{ color: PURPLE }} />
+                <span className="text-xs font-bold tracking-widest uppercase text-gray-500">VIP Platinum Enrollment</span>
+              </div>
+              <h2 className="text-2xl font-bold mb-2 text-gray-900">
+                Lock In Your VIP Access
+              </h2>
+              <p className="text-sm text-gray-500 mb-5">
+                Starts at <strong className="text-gray-800">${PAYMENT_CONFIG.monthlyPrice}/mo</strong> or{' '}
+                <strong className="text-gray-800">${PAYMENT_CONFIG.oneTimePrice} once</strong>. All 5 bonuses unlock immediately.
+              </p>
+
+              <PayNowForm
+                variant="default"
+                accentColor={PURPLE}
+                buttonText={`Claim VIP Platinum \u2014 $${PAYMENT_CONFIG.monthlyPrice}/mo`}
+                sourceLp="vip-pass"
+              />
+
+              <div className="mt-5 pt-5 border-t text-center">
+                <div className="flex items-center justify-center gap-2 mb-1 text-green-700">
+                  <ShieldCheck className="w-4 h-4" />
+                  <span className="text-sm font-bold">30-Day Full Refund Guarantee</span>
+                </div>
+                <p className="text-xs text-gray-400">
+                  Don&apos;t love it? Email us for a 100% refund &mdash; keep the Planning Vault as our gift.
+                </p>
+              </div>
+
+              <div className="mt-5">
+                <TrustBadges variant="compact" textColor="#94a3b8" />
+              </div>
+            </div>
+          </div>
+
+          <div className="mt-6 flex items-center justify-center gap-4 text-purple-200 text-xs">
+            <span className="flex items-center gap-1.5"><Lock className="w-3 h-3" /> 256-bit SSL</span>
+            <span className="flex items-center gap-1.5"><Users className="w-3 h-3" /> 2,847+ VIP members</span>
+            <span className="flex items-center gap-1.5"><ShieldCheck className="w-3 h-3" /> PCI compliant</span>
+          </div>
+        </div>
+      </section>
+
+      <InfluencerBuzz variant="light" count={3} />
+
+      {/* ===== FINAL CTA ===== */}
+      <section
+        className="py-14 px-4 text-center text-white"
+        style={{ background: `linear-gradient(135deg, ${DEEP}, ${PURPLE})` }}
+      >
+        <div className="max-w-2xl mx-auto">
+          <Crown className="w-14 h-14 mx-auto mb-4" style={{ color: GOLD }} />
+          <CountdownTimer minutes={30} variant="digital" bgColor="#FFFFFF" textColor={DEEP} accentColor={GOLD} className="justify-center mb-6" />
+          <h3 className="text-2xl sm:text-3xl font-bold mb-3">
+            VIP Access Closes at Midnight
+          </h3>
+          <p className="text-purple-100 mb-7">
+            After this cohort fills, the next VIP enrollment reprices to $299/mo. Same resort, same trip,
+            different price.
+          </p>
+          <button
+            onClick={scrollToForm}
+            className="inline-flex items-center gap-3 px-10 py-5 rounded-xl font-bold text-base transition-all hover:scale-105"
+            style={{ backgroundColor: GOLD, color: DEEP, boxShadow: '0 6px 30px rgba(245,158,11,0.45)' }}
+          >
+            <Crown className="w-5 h-5" />
+            Claim My VIP Seat
+            <ArrowRight className="w-5 h-5" />
+          </button>
+          <p className="text-xs text-purple-200 mt-4">
+            Starts at ${PAYMENT_CONFIG.monthlyPrice}/mo &middot; 30-day money-back &middot; Cancel anytime
+          </p>
+        </div>
+      </section>
+
+      {/* ===== COMPLIANCE FOOTER ===== */}
+      <footer className="py-10 px-4 bg-gray-900 text-gray-400 text-xs">
+        <div className="max-w-4xl mx-auto space-y-3">
+          <p className="font-bold text-gray-300">Earnings &amp; Travel Disclaimer</p>
+          <p>
+            VIP bonuses are delivered digitally and at the resort front desk upon arrival. Certificates are subject to
+            availability, blackout dates, and resort terms. Individual traveler experiences vary. VIP tier caps reset
+            the 1st of each month.
+          </p>
+          <p>
+            Mexico Paradise Vacations has connected travelers to certified Mexico resorts since 2008. Support line:{' '}
+            <a href="tel:+18886022424" className="text-white underline">(888) 602-2424</a>. Email:{' '}
+            <a href="mailto:support@724vacation.com" className="text-white underline">support@724vacation.com</a>.
+          </p>
+          <p className="text-gray-500">
+            &copy; {new Date().getFullYear()} Mexico Paradise Vacations &middot;{' '}
+            <a href="/privacy" className="underline">Privacy Policy</a> &middot;{' '}
+            <a href="/terms" className="underline">Terms</a>
+          </p>
+        </div>
+      </footer>
+    </div>
+  )
+}
diff --git a/src/components/lp/pages/LP43RealTraveler.tsx b/src/components/lp/pages/LP43RealTraveler.tsx
new file mode 100644
index 0000000..5b24fee
--- /dev/null
+++ b/src/components/lp/pages/LP43RealTraveler.tsx
@@ -0,0 +1,304 @@
+'use client'
+
+import {
+  CheckCircle, Sparkles, Clock, Lock, ShieldCheck, Star, Users,
+  Sun, Heart, Waves, Moon, Sandwich, Wind, Coffee, Eye, Smile,
+  Plane, MapPin, Phone, X,
+} from 'lucide-react'
+import PayNowForm from '@/components/lp/shared/PayNowForm'
+import CountdownTimer from '@/components/lp/shared/CountdownTimer'
+import FAQAccordion from '@/components/lp/shared/FAQAccordion'
+import TrustBadges from '@/components/lp/shared/TrustBadges'
+import StickyMobileCTA from '@/components/lp/shared/StickyMobileCTA'
+import { PAYMENT_CONFIG, TESTIMONIALS } from '@/app/lp/_config/types'
+
+const SLUG = 'real-traveler'
+const ORANGE = '#E8651A'
+const SUPPORT_PHONE = '888-602-2424'
+
+export default function LP43RealTraveler() {
+  return (
+    <div className="min-h-screen bg-white text-slate-900">
+
+      {/* Top trust strip */}
+      <div className="bg-slate-900 text-white text-xs">
+        <div className="max-w-6xl mx-auto px-4 py-2 flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <Lock className="w-3.5 h-3.5 text-green-400" />
+            <span>Secure 256-bit SSL · 30-Day Money-Back Guarantee</span>
+          </div>
+          <a href={`tel:${SUPPORT_PHONE.replace(/-/g, '')}`} className="hidden sm:flex items-center gap-1.5 hover:text-orange-300">
+            <Phone className="w-3.5 h-3.5" />
+            <span className="font-semibold">{SUPPORT_PHONE}</span>
+          </a>
+        </div>
+      </div>
+
+      {/* ───── 1. HEADLINE — bold promise ───── */}
+      <section className="bg-gradient-to-b from-orange-50 via-white to-white">
+        <div className="max-w-6xl mx-auto px-4 pt-10 pb-6 text-center">
+          <div className="inline-flex items-center gap-1.5 bg-orange-100 text-orange-800 rounded-full px-3 py-1 text-xs font-bold uppercase tracking-wider mb-4">
+            <Sparkles className="w-3 h-3" />
+            Real traveler · Day 4 in Mexico
+          </div>
+          <h1 className="text-4xl sm:text-5xl lg:text-6xl font-black tracking-tight text-slate-900 leading-[1.05] mb-4">
+            She Paid <span className="text-orange-600">$290 Total</span><br/>
+            For This 5-Star Mexico Vacation
+          </h1>
+          <p className="text-lg sm:text-xl text-slate-600 max-w-2xl mx-auto">
+            Watch her 20-second story below. Same resort, same dates, same 5 days —
+            <b className="text-slate-900"> last year cost her $2,800.</b>
+          </p>
+        </div>
+
+        {/* ───── HERO VIDEO — the testimonial ───── */}
+        <div className="max-w-4xl mx-auto px-4 pb-12">
+          <div className="relative rounded-2xl overflow-hidden shadow-2xl ring-1 ring-slate-200 bg-black">
+            <video
+              src="/videos/traveler-day-4-miranda.mp4"
+              poster="/images/showcase/family-vacation-joy.jpg"
+              controls
+              playsInline
+              preload="metadata"
+              className="w-full aspect-video object-cover"
+            >
+              Your browser doesn&apos;t support HTML video. <a className="text-orange-400 underline" href="/videos/traveler-day-4-miranda.mp4">Download here</a>.
+            </video>
+            <div className="absolute top-3 left-3 flex items-center gap-2 bg-red-600 text-white text-[10px] font-black px-2.5 py-1 rounded-full uppercase tracking-wider shadow-lg">
+              <span className="w-1.5 h-1.5 rounded-full bg-white animate-pulse" />
+              Real traveler
+            </div>
+          </div>
+          <p className="text-center text-xs text-slate-500 mt-3">
+            Filmed on her iPhone · No script · No edit
+          </p>
+        </div>
+      </section>
+
+      {/* ───── 2. LEAD — set the stage ───── */}
+      <section className="max-w-3xl mx-auto px-4 py-10 text-center">
+        <p className="text-lg sm:text-xl text-slate-700 leading-relaxed">
+          You&apos;ve been pricing Cancun all week. Every site quotes $2,400, $3,200, $3,800.
+          You close the tab, promise yourself <i>&ldquo;next year.&rdquo;</i>
+        </p>
+        <p className="text-lg sm:text-xl text-slate-700 leading-relaxed mt-4">
+          Here&apos;s what nobody told you: <b className="text-orange-600">the resorts are the same. You&apos;ve just been buying from the wrong place.</b>
+        </p>
+      </section>
+
+      {/* ───── 3. STORY — the OLD way ───── */}
+      <section className="bg-slate-50 border-y border-slate-100">
+        <div className="max-w-5xl mx-auto px-4 py-14">
+          <div className="text-center mb-10">
+            <p className="text-red-600 text-xs font-black uppercase tracking-[0.2em] mb-2">The Old Way</p>
+            <h2 className="text-3xl sm:text-4xl font-black text-slate-900">Why your last vacation cost $3,000+</h2>
+          </div>
+          <div className="grid sm:grid-cols-2 gap-4 max-w-3xl mx-auto">
+            {[
+              { x: 'Booking the day-of through Expedia or hotel direct', why: 'You pay retail. Retail is brutal.' },
+              { x: 'No volume discounts because you book once a year', why: 'Resorts price-discriminate by frequency.' },
+              { x: 'Rigid date windows: "We need it for spring break"', why: 'Peak dates = peak prices, every time.' },
+              { x: '"Resort fees" + drinks + tips not in the upfront price', why: '$300 a day adds up before you even unpack.' },
+            ].map((row, i) => (
+              <div key={i} className="bg-white rounded-xl border-l-4 border-red-400 p-4">
+                <p className="font-semibold text-slate-900 text-sm mb-1 flex items-start gap-2">
+                  <X className="w-4 h-4 text-red-500 shrink-0 mt-0.5" />{row.x}
+                </p>
+                <p className="text-xs text-slate-600 pl-6">{row.why}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ───── 4. PITCH — the NEW way ───── */}
+      <section className="bg-white">
+        <div className="max-w-5xl mx-auto px-4 py-14">
+          <div className="text-center mb-10">
+            <p className="text-orange-600 text-xs font-black uppercase tracking-[0.2em] mb-2">The New Way</p>
+            <h2 className="text-3xl sm:text-4xl font-black text-slate-900">A pre-paid certificate that locks in resort prices</h2>
+            <p className="text-slate-600 mt-3 max-w-2xl mx-auto">
+              You pay <b className="text-orange-600">$29 a month for 10 months</b> (or $249 one-time).
+              That gets you a certificate for 5 days / 4 nights all-inclusive at any of 4 luxury Mexican resorts —
+              redeemable any time within 18 months.
+            </p>
+          </div>
+
+          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 max-w-4xl mx-auto">
+            {[
+              { i: <Sparkles className="w-5 h-5" />, t: '5 days / 4 nights', d: 'All-inclusive luxury resort' },
+              { i: <Users className="w-5 h-5" />, t: 'Whole family covered', d: '2 adults + 2 kids under 12' },
+              { i: <Coffee className="w-5 h-5" />, t: 'Unlimited everything', d: 'Food, drinks, premium liquor' },
+              { i: <MapPin className="w-5 h-5" />, t: '4 destinations', d: 'Cancun · Cabo · Riviera Maya · Puerto Vallarta' },
+              { i: <Plane className="w-5 h-5" />, t: '18-month window', d: 'Use whenever your calendar works' },
+              { i: <ShieldCheck className="w-5 h-5" />, t: '30-day refund', d: 'Full money-back guarantee' },
+            ].map((b, i) => (
+              <div key={i} className="bg-white rounded-xl border border-slate-200 p-4 flex gap-3 hover:border-orange-300 hover:shadow-md transition-all">
+                <div className="shrink-0 w-10 h-10 rounded-lg bg-orange-100 text-orange-600 flex items-center justify-center">{b.i}</div>
+                <div>
+                  <p className="font-bold text-slate-900 text-sm">{b.t}</p>
+                  <p className="text-xs text-slate-600 mt-0.5">{b.d}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ───── Body + Mind reset ───── */}
+      <section className="bg-gradient-to-br from-slate-900 via-slate-900 to-indigo-950 text-white">
+        <div className="max-w-5xl mx-auto px-4 py-16">
+          <div className="text-center mb-10">
+            <h2 className="text-3xl sm:text-4xl font-black leading-tight mb-3">
+              It&apos;s not just a vacation.<br/>
+              <span className="text-orange-400">It&apos;s a reset for your body and mind.</span>
+            </h2>
+          </div>
+          <div className="grid md:grid-cols-2 gap-5">
+            <div className="bg-white/5 backdrop-blur rounded-xl border border-white/10 p-5">
+              <div className="flex items-center gap-2 mb-4">
+                <div className="w-10 h-10 rounded-full bg-emerald-500/20 flex items-center justify-center"><Heart className="w-5 h-5 text-emerald-400" /></div>
+                <h3 className="font-bold text-lg">For your body</h3>
+              </div>
+              <ul className="space-y-3 text-sm text-slate-300">
+                <li className="flex gap-2"><Sun className="w-4 h-4 text-amber-400 shrink-0 mt-0.5" /><span>5 days of real sunshine resets your circadian rhythm</span></li>
+                <li className="flex gap-2"><Waves className="w-4 h-4 text-blue-400 shrink-0 mt-0.5" /><span>Ocean swims that don&apos;t feel like exercise</span></li>
+                <li className="flex gap-2"><Sandwich className="w-4 h-4 text-orange-400 shrink-0 mt-0.5" /><span>Fresh grilled fish, fruit, real meals — inflammation drops</span></li>
+                <li className="flex gap-2"><Moon className="w-4 h-4 text-violet-400 shrink-0 mt-0.5" /><span>Sleep without alarms. No Sunday-night dread.</span></li>
+              </ul>
+            </div>
+            <div className="bg-white/5 backdrop-blur rounded-xl border border-white/10 p-5">
+              <div className="flex items-center gap-2 mb-4">
+                <div className="w-10 h-10 rounded-full bg-violet-500/20 flex items-center justify-center"><Smile className="w-5 h-5 text-violet-400" /></div>
+                <h3 className="font-bold text-lg">For your mind</h3>
+              </div>
+              <ul className="space-y-3 text-sm text-slate-300">
+                <li className="flex gap-2"><Wind className="w-4 h-4 text-cyan-400 shrink-0 mt-0.5" /><span>5 days off the grid. Work email locked in a vault.</span></li>
+                <li className="flex gap-2"><Eye className="w-4 h-4 text-orange-400 shrink-0 mt-0.5" /><span>Looking at the horizon for 5 days makes problems look small</span></li>
+                <li className="flex gap-2"><Heart className="w-4 h-4 text-pink-400 shrink-0 mt-0.5" /><span>No phones at dinner. Actually hear who you love.</span></li>
+                <li className="flex gap-2"><Smile className="w-4 h-4 text-emerald-400 shrink-0 mt-0.5" /><span>Memories you&apos;ll replay on your worst Tuesdays</span></li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* ───── 5. EVIDENCE — testimonials + stars + ticker ───── */}
+      <section className="bg-white">
+        <div className="max-w-5xl mx-auto px-4 py-14">
+          <div className="text-center mb-8">
+            <div className="inline-flex items-center gap-1 mb-2">
+              {[1,2,3,4,5].map(i => <Star key={i} className="w-5 h-5 fill-amber-400 text-amber-400" />)}
+              <span className="text-sm font-semibold text-slate-700 ml-1.5">4.9 from 2,847 reviews</span>
+            </div>
+            <h2 className="text-3xl sm:text-4xl font-black text-slate-900">She&apos;s not the only one</h2>
+            <p className="text-slate-600 mt-2 text-sm">Real travelers. Real photos. Real trips.</p>
+          </div>
+          <div className="grid sm:grid-cols-3 gap-4">
+            {TESTIMONIALS.slice(0, 3).map((t, i) => (
+              <div key={i} className="bg-slate-50 rounded-xl border border-slate-200 p-5">
+                <div className="flex items-center gap-1 mb-2">
+                  {[1,2,3,4,5].map(j => <Star key={j} className="w-3 h-3 fill-amber-400 text-amber-400" />)}
+                </div>
+                <p className="text-sm text-slate-700 leading-relaxed mb-4">&ldquo;{t.quote}&rdquo;</p>
+                <div className="flex items-center gap-3">
+                  {t.photo && <img src={t.photo} alt={t.name} className="w-10 h-10 rounded-full object-cover" />}
+                  <div>
+                    <p className="text-sm font-semibold text-slate-900">{t.name}</p>
+                    <p className="text-xs text-slate-500">{t.location}</p>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ───── 6. OFFER + 7. CLOSE — pricing + CTA + urgency ───── */}
+      <section id="claim" className="bg-gradient-to-br from-orange-50 via-amber-50 to-orange-100 border-y border-orange-200">
+        <div className="max-w-3xl mx-auto px-4 py-14">
+          <div className="text-center mb-8">
+            <div className="inline-flex items-center gap-1.5 bg-red-600 text-white rounded-full px-3 py-1 text-xs font-black uppercase tracking-wider mb-3">
+              <Clock className="w-3 h-3" />
+              Founders pricing — locks soon
+            </div>
+            <h2 className="text-3xl sm:text-4xl font-black text-slate-900 leading-tight">
+              Lock in <span className="text-orange-600">$29/mo</span> before this rate ends.
+            </h2>
+            <div className="mt-4 inline-block">
+              <CountdownTimer minutes={30} variant="banner" accentColor={ORANGE} />
+            </div>
+          </div>
+
+          <div className="bg-white rounded-2xl border border-slate-200 shadow-xl p-6 sm:p-8">
+            {/* Pricing anchor */}
+            <div className="bg-orange-50 border border-orange-200 rounded-xl p-4 mb-6 text-center">
+              <p className="text-xs text-slate-500 line-through">Regular: $39/mo</p>
+              <p className="text-3xl font-black text-orange-600 leading-none">
+                ${PAYMENT_CONFIG.monthlyPrice}<span className="text-base font-normal text-slate-700">/mo × {PAYMENT_CONFIG.totalMonths}</span>
+              </p>
+              <p className="text-xs text-emerald-700 font-semibold mt-1">
+                Save ${(39 - PAYMENT_CONFIG.monthlyPrice) * PAYMENT_CONFIG.totalMonths} vs regular · or one-time ${PAYMENT_CONFIG.oneTimePrice}
+              </p>
+            </div>
+
+            <PayNowForm sourceLp={SLUG} accentColor={ORANGE} buttonText="CLAIM MY CERTIFICATE →" />
+
+            {/* Risk reversal stack */}
+            <div className="mt-6 space-y-3">
+              <div className="flex items-start gap-3 bg-emerald-50 border border-emerald-200 rounded-lg p-3">
+                <ShieldCheck className="w-5 h-5 text-emerald-600 shrink-0 mt-0.5" />
+                <div>
+                  <p className="font-bold text-emerald-800 text-sm">30-day money-back, no questions</p>
+                  <p className="text-xs text-emerald-700">If you&apos;re not 100% satisfied, every penny back. Just email.</p>
+                </div>
+              </div>
+              <div className="flex items-start gap-3 bg-blue-50 border border-blue-200 rounded-lg p-3">
+                <Phone className="w-5 h-5 text-blue-600 shrink-0 mt-0.5" />
+                <div>
+                  <p className="font-bold text-blue-800 text-sm">Questions? Talk to a human</p>
+                  <p className="text-xs text-blue-700">
+                    Call <a href={`tel:${SUPPORT_PHONE.replace(/-/g, '')}`} className="font-bold underline">{SUPPORT_PHONE}</a> · Mon-Sun 8am-10pm CT
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <TrustBadges className="mt-8" />
+        </div>
+      </section>
+
+      {/* ───── Honest truth callout (Sam-style close) ───── */}
+      <section className="bg-slate-900 text-white">
+        <div className="max-w-3xl mx-auto px-4 py-14 text-center">
+          <p className="text-orange-400 font-black text-xs uppercase tracking-[0.2em] mb-3">The honest truth</p>
+          <p className="text-2xl sm:text-3xl font-bold leading-snug mb-4">
+            You&apos;re not really buying a vacation.<br/>
+            <span className="text-orange-400">You&apos;re buying the version of yourself that comes back from it.</span>
+          </p>
+          <p className="text-slate-300 text-base leading-relaxed">
+            Calmer. Lighter. With photos of people you love laughing on a beach.<br/>
+            For less than what most people spend on Saturday-night dinners in a month.
+          </p>
+          <a href="#claim" className="inline-flex items-center gap-2 mt-8 bg-orange-600 hover:bg-orange-700 text-white font-black rounded-full px-8 py-4 text-base shadow-xl hover:shadow-2xl transition-all">
+            Claim My Certificate <CheckCircle className="w-5 h-5" />
+          </a>
+          <p className="text-xs text-slate-400 mt-4">
+            30-day money-back · No long-term commitment · Cancel anytime
+          </p>
+        </div>
+      </section>
+
+      {/* ───── FAQ ───── */}
+      <section className="bg-white">
+        <div className="max-w-3xl mx-auto px-4 py-14">
+          <h2 className="text-2xl sm:text-3xl font-black text-center text-slate-900 mb-6">Quick answers</h2>
+          <FAQAccordion />
+        </div>
+      </section>
+
+      <StickyMobileCTA targetId="claim" buttonText="Claim My Certificate" accentColor={ORANGE} />
+    </div>
+  )
+}
diff --git a/src/components/lp/shared/ComparisonTable.tsx b/src/components/lp/shared/ComparisonTable.tsx
new file mode 100644
index 0000000..b54c1d7
--- /dev/null
+++ b/src/components/lp/shared/ComparisonTable.tsx
@@ -0,0 +1,68 @@
+'use client'
+
+import { Check, X } from 'lucide-react'
+import { PAYMENT_CONFIG } from '@/app/lp/_config/types'
+
+interface ComparisonTableProps {
+  className?: string
+  accentColor?: string
+  variant?: 'default' | 'dark'
+}
+
+export default function ComparisonTable({
+  className = '',
+  accentColor = '#4CAF50',
+  variant = 'default',
+}: ComparisonTableProps) {
+  const isDark = variant === 'dark'
+
+  const features = [
+    { feature: '5 Days / 4 Nights', us: true, expedia: true, direct: true },
+    { feature: 'All-Inclusive (meals & drinks)', us: true, expedia: false, direct: false },
+    { feature: 'Resort Amenities', us: true, expedia: true, direct: true },
+    { feature: 'Flexible Dates', us: true, expedia: true, direct: true },
+    { feature: 'Payment Plan Available', us: true, expedia: false, direct: false },
+    { feature: 'Price Guarantee', us: true, expedia: false, direct: false },
+  ]
+
+  return (
+    <div className={`overflow-x-auto ${className}`}>
+      <table className="w-full text-sm">
+        <thead>
+          <tr className={isDark ? 'text-gray-300' : 'text-gray-600'}>
+            <th className="text-left py-3 px-4 font-medium">Feature</th>
+            <th className="text-center py-3 px-4 font-bold" style={{ color: accentColor }}>
+              Mexico Paradise
+            </th>
+            <th className="text-center py-3 px-4 font-medium">Expedia</th>
+            <th className="text-center py-3 px-4 font-medium">Direct Booking</th>
+          </tr>
+        </thead>
+        <tbody>
+          {features.map((row) => (
+            <tr key={row.feature} className={isDark ? 'border-t border-gray-700' : 'border-t'}>
+              <td className={`py-3 px-4 ${isDark ? 'text-gray-300' : 'text-gray-700'}`}>{row.feature}</td>
+              <td className="text-center py-3 px-4">
+                {row.us ? <Check className="w-5 h-5 mx-auto text-green-500" /> : <X className="w-5 h-5 mx-auto text-red-400" />}
+              </td>
+              <td className="text-center py-3 px-4">
+                {row.expedia ? <Check className="w-5 h-5 mx-auto text-green-500" /> : <X className="w-5 h-5 mx-auto text-red-400" />}
+              </td>
+              <td className="text-center py-3 px-4">
+                {row.direct ? <Check className="w-5 h-5 mx-auto text-green-500" /> : <X className="w-5 h-5 mx-auto text-red-400" />}
+              </td>
+            </tr>
+          ))}
+          <tr className={`font-bold ${isDark ? 'border-t border-gray-700' : 'border-t-2'}`}>
+            <td className={`py-3 px-4 ${isDark ? 'text-white' : 'text-gray-900'}`}>Total Price</td>
+            <td className="text-center py-3 px-4" style={{ color: accentColor }}>
+              ${PAYMENT_CONFIG.oneTimePrice}
+            </td>
+            <td className={`text-center py-3 px-4 ${isDark ? 'text-gray-300' : 'text-gray-700'}`}>$2,500+</td>
+            <td className={`text-center py-3 px-4 ${isDark ? 'text-gray-300' : 'text-gray-700'}`}>$3,000+</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  )
+}
diff --git a/src/components/lp/shared/CountdownTimer.tsx b/src/components/lp/shared/CountdownTimer.tsx
new file mode 100644
index 0000000..c962e1e
--- /dev/null
+++ b/src/components/lp/shared/CountdownTimer.tsx
@@ -0,0 +1,110 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+
+interface CountdownTimerProps {
+  minutes?: number
+  variant?: 'flip' | 'digital' | 'minimal' | 'banner'
+  className?: string
+  textColor?: string
+  bgColor?: string
+  accentColor?: string
+  message?: string
+}
+
+export default function CountdownTimer({
+  minutes = 30,
+  variant = 'digital',
+  className = '',
+  textColor = '#FFFFFF',
+  bgColor = '#000000',
+  accentColor = '#F44336',
+  message,
+}: CountdownTimerProps) {
+  const [timeLeft, setTimeLeft] = useState(() => {
+    // Session-based 30-min countdown using sessionStorage
+    if (typeof window !== 'undefined') {
+      const stored = sessionStorage.getItem('lp_countdown_end')
+      if (stored) {
+        const diff = parseInt(stored) - Date.now()
+        if (diff > 0) return diff
+      }
+      const end = Date.now() + minutes * 60 * 1000
+      sessionStorage.setItem('lp_countdown_end', end.toString())
+      return minutes * 60 * 1000
+    }
+    return minutes * 60 * 1000
+  })
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setTimeLeft(prev => Math.max(0, prev - 1000))
+    }, 1000)
+    return () => clearInterval(timer)
+  }, [])
+
+  const totalSeconds = Math.floor(timeLeft / 1000)
+  const m = Math.floor(totalSeconds / 60)
+  const s = totalSeconds % 60
+
+  const pad = (n: number) => n.toString().padStart(2, '0')
+
+  const isUrgent = totalSeconds < 300 // Last 5 minutes
+
+  if (variant === 'banner') {
+    return (
+      <div
+        className={`w-full py-3 px-4 text-center ${isUrgent ? 'animate-pulse' : ''} ${className}`}
+        style={{ backgroundColor: isUrgent ? '#B71C1C' : accentColor, color: textColor }}
+      >
+        <p className="text-sm font-bold tracking-wide">
+          {message || '⚠️ LIMITED TIME — This promotional price expires in'}{' '}
+          <span className="font-mono text-base">
+            {pad(m)}:{pad(s)}
+          </span>
+          {' '}— Act now or lose this deal forever
+        </p>
+      </div>
+    )
+  }
+
+  if (variant === 'flip') {
+    const FlipUnit = ({ value, label }: { value: string; label: string }) => (
+      <div className="flex flex-col items-center">
+        <div
+          className={`relative w-16 h-20 sm:w-20 sm:h-24 rounded-lg overflow-hidden flex items-center justify-center text-3xl sm:text-4xl font-bold shadow-lg ${isUrgent ? 'animate-pulse' : ''}`}
+          style={{ backgroundColor: bgColor, color: textColor }}
+        >
+          <div className="absolute inset-x-0 top-1/2 h-px bg-black/20" />
+          {value}
+        </div>
+        <span className="text-xs mt-2 font-medium uppercase tracking-wider opacity-70">{label}</span>
+      </div>
+    )
+
+    return (
+      <div className={`flex items-center justify-center gap-3 sm:gap-4 ${className}`}>
+        <FlipUnit value={pad(m)} label="Minutes" />
+        <span className="text-3xl font-bold" style={{ color: accentColor }}>:</span>
+        <FlipUnit value={pad(s)} label="Seconds" />
+      </div>
+    )
+  }
+
+  if (variant === 'minimal') {
+    return (
+      <span className={`font-mono font-bold ${isUrgent ? 'animate-pulse text-red-500' : ''} ${className}`} style={isUrgent ? undefined : { color: accentColor }}>
+        {pad(m)}:{pad(s)}
+      </span>
+    )
+  }
+
+  // Digital variant
+  return (
+    <div className={`flex items-center justify-center gap-2 font-mono text-2xl font-bold ${isUrgent ? 'animate-pulse' : ''} ${className}`} style={{ color: accentColor }}>
+      <span className="px-3 py-2 rounded" style={{ backgroundColor: bgColor, color: textColor }}>{pad(m)}</span>
+      <span>:</span>
+      <span className="px-3 py-2 rounded" style={{ backgroundColor: bgColor, color: textColor }}>{pad(s)}</span>
+    </div>
+  )
+}
diff --git a/src/components/lp/shared/DestinationCarousel.tsx b/src/components/lp/shared/DestinationCarousel.tsx
new file mode 100644
index 0000000..acc7c97
--- /dev/null
+++ b/src/components/lp/shared/DestinationCarousel.tsx
@@ -0,0 +1,85 @@
+'use client'
+
+import useEmblaCarousel from 'embla-carousel-react'
+import { useCallback, useEffect, useState } from 'react'
+import { ChevronLeft, ChevronRight } from 'lucide-react'
+import { DESTINATIONS } from '@/app/lp/_config/types'
+
+interface DestinationCarouselProps {
+  className?: string
+  variant?: 'default' | 'dark' | 'compact'
+}
+
+export default function DestinationCarousel({
+  className = '',
+  variant = 'default',
+}: DestinationCarouselProps) {
+  const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true })
+  const [selectedIndex, setSelectedIndex] = useState(0)
+
+  const scrollPrev = useCallback(() => emblaApi?.scrollPrev(), [emblaApi])
+  const scrollNext = useCallback(() => emblaApi?.scrollNext(), [emblaApi])
+
+  useEffect(() => {
+    if (!emblaApi) return
+    const onSelect = () => setSelectedIndex(emblaApi.selectedScrollSnap())
+    emblaApi.on('select', onSelect)
+    return () => { emblaApi.off('select', onSelect) }
+  }, [emblaApi])
+
+  const isDark = variant === 'dark'
+
+  return (
+    <div className={`relative ${className}`}>
+      <div className="overflow-hidden rounded-xl" ref={emblaRef}>
+        <div className="flex">
+          {DESTINATIONS.map((dest) => (
+            <div key={dest.name} className="flex-[0_0_100%] min-w-0">
+              <div className="relative aspect-[16/9]">
+                <img
+                  src={dest.images[0]}
+                  alt={dest.name}
+                  className="w-full h-full object-cover"
+                />
+                <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent" />
+                <div className="absolute bottom-0 left-0 right-0 p-6">
+                  <h3 className="text-2xl font-bold text-white mb-1">{dest.name}</h3>
+                  <p className="text-white/80 text-sm">{dest.tagline}</p>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <button
+        onClick={scrollPrev}
+        className={`absolute left-3 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full flex items-center justify-center ${
+          isDark ? 'bg-white/10 text-white' : 'bg-white/80 text-gray-800'
+        } shadow-md`}
+      >
+        <ChevronLeft className="w-5 h-5" />
+      </button>
+      <button
+        onClick={scrollNext}
+        className={`absolute right-3 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full flex items-center justify-center ${
+          isDark ? 'bg-white/10 text-white' : 'bg-white/80 text-gray-800'
+        } shadow-md`}
+      >
+        <ChevronRight className="w-5 h-5" />
+      </button>
+
+      <div className="flex justify-center gap-2 mt-4">
+        {DESTINATIONS.map((_, i) => (
+          <button
+            key={i}
+            onClick={() => emblaApi?.scrollTo(i)}
+            className={`w-2 h-2 rounded-full transition-colors ${
+              i === selectedIndex ? 'bg-white' : 'bg-white/40'
+            }`}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/lp/shared/DirectCheckout.tsx b/src/components/lp/shared/DirectCheckout.tsx
new file mode 100644
index 0000000..6e55a14
--- /dev/null
+++ b/src/components/lp/shared/DirectCheckout.tsx
@@ -0,0 +1,295 @@
+'use client'
+
+// Right-rail funnel, 3 states:
+//   survey   — qualify (income $70k+? couple?) + capture email/phone (saved
+//              immediately, NO double opt-in). Filters out people who'd be
+//              rejected at the resort presentation.
+//   checkout — qualified only: minimal card + ZIP (name derived server-side).
+//   declined — not qualified: captured + soft decline, no hard sell.
+
+import { useState } from 'react'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import {
+  Loader2, Lock, CreditCard, CheckCircle, ShieldCheck, Star, Undo2, ArrowRight, X, ChevronRight, Phone,
+} from 'lucide-react'
+import { toast } from 'sonner'
+import { PAYMENT_CONFIG } from '@/app/lp/_config/types'
+import { useTrackingParams } from '@/hooks/useTrackingParams'
+
+const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+
+interface DirectCheckoutProps {
+  accentColor?: string
+  sourceLp?: string
+  className?: string
+}
+
+type YN = '' | 'yes' | 'no'
+
+export default function DirectCheckout({
+  accentColor = '#E8651A',
+  sourceLp = 'home',
+  className = '',
+}: DirectCheckoutProps) {
+  const tracking = useTrackingParams(sourceLp)
+  const [step, setStep] = useState<'survey' | 'checkout' | 'declined'>('survey')
+  const [income, setIncome] = useState<YN>('')
+  const [couple, setCouple] = useState<YN>('')
+  const [email, setEmail] = useState('')
+  const [phone, setPhone] = useState('')
+  const [cardNumber, setCardNumber] = useState('')
+  const [cardExp, setCardExp] = useState('')
+  const [cardCvv, setCardCvv] = useState('')
+  const [zip, setZip] = useState('')
+  const [isLoading, setIsLoading] = useState(false)
+  const [isSuccess, setIsSuccess] = useState(false)
+  const [paymentType, setPaymentType] = useState<'monthly' | 'one-time'>('monthly')
+  const [paymentError, setPaymentError] = useState<string | null>(null)
+
+  const amount = paymentType === 'monthly' ? PAYMENT_CONFIG.monthlyPrice : PAYMENT_CONFIG.oneTimePrice
+
+  const formatCardNumber = (v: string) =>
+    v.replace(/\D/g, '').slice(0, 16).replace(/(\d{4})(?=\d)/g, '$1 ')
+  const formatExp = (v: string) => {
+    const d = v.replace(/\D/g, '').slice(0, 4)
+    return d.length >= 3 ? `${d.slice(0, 2)}/${d.slice(2)}` : d
+  }
+
+  // Step 1 — qualify + capture contact (saved immediately, active).
+  const handleSurvey = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!income || !couple) { toast.error('Please answer both questions'); return }
+    if (!EMAIL_RE.test(email)) { toast.error('Please enter a valid email'); return }
+    const qualified = income === 'yes' && couple === 'yes'
+    setIsLoading(true)
+    try {
+      await fetch('/api/track/lead', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          email, phone,
+          source_lp: qualified ? sourceLp : `${sourceLp}-unqualified`,
+          referral_code: tracking.ref,
+          utm_source: tracking.utm_source,
+          utm_medium: tracking.utm_medium,
+          utm_campaign: tracking.utm_campaign,
+        }),
+      })
+    } catch { /* never block on a capture hiccup */ }
+    setIsLoading(false)
+    setStep(qualified ? 'checkout' : 'declined')
+  }
+
+  // Step 2 — pay (email/phone already known).
+  const handlePayment = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!cardNumber || !cardExp || !cardCvv || !zip) {
+      toast.error('Please enter your card details and ZIP')
+      return
+    }
+    setIsLoading(true)
+    setPaymentError(null)
+    try {
+      const signupRes = await fetch('/api/signup', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          email, phone,
+          amount: paymentType === 'monthly' ? PAYMENT_CONFIG.totalPrice : PAYMENT_CONFIG.oneTimePrice,
+          monthly_payment: PAYMENT_CONFIG.monthlyPrice,
+          payment_plan_months: paymentType === 'monthly' ? PAYMENT_CONFIG.totalMonths : 1,
+          source_lp: tracking.source_lp,
+          referral_code: tracking.ref,
+          utm_source: tracking.utm_source,
+          utm_medium: tracking.utm_medium,
+          utm_campaign: tracking.utm_campaign,
+        }),
+      })
+      const signupData = await signupRes.json()
+      if (!signupRes.ok) throw new Error(signupData.error || 'Failed to create signup')
+
+      const paymentRes = await fetch('/api/payment/create', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          email, phone, zip,
+          cardNumber: cardNumber.replace(/\s/g, ''),
+          cardExp: cardExp.replace('/', ''),
+          cardCvv,
+          paymentType,
+          signupId: signupData.id,
+        }),
+      })
+      const paymentData = await paymentRes.json()
+      if (!paymentRes.ok) {
+        setPaymentError(paymentData.error || 'Payment declined. Please check your card details and try again.')
+        return
+      }
+      setIsSuccess(true)
+      window.location.href = '/dashboard/login'
+    } catch (error) {
+      setPaymentError(error instanceof Error ? error.message : 'Something went wrong. Please try again.')
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const ynToggle = (val: YN, set: (v: YN) => void) => (
+    <div className="grid grid-cols-2 gap-2">
+      {(['yes', 'no'] as const).map(opt => (
+        <button key={opt} type="button" onClick={() => set(opt)}
+          className={`rounded-xl border-2 py-2.5 text-sm font-bold capitalize transition-all ${
+            val === opt ? 'border-orange-500 bg-orange-50 text-orange-700' : 'border-gray-200 text-gray-500'
+          }`}>
+          {opt}
+        </button>
+      ))}
+    </div>
+  )
+
+  if (isSuccess) {
+    return (
+      <div className={`rounded-2xl bg-white p-8 text-center shadow-lg ring-1 ring-gray-100 ${className}`}>
+        <CheckCircle className="mx-auto mb-4 h-16 w-16 text-green-500" />
+        <h3 className="mb-2 text-2xl font-bold">Welcome to Paradise!</h3>
+        <p className="text-sm text-gray-500">Check your email for your vacation certificate. You can book your travel dates immediately!</p>
+      </div>
+    )
+  }
+
+  return (
+    <div id="checkout" className={`rounded-2xl bg-white shadow-xl ring-1 ring-gray-100 ${className}`}>
+      <div className="rounded-t-2xl bg-gradient-to-br from-orange-500 to-amber-600 px-5 py-4 text-center text-white">
+        <h3 className="text-lg font-bold">
+          {step === 'checkout' ? 'Get your vacation certificate' : step === 'declined' ? "Thanks for checking!" : 'Do you qualify? (10 seconds)'}
+        </h3>
+        <p className="text-sm text-white/90">5 days / 4 nights all-inclusive · kids free</p>
+      </div>
+
+      <div className="px-5 pt-4 pb-6">
+        {step === 'survey' && (
+          <form onSubmit={handleSurvey} className="space-y-4">
+            <div>
+              <p className="mb-2 text-sm font-semibold text-gray-800">1. Is your household income $70k+?</p>
+              {ynToggle(income, setIncome)}
+            </div>
+            <div>
+              <p className="mb-2 text-sm font-semibold text-gray-800">2. Are you married or living with a partner?</p>
+              {ynToggle(couple, setCouple)}
+            </div>
+            <div className="space-y-2 border-t pt-3">
+              <Input type="email" placeholder="Email address" value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                className="h-11 bg-white text-gray-900 border-gray-300 placeholder:text-gray-400" required />
+              <Input type="tel" placeholder="Phone number" value={phone}
+                onChange={(e) => setPhone(e.target.value)}
+                className="h-11 bg-white text-gray-900 border-gray-300 placeholder:text-gray-400" />
+            </div>
+            <Button type="submit" disabled={isLoading}
+              className="h-12 w-full rounded-xl text-base font-black text-white shadow-lg" style={{ backgroundColor: accentColor }}>
+              {isLoading ? <><Loader2 className="mr-2 h-5 w-5 animate-spin" /> One sec…</> : <>See if I qualify <ChevronRight className="ml-1 h-4 w-4" /></>}
+            </Button>
+            <p className="text-center text-[11px] text-gray-400">No spam. No charge yet — this just checks your fit.</p>
+          </form>
+        )}
+
+        {step === 'declined' && (
+          <div className="space-y-4 text-center">
+            <p className="text-sm text-gray-700">
+              This all-inclusive deal is reserved for households earning <strong>$70k+</strong> traveling as a
+              couple, that&apos;s a requirement of the resort partners, not us.
+            </p>
+            <p className="text-sm text-gray-500">
+              We&apos;ve saved your info and will email you other Mexico deals that fit. 🌴
+            </p>
+            <a href="tel:+18886022424"
+              className="flex items-center justify-center gap-2 rounded-xl border border-green-300 bg-green-50 px-4 py-3 text-sm font-bold text-green-800 hover:bg-green-100">
+              <Phone className="h-4 w-4" /> Questions? Call (888) 602-2424
+            </a>
+          </div>
+        )}
+
+        {step === 'checkout' && (
+          <form onSubmit={handlePayment} className="space-y-3">
+            <div className="rounded-lg bg-green-50 px-3 py-2 text-center text-xs font-bold text-green-700">✓ You qualify — lock in your deal below</div>
+
+            {/* Pricing toggle */}
+            <div className="grid grid-cols-2 gap-2">
+              <button type="button" onClick={() => setPaymentType('monthly')}
+                className={`relative rounded-xl border-2 py-3 px-2 text-center transition-all ${paymentType === 'monthly' ? 'border-orange-500 bg-orange-50' : 'border-gray-200'}`}>
+                {paymentType === 'monthly' && <span className="absolute -top-2.5 left-1/2 -translate-x-1/2 rounded-full bg-orange-500 px-2 py-0.5 text-[9px] font-black text-white">MOST POPULAR</span>}
+                <p className="text-2xl font-black" style={{ color: paymentType === 'monthly' ? '#E8651A' : '#374151' }}>${PAYMENT_CONFIG.monthlyPrice}<span className="text-xs font-normal">/mo</span></p>
+                <p className="text-[10px] font-bold text-orange-600">start today</p>
+              </button>
+              <button type="button" onClick={() => setPaymentType('one-time')}
+                className={`relative rounded-xl border-2 py-3 px-2 text-center transition-all ${paymentType === 'one-time' ? 'border-green-500 bg-green-50' : 'border-gray-200'}`}>
+                {paymentType === 'one-time' && <span className="absolute -top-2.5 left-1/2 -translate-x-1/2 rounded-full bg-green-500 px-2 py-0.5 text-[9px] font-black text-white">BEST VALUE</span>}
+                <p className="text-2xl font-black" style={{ color: paymentType === 'one-time' ? '#16a34a' : '#374151' }}>${PAYMENT_CONFIG.oneTimePrice}</p>
+                <p className="text-[10px] font-bold text-green-600">pay once</p>
+              </button>
+            </div>
+
+            <div className="flex items-center justify-between rounded-lg bg-gray-50 px-3 py-2.5 text-sm">
+              <span className="truncate text-gray-700">Booking as <strong>{email}</strong></span>
+              <button type="button" onClick={() => setStep('survey')} className="ml-2 shrink-0 text-xs font-semibold text-orange-600 underline">change</button>
+            </div>
+
+            <div className="border-t pt-3">
+              <p className="mb-2 flex items-center gap-1.5 text-xs font-bold text-gray-700"><CreditCard className="h-3.5 w-3.5" /> Card details</p>
+              <div className="space-y-2">
+                <Input type="text" inputMode="numeric" placeholder="Card number" value={cardNumber}
+                  onChange={(e) => setCardNumber(formatCardNumber(e.target.value))}
+                  className="h-11 font-mono text-sm bg-white text-gray-900 border-gray-300 placeholder:text-gray-400" maxLength={19} required />
+                <div className="grid grid-cols-3 gap-2">
+                  <Input type="text" inputMode="numeric" placeholder="MM/YY" value={cardExp}
+                    onChange={(e) => setCardExp(formatExp(e.target.value))}
+                    className="h-11 font-mono text-sm bg-white text-gray-900 border-gray-300 placeholder:text-gray-400" maxLength={5} required />
+                  <Input type="text" inputMode="numeric" placeholder="CVV" value={cardCvv}
+                    onChange={(e) => setCardCvv(e.target.value.replace(/\D/g, '').slice(0, 4))}
+                    className="h-11 font-mono text-sm bg-white text-gray-900 border-gray-300 placeholder:text-gray-400" maxLength={4} required />
+                  <Input type="text" inputMode="numeric" placeholder="ZIP" value={zip}
+                    onChange={(e) => setZip(e.target.value.replace(/\D/g, '').slice(0, 5))}
+                    className="h-11 font-mono text-sm bg-white text-gray-900 border-gray-300 placeholder:text-gray-400" maxLength={5} required />
+                </div>
+              </div>
+            </div>
+
+            <div className="rounded-lg border border-orange-200 bg-orange-50 p-3">
+              <div className="flex items-center justify-between">
+                <span className="text-xs text-gray-600">Today&apos;s charge:</span>
+                <span className="text-xl font-black text-green-600">${amount}</span>
+              </div>
+              {paymentType === 'monthly' && <p className="mt-1 text-[10px] text-gray-500">Then ${PAYMENT_CONFIG.monthlyPrice}/mo × {PAYMENT_CONFIG.totalMonths - 1} more. Cancel anytime.</p>}
+              <div className="mt-1.5 flex items-center gap-1.5 text-[10px] font-medium text-green-700"><Undo2 className="h-3 w-3" /> 100% refund within 30 days</div>
+            </div>
+
+            {paymentError && (
+              <div className="flex items-start gap-2 rounded-lg border border-red-300 bg-red-50 p-3">
+                <X className="mt-0.5 h-5 w-5 shrink-0 text-red-500" />
+                <div><p className="text-sm font-bold text-red-700">Payment failed</p><p className="text-xs text-red-600">{paymentError}</p></div>
+              </div>
+            )}
+
+            <Button type="submit" disabled={isLoading}
+              className="h-12 w-full rounded-xl text-base font-black text-white shadow-lg" style={{ backgroundColor: accentColor }}>
+              {isLoading ? <><Loader2 className="mr-2 h-5 w-5 animate-spin" /> Processing...</> : <><Lock className="mr-2 h-4 w-4" /> Pay ${amount} — start my vacation <ArrowRight className="ml-1 h-4 w-4" /></>}
+            </Button>
+
+            <div className="flex items-center justify-center gap-4 text-[10px] text-gray-400">
+              <span className="flex items-center gap-1"><Lock className="h-3 w-3" /> SSL secure</span>
+              <span className="flex items-center gap-1"><ShieldCheck className="h-3 w-3" /> 30-day guarantee</span>
+              <span className="flex items-center gap-1"><Star className="h-3 w-3" /> 4.8★</span>
+            </div>
+
+            <p className="text-center text-[8px] leading-tight text-gray-400">
+              {paymentType === 'monthly'
+                ? `By clicking Pay, you authorize $${PAYMENT_CONFIG.monthlyPrice} today and ${PAYMENT_CONFIG.totalMonths - 1} monthly charges of $${PAYMENT_CONFIG.monthlyPrice}. Cancel anytime. 100% refund within 30 days.`
+                : `By clicking Pay, you authorize $${PAYMENT_CONFIG.oneTimePrice}. 100% refund within 30 days.`}
+            </p>
+          </form>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/lp/shared/EbookCaptureForm.tsx b/src/components/lp/shared/EbookCaptureForm.tsx
new file mode 100644
index 0000000..2e9ef64
--- /dev/null
+++ b/src/components/lp/shared/EbookCaptureForm.tsx
@@ -0,0 +1,481 @@
+'use client'
+
+import { useState, useEffect, useRef } from 'react'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import {
+  Loader2, Download, BookOpen, Lock, Shield, CreditCard, CheckCircle,
+  ShieldCheck, Star, Undo2, Plane, Sparkles, ArrowRight, X, Check,
+} from 'lucide-react'
+import { toast } from 'sonner'
+import { PAYMENT_CONFIG } from '@/app/lp/_config/types'
+import { useTrackingParams } from '@/hooks/useTrackingParams'
+import { useEarlyLead } from '@/hooks/useEarlyLead'
+
+interface EbookCaptureFormProps {
+  variant?: 'inline' | 'card' | 'minimal'
+  accentColor?: string
+  buttonText?: string
+  sourceLp: string
+  className?: string
+  showIcon?: boolean
+}
+
+export default function EbookCaptureForm({
+  variant = 'inline',
+  accentColor = '#FF9800',
+  buttonText = 'Get My Free Guide',
+  sourceLp,
+  className = '',
+  showIcon = true,
+}: EbookCaptureFormProps) {
+  const tracking = useTrackingParams(sourceLp)
+  const [email, setEmail] = useState('')
+  const [name, setName] = useState('')
+  const [phone, setPhone] = useState('')
+  const [firstName, setFirstName] = useState('')
+  const [lastName, setLastName] = useState('')
+  const [cardNumber, setCardNumber] = useState('')
+  const [cardExp, setCardExp] = useState('')
+  const [cardCvv, setCardCvv] = useState('')
+  const [isLoading, setIsLoading] = useState(false)
+  const [isPaymentLoading, setIsPaymentLoading] = useState(false)
+  const [ebookSent, setEbookSent] = useState(false)
+  const [showPaymentModal, setShowPaymentModal] = useState(false)
+  const [paymentSuccess, setPaymentSuccess] = useState(false)
+  const [paymentError, setPaymentError] = useState<string | null>(null)
+  const [paymentType, setPaymentType] = useState<'monthly' | 'one-time'>('one-time')
+
+  const amount = paymentType === 'monthly' ? PAYMENT_CONFIG.monthlyPrice : PAYMENT_CONFIG.oneTimePrice
+
+  const { captured: earlyCaptured, capture: captureNow } = useEarlyLead({
+    email, phone, name: name || `${firstName} ${lastName}`.trim() || undefined,
+    source_lp: sourceLp,
+    referral_code: tracking.ref,
+    utm_source: tracking.utm_source,
+    utm_medium: tracking.utm_medium,
+    utm_campaign: tracking.utm_campaign,
+  })
+
+  // Lock body scroll when modal open
+  useEffect(() => {
+    if (showPaymentModal) {
+      document.body.style.overflow = 'hidden'
+    } else {
+      document.body.style.overflow = ''
+    }
+    return () => { document.body.style.overflow = '' }
+  }, [showPaymentModal])
+
+  const formatCardNumber = (value: string) => {
+    const digits = value.replace(/\D/g, '').slice(0, 16)
+    return digits.replace(/(\d{4})(?=\d)/g, '$1 ')
+  }
+
+  const formatExp = (value: string) => {
+    const digits = value.replace(/\D/g, '').slice(0, 4)
+    if (digits.length >= 3) return `${digits.slice(0, 2)}/${digits.slice(2)}`
+    return digits
+  }
+
+  const handleEbookSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!email) {
+      toast.error('Please enter your email')
+      return
+    }
+
+    setIsLoading(true)
+    try {
+      const res = await fetch('/api/claim', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          email, name, phone,
+          source_lp: sourceLp,
+          referral_code: tracking.ref,
+          utm_source: tracking.utm_source,
+          utm_medium: tracking.utm_medium,
+          utm_campaign: tracking.utm_campaign,
+        }),
+      })
+
+      const data = await res.json()
+      if (data.success) {
+        // Double opt-in: no direct download. The PDF link is emailed; the user
+        // must click it to confirm (verify) and unlock the guide.
+        setEbookSent(true)
+        toast.success('Check your email to confirm and get your guide!')
+      } else {
+        throw new Error(data.error || 'Failed')
+      }
+    } catch (error) {
+      console.error('Ebook error:', error)
+      toast.error('Something went wrong. Please try again.')
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handlePayment = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!firstName || !lastName || !cardNumber || !cardExp || !cardCvv) {
+      toast.error('Please fill in all fields')
+      return
+    }
+
+    setIsPaymentLoading(true)
+    setPaymentError(null)
+    try {
+      const signupRes = await fetch('/api/signup', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          email,
+          full_name: `${firstName} ${lastName}`,
+          phone,
+          amount: paymentType === 'monthly' ? PAYMENT_CONFIG.totalPrice : PAYMENT_CONFIG.oneTimePrice,
+          monthly_payment: PAYMENT_CONFIG.monthlyPrice,
+          payment_plan_months: paymentType === 'monthly' ? PAYMENT_CONFIG.totalMonths : 1,
+          source_lp: tracking.source_lp, referral_code: tracking.ref,
+          utm_source: tracking.utm_source, utm_medium: tracking.utm_medium, utm_campaign: tracking.utm_campaign,
+        }),
+      })
+      const signupData = await signupRes.json()
+      if (!signupRes.ok) throw new Error(signupData.error || 'Signup failed')
+
+      const paymentRes = await fetch('/api/payment/create', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          firstName, lastName, email, phone,
+          cardNumber: cardNumber.replace(/\s/g, ''),
+          cardExp: cardExp.replace('/', ''),
+          cardCvv,
+          paymentType,
+          signupId: signupData.id,
+        }),
+      })
+      const paymentData = await paymentRes.json()
+      if (!paymentRes.ok) {
+        setPaymentError(paymentData.error || 'Payment declined. Please check your card details and try again.')
+        return
+      }
+
+      setPaymentSuccess(true)
+      setShowPaymentModal(false)
+      // Redirect to payment success page
+      window.location.href = '/dashboard/login'
+    } catch (error) {
+      setPaymentError(error instanceof Error ? error.message : 'Something went wrong. Please try again.')
+    } finally {
+      setIsPaymentLoading(false)
+    }
+  }
+
+  // After payment success
+  if (paymentSuccess) {
+    return (
+      <div className={`text-center py-8 ${className}`}>
+        <CheckCircle className="w-16 h-16 mx-auto mb-4 text-green-500" />
+        <h3 className="text-2xl font-bold mb-2">Welcome to Paradise!</h3>
+        <p className="text-sm text-gray-500">
+          Your guide was downloaded and your vacation certificate is confirmed!
+          {paymentType === 'monthly' && ` Next payment of $${PAYMENT_CONFIG.monthlyPrice} in 30 days.`}
+        </p>
+      </div>
+    )
+  }
+
+  // After lead captured — double opt-in: tell them to check their email
+  if (ebookSent) {
+    return (
+      <div className={`text-center py-6 ${className}`}>
+        <CheckCircle className="w-12 h-12 mx-auto mb-3 text-green-500" />
+        <p className="text-lg font-semibold mb-1">Check your email!</p>
+        <p className="text-sm text-gray-500">
+          We sent a confirmation link to <strong>{email}</strong>. Click it to confirm
+          your address and unlock your free guide.
+        </p>
+      </div>
+    )
+  }
+
+  // ── EBOOK CAPTURE FORM (card variant) ──
+  const formInputs = (
+    <form onSubmit={handleEbookSubmit} className="space-y-3">
+      {variant === 'card' && (
+        <Input
+          type="text"
+          placeholder="Your name (optional)"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          className="h-11 bg-white text-gray-900 border-gray-300 placeholder:text-gray-400"
+        />
+      )}
+      <div className="relative">
+        <Input
+          type="email"
+          placeholder="your@email.com"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          onBlur={captureNow}
+          className={`${variant === 'inline' ? 'h-12 flex-1 text-base' : 'h-11'} bg-white text-gray-900 border-gray-300 placeholder:text-gray-400 ${earlyCaptured ? 'pr-9' : ''}`}
+          required
+        />
+        {earlyCaptured && (
+          <Check className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-green-600" aria-label="Email saved" />
+        )}
+      </div>
+      <Button
+        type="submit"
+        disabled={isLoading}
+        className={`${variant === 'inline' ? 'h-12 px-6' : 'w-full h-11'} text-white font-semibold whitespace-nowrap`}
+        style={{ backgroundColor: accentColor }}
+      >
+        {isLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : buttonText}
+      </Button>
+      {variant === 'card' && <p className="text-xs text-center text-gray-400">No spam. Unsubscribe anytime.</p>}
+    </form>
+  )
+
+  if (variant === 'card') {
+    return (
+      <>
+        <div className={`rounded-2xl border p-6 ${className}`}>
+          {showIcon && <BookOpen className="w-10 h-10 mb-3" style={{ color: accentColor }} />}
+          <h3 className="text-xl font-bold mb-1">Free E-book: Budget Luxury Travel</h3>
+          <p className="text-sm text-gray-500 mb-4">5 secrets to luxury Mexico vacations on a budget</p>
+          {formInputs}
+        </div>
+        {renderPaymentModal()}
+      </>
+    )
+  }
+
+  // Inline variant
+  return (
+    <>
+      <form onSubmit={handleEbookSubmit} className={`flex flex-col sm:flex-row gap-3 ${className}`}>
+        <div className="relative flex-1">
+          <Input
+            type="email"
+            placeholder="Enter your email for the free guide"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            onBlur={captureNow}
+            className={`h-12 text-base bg-white text-gray-900 border-gray-300 placeholder:text-gray-400 ${earlyCaptured ? 'pr-9' : ''}`}
+            required
+          />
+          {earlyCaptured && (
+            <Check className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-green-600" aria-label="Email saved" />
+          )}
+        </div>
+        <Button
+          type="submit"
+          disabled={isLoading}
+          className="h-12 px-6 text-white font-semibold whitespace-nowrap"
+          style={{ backgroundColor: accentColor }}
+        >
+          {isLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : buttonText}
+        </Button>
+      </form>
+      {renderPaymentModal()}
+    </>
+  )
+
+  // ── PAYMENT MODAL (same design as PayNowForm) ──
+  function renderPaymentModal() {
+    if (!showPaymentModal) return null
+
+    return (
+      <div className="fixed inset-0 z-[100]">
+        <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={() => setShowPaymentModal(false)} />
+
+        <div className="absolute inset-0 sm:inset-auto sm:top-1/2 sm:left-1/2 sm:-translate-x-1/2 sm:-translate-y-1/2 sm:max-w-lg sm:w-[95%] sm:max-h-[90vh] sm:rounded-2xl bg-white overflow-y-auto">
+          {/* Close */}
+          <button onClick={() => setShowPaymentModal(false)}
+            className="fixed sm:absolute top-3 right-3 z-10 w-8 h-8 rounded-full bg-black/20 sm:bg-gray-100 flex items-center justify-center">
+            <X className="w-5 h-5 text-white sm:text-gray-600" />
+          </button>
+
+          {/* Hero */}
+          <div className="bg-gradient-to-br from-green-500 via-emerald-500 to-teal-600 text-white px-4 sm:px-6 py-4 text-center">
+            <div className="inline-flex items-center gap-1.5 bg-white/20 backdrop-blur-sm rounded-full px-3 py-1 text-[11px] font-bold mb-2">
+              <Sparkles className="w-3 h-3" /> SPECIAL OFFER — JUST FOR YOU
+            </div>
+            <h2 className="text-lg sm:text-xl font-bold mb-0.5">
+              Wait! Your Guide is Downloading...
+            </h2>
+            <p className="text-white/90 text-sm font-medium">
+              Ready to actually go? Here&apos;s how the vacation works:
+            </p>
+          </div>
+
+          {/* 100% Money Back */}
+          <div className="mx-4 sm:mx-5 -mt-3 relative z-10">
+            <div className="flex items-center gap-2.5 bg-green-50 border border-green-300 rounded-xl p-3 shadow-md">
+              <ShieldCheck className="w-8 h-8 text-green-600 shrink-0" />
+              <div>
+                <p className="font-black text-green-800 text-sm">100% MONEY-BACK GUARANTEE</p>
+                <p className="text-[11px] text-green-600">30 days. No questions. Full refund.</p>
+              </div>
+            </div>
+          </div>
+
+          <div className="px-4 sm:px-5 pt-4 pb-6">
+            {/* Pricing */}
+            <div className="grid grid-cols-2 gap-2 mb-4">
+              <button type="button" onClick={() => setPaymentType('monthly')}
+                className={`relative rounded-xl border-2 py-3 px-2 text-center transition-all ${
+                  paymentType === 'monthly' ? 'border-orange-500 bg-orange-50' : 'border-gray-200'
+                }`}>
+                {paymentType === 'monthly' && (
+                  <span className="absolute -top-2.5 left-1/2 -translate-x-1/2 bg-red-500 text-white text-[9px] font-black px-2 py-0.5 rounded-full">POPULAR</span>
+                )}
+                <p className="text-xs text-gray-400 line-through">$59/mo</p>
+                <p className="text-2xl font-black" style={{ color: paymentType === 'monthly' ? '#E8651A' : '#374151' }}>
+                  ${PAYMENT_CONFIG.monthlyPrice}<span className="text-xs font-normal">/mo</span>
+                </p>
+                <p className="text-[10px] text-gray-500">× {PAYMENT_CONFIG.totalMonths} months</p>
+              </button>
+              <button type="button" onClick={() => setPaymentType('one-time')}
+                className={`relative rounded-xl border-2 py-3 px-2 text-center transition-all ${
+                  paymentType === 'one-time' ? 'border-green-500 bg-green-50' : 'border-gray-200'
+                }`}>
+                {paymentType === 'one-time' && (
+                  <span className="absolute -top-2.5 left-1/2 -translate-x-1/2 bg-green-500 text-white text-[9px] font-black px-2 py-0.5 rounded-full">BEST VALUE</span>
+                )}
+                <p className="text-xs text-gray-400 line-through">$599</p>
+                <p className="text-2xl font-black" style={{ color: paymentType === 'one-time' ? '#16a34a' : '#374151' }}>
+                  ${PAYMENT_CONFIG.oneTimePrice}
+                </p>
+                <p className="text-[10px] text-green-600 font-bold">Save ${PAYMENT_CONFIG.totalPrice - PAYMENT_CONFIG.oneTimePrice}!</p>
+              </button>
+            </div>
+
+            {/* Book immediately */}
+            <div className="flex items-center gap-2 bg-blue-50 border border-blue-200 rounded-lg p-2.5 mb-4">
+              <Plane className="w-5 h-5 text-blue-500 shrink-0" />
+              <p className="text-xs font-bold text-blue-800">Book your vacation RIGHT AFTER first payment!</p>
+            </div>
+
+            {/* Includes */}
+            <div className="grid grid-cols-3 gap-1.5 mb-4 text-[11px] text-gray-600">
+              {['5 Days / 4 Nights', 'All-Inclusive', 'Unlimited Food', '4 Destinations', 'Flexible Dates', 'Book Immediately'].map(item => (
+                <span key={item} className="flex items-center gap-1">
+                  <CheckCircle className="w-3 h-3 text-green-500 shrink-0" />{item}
+                </span>
+              ))}
+            </div>
+
+            {/* Form */}
+            <form onSubmit={handlePayment} className="space-y-3">
+              <div className="text-xs bg-gray-50 rounded-lg px-3 py-2 text-gray-500">
+                Booking: <strong className="text-gray-800">{email}</strong>
+              </div>
+
+              <div className="grid grid-cols-2 gap-2">
+                <div>
+                  <Label className="text-xs text-gray-600">First Name</Label>
+                  <Input type="text" placeholder="First" value={firstName} onChange={(e) => setFirstName(e.target.value)}
+                    className="h-10 text-sm bg-white text-gray-900 border-gray-300" required />
+                </div>
+                <div>
+                  <Label className="text-xs text-gray-600">Last Name</Label>
+                  <Input type="text" placeholder="Last" value={lastName} onChange={(e) => setLastName(e.target.value)}
+                    className="h-10 text-sm bg-white text-gray-900 border-gray-300" required />
+                </div>
+              </div>
+
+              <div>
+                <Label className="text-xs text-gray-600">Phone</Label>
+                <Input type="tel" placeholder="(555) 123-4567" value={phone} onChange={(e) => setPhone(e.target.value)}
+                  className="h-10 text-sm bg-white text-gray-900 border-gray-300" />
+              </div>
+
+              <div className="border-t pt-3">
+                <p className="text-xs font-bold text-gray-700 mb-2 flex items-center gap-1.5">
+                  <CreditCard className="w-3.5 h-3.5" /> Card Details
+                </p>
+                <div className="space-y-2">
+                  <Input type="text" inputMode="numeric" placeholder="Card number" value={cardNumber}
+                    onChange={(e) => setCardNumber(formatCardNumber(e.target.value))}
+                    className="h-10 text-sm font-mono bg-white text-gray-900 border-gray-300 placeholder:text-gray-400"
+                    maxLength={19} required />
+                  <div className="grid grid-cols-2 gap-2">
+                    <Input type="text" inputMode="numeric" placeholder="MM/YY" value={cardExp}
+                      onChange={(e) => setCardExp(formatExp(e.target.value))}
+                      className="h-10 text-sm font-mono bg-white text-gray-900 border-gray-300 placeholder:text-gray-400"
+                      maxLength={5} required />
+                    <Input type="text" inputMode="numeric" placeholder="CVV" value={cardCvv}
+                      onChange={(e) => setCardCvv(e.target.value.replace(/\D/g, '').slice(0, 4))}
+                      className="h-10 text-sm font-mono bg-white text-gray-900 border-gray-300 placeholder:text-gray-400"
+                      maxLength={4} required />
+                  </div>
+                </div>
+              </div>
+
+              {/* Charge summary */}
+              <div className="rounded-lg bg-orange-50 border border-orange-200 p-3">
+                <div className="flex items-center justify-between">
+                  <span className="text-xs text-gray-600">Today&apos;s charge:</span>
+                  <div>
+                    <span className="text-xs text-gray-400 line-through mr-1.5">{paymentType === 'monthly' ? '$59' : '$599'}</span>
+                    <span className="text-xl font-black text-green-600">${amount}</span>
+                  </div>
+                </div>
+                {paymentType === 'monthly' && (
+                  <p className="text-[10px] text-gray-500 mt-1">Then ${PAYMENT_CONFIG.monthlyPrice}/mo × {PAYMENT_CONFIG.totalMonths - 1} more. Cancel anytime.</p>
+                )}
+                <div className="flex items-center gap-1.5 mt-1.5 text-[10px] text-green-700 font-medium">
+                  <Undo2 className="w-3 h-3" /> 100% refund within 30 days
+                </div>
+              </div>
+
+              {/* Error message */}
+              {paymentError && (
+                <div className="rounded-lg bg-red-50 border border-red-300 p-3 flex items-start gap-2">
+                  <X className="w-5 h-5 text-red-500 shrink-0 mt-0.5" />
+                  <div>
+                    <p className="text-sm font-bold text-red-700">Payment Failed</p>
+                    <p className="text-xs text-red-600">{paymentError}</p>
+                    <p className="text-[10px] text-red-400 mt-1">Please check your card details and try again.</p>
+                  </div>
+                </div>
+              )}
+
+              <Button type="submit" disabled={isPaymentLoading}
+                className="w-full h-12 text-base font-black text-white rounded-xl shadow-lg"
+                style={{ backgroundColor: '#E8651A' }}>
+                {isPaymentLoading ? (
+                  <><Loader2 className="w-5 h-5 mr-2 animate-spin" /> Processing...</>
+                ) : (
+                  <><Lock className="w-4 h-4 mr-2" /> PAY ${amount} — START MY VACATION <ArrowRight className="w-4 h-4 ml-1" /></>
+                )}
+              </Button>
+
+              <div className="flex items-center justify-center gap-4 text-[10px] text-gray-400">
+                <span className="flex items-center gap-1"><Lock className="w-3 h-3" /> SSL</span>
+                <span className="flex items-center gap-1"><ShieldCheck className="w-3 h-3" /> 30-Day Guarantee</span>
+                <span className="flex items-center gap-1"><Star className="w-3 h-3" /> 4.8★</span>
+              </div>
+
+              <p className="text-[8px] text-center text-gray-400 leading-tight">
+                {paymentType === 'monthly'
+                  ? `By clicking Pay, you authorize $${PAYMENT_CONFIG.monthlyPrice} today and ${PAYMENT_CONFIG.totalMonths - 1} monthly charges of $${PAYMENT_CONFIG.monthlyPrice}. Cancel anytime. 100% refund within 30 days.`
+                  : `By clicking Pay, you authorize $${PAYMENT_CONFIG.oneTimePrice}. 100% refund within 30 days.`}
+              </p>
+
+              <button type="button" onClick={() => setShowPaymentModal(false)}
+                className="w-full text-center text-xs text-gray-400 underline py-1">
+                No thanks, just the free guide
+              </button>
+            </form>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/src/components/lp/shared/FAQAccordion.tsx b/src/components/lp/shared/FAQAccordion.tsx
new file mode 100644
index 0000000..e92fe26
--- /dev/null
+++ b/src/components/lp/shared/FAQAccordion.tsx
@@ -0,0 +1,38 @@
+'use client'
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@/components/ui/accordion'
+import { FAQ_ITEMS } from '@/app/lp/_config/types'
+
+interface FAQAccordionProps {
+  items?: { question: string; answer: string }[]
+  className?: string
+  variant?: 'default' | 'dark'
+}
+
+export default function FAQAccordion({
+  items = FAQ_ITEMS,
+  className = '',
+  variant = 'default',
+}: FAQAccordionProps) {
+  const isDark = variant === 'dark'
+
+  return (
+    <Accordion type="single" collapsible className={className}>
+      {items.map((item, i) => (
+        <AccordionItem key={i} value={`faq-${i}`} className={isDark ? 'border-gray-700' : ''}>
+          <AccordionTrigger className={`text-left ${isDark ? 'text-white hover:text-gray-300' : ''}`}>
+            {item.question}
+          </AccordionTrigger>
+          <AccordionContent className={isDark ? 'text-gray-400' : 'text-gray-600'}>
+            {item.answer}
+          </AccordionContent>
+        </AccordionItem>
+      ))}
+    </Accordion>
+  )
+}
diff --git a/src/components/lp/shared/FloatingPhoneButton.tsx b/src/components/lp/shared/FloatingPhoneButton.tsx
new file mode 100644
index 0000000..59c3d6a
--- /dev/null
+++ b/src/components/lp/shared/FloatingPhoneButton.tsx
@@ -0,0 +1,19 @@
+'use client'
+
+import { Phone } from 'lucide-react'
+
+const PHONE_NUMBER = '+18886022424'
+const PHONE_DISPLAY = '(888) 602-2424'
+
+export default function FloatingPhoneButton() {
+  return (
+    <a
+      href={`tel:${PHONE_NUMBER}`}
+      className="fixed bottom-20 left-4 z-40 md:bottom-6 md:left-6 md:z-50 flex items-center gap-2 bg-green-600 hover:bg-green-700 active:bg-green-800 text-white p-3.5 md:px-5 md:py-3 rounded-full shadow-lg hover:shadow-xl transition-all hover:scale-105 active:scale-95 group"
+      aria-label={`Call us at ${PHONE_DISPLAY}`}
+    >
+      <Phone className="w-5 h-5 md:group-hover:animate-pulse" />
+      <span className="hidden md:inline font-semibold text-sm">{PHONE_DISPLAY}</span>
+    </a>
+  )
+}
diff --git a/src/components/lp/shared/InfluencerBuzz.tsx b/src/components/lp/shared/InfluencerBuzz.tsx
new file mode 100644
index 0000000..6080fcb
--- /dev/null
+++ b/src/components/lp/shared/InfluencerBuzz.tsx
@@ -0,0 +1,168 @@
+'use client'
+
+import { Heart, MessageCircle, Share2, Play, Eye } from 'lucide-react'
+
+const INFLUENCERS = [
+  {
+    handle: '@travel.to.mexico8',
+    followers: '45.2K',
+    avatar: '/images/cdn/photo-1494790108377-be9c29b29330.jpg',
+    caption: 'OMG this Mexico deal is INSANE 🤯 $29/mo for all-inclusive?! I booked immediately...',
+    likes: '12.8K',
+    comments: '1.4K',
+    views: '340K',
+    image: '/images/cdn/photo-1507525428034-b723cf961d3e.jpg',
+  },
+  {
+    handle: '@chris724santos',
+    followers: '89.1K',
+    avatar: '/images/cdn/photo-1500648767791-00dcc994a43e.jpg',
+    caption: 'We booked the $29/mo Mexico vacation everyone on TikTok is talking about. NO REGRETS 🌴',
+    likes: '24.3K',
+    comments: '3.1K',
+    views: '892K',
+    image: '/images/cdn/photo-1552074284-5e88ef1aef18.jpg',
+  },
+  {
+    handle: '@vacay.deals',
+    followers: '1.2M',
+    avatar: '/images/cdn/photo-1438761681033-6461ffad8d80.jpg',
+    caption: 'STOP SCROLLING. All-inclusive Mexico for $29/mo. This is NOT a drill 🚨🏖️',
+    likes: '67.5K',
+    comments: '5.8K',
+    views: '2.4M',
+    image: '/images/cdn/photo-1580846629083-02669741360a.jpg',
+  },
+  {
+    handle: '@budget.luxe',
+    followers: '312K',
+    avatar: '/images/cdn/photo-1544005313-94ddf0286df2.jpg',
+    caption: 'Just got back from Cancun. $29/mo for THIS?? The math is mathing 💅✨',
+    likes: '31.2K',
+    comments: '2.7K',
+    views: '1.1M',
+    image: '/images/cdn/photo-1519046904884-53103b34b206.jpg',
+  },
+  {
+    handle: '@couples.getaway',
+    followers: '567K',
+    avatar: '/images/cdn/photo-1506794778202-cad84cf45f1d.jpg',
+    caption: 'My wife found this deal and I did NOT believe her. Cabo for $29/mo?! It was REAL 🤩',
+    likes: '45.9K',
+    comments: '4.2K',
+    views: '1.8M',
+    image: '/images/cdn/photo-1571896349842-33c89424de2d.jpg',
+  },
+  {
+    handle: '@travelwithsam',
+    followers: '203K',
+    avatar: '/images/cdn/photo-1522529599102-193c0d76b5b6.jpg',
+    caption: 'Puerto Vallarta sunset from our all-inclusive resort. $29/mo. I still can\'t believe it 🌅',
+    likes: '18.7K',
+    comments: '1.9K',
+    views: '678K',
+    image: '/images/cdn/photo-1585793753011-397e6e4668d6.jpg',
+  },
+]
+
+interface InfluencerBuzzProps {
+  className?: string
+  variant?: 'light' | 'dark'
+  count?: number
+  title?: string
+}
+
+export default function InfluencerBuzz({
+  className = '',
+  variant = 'light',
+  count = 3,
+  title = 'Everyone\'s Talking About Us',
+}: InfluencerBuzzProps) {
+  const isDark = variant === 'dark'
+  // Pick influencers — rotate based on component render
+  const displayed = INFLUENCERS.slice(0, count)
+
+  return (
+    <section className={`py-12 px-4 ${className}`}>
+      <div className="max-w-5xl mx-auto">
+        {/* Header */}
+        <div className="text-center mb-8">
+          <div className="inline-flex items-center gap-2 bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 text-white px-4 py-1.5 rounded-full text-sm font-bold mb-3">
+            <svg viewBox="0 0 24 24" className="w-4 h-4 fill-current"><path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-2.88 2.5 2.89 2.89 0 0 1-2.88-2.88 2.89 2.89 0 0 1 2.88-2.88c.28 0 .55.04.81.11v-3.51a6.31 6.31 0 0 0-.81-.05A6.34 6.34 0 0 0 3.15 15.2 6.34 6.34 0 0 0 9.49 21.54a6.34 6.34 0 0 0 6.34-6.34V8.73a8.28 8.28 0 0 0 4.82 1.56V6.84a4.85 4.85 0 0 1-1.06-.15z"/></svg>
+            GOING VIRAL
+          </div>
+          <h2 className={`text-2xl sm:text-3xl font-bold ${isDark ? 'text-white' : 'text-gray-900'}`}>
+            {title}
+          </h2>
+          <p className={`mt-2 text-sm ${isDark ? 'text-gray-400' : 'text-gray-500'}`}>
+            Real people. Real vacations. Real reactions.
+          </p>
+        </div>
+
+        {/* Stats bar */}
+        <div className={`flex items-center justify-center gap-6 sm:gap-10 mb-8 py-3 px-4 rounded-xl ${isDark ? 'bg-white/5' : 'bg-gray-50'}`}>
+          <div className="text-center">
+            <p className={`text-xl sm:text-2xl font-bold ${isDark ? 'text-white' : 'text-gray-900'}`}>7.3M+</p>
+            <p className={`text-xs ${isDark ? 'text-gray-400' : 'text-gray-500'}`}>Views</p>
+          </div>
+          <div className={`w-px h-8 ${isDark ? 'bg-white/10' : 'bg-gray-200'}`} />
+          <div className="text-center">
+            <p className={`text-xl sm:text-2xl font-bold ${isDark ? 'text-white' : 'text-gray-900'}`}>242</p>
+            <p className={`text-xs ${isDark ? 'text-gray-400' : 'text-gray-500'}`}>Videos</p>
+          </div>
+          <div className={`w-px h-8 ${isDark ? 'bg-white/10' : 'bg-gray-200'}`} />
+          <div className="text-center">
+            <p className={`text-xl sm:text-2xl font-bold ${isDark ? 'text-white' : 'text-gray-900'}`}>2,847+</p>
+            <p className={`text-xs ${isDark ? 'text-gray-400' : 'text-gray-500'}`}>Certificates Claimed</p>
+          </div>
+        </div>
+
+        {/* Influencer cards */}
+        <div className={`grid gap-4 ${count >= 3 ? 'sm:grid-cols-3' : count === 2 ? 'sm:grid-cols-2' : ''}`}>
+          {displayed.map((inf, i) => (
+            <div
+              key={i}
+              className={`rounded-2xl overflow-hidden ${isDark ? 'bg-white/5 border border-white/10' : 'bg-white border shadow-md'} hover:shadow-lg transition-shadow`}
+            >
+              {/* Creator header */}
+              <div className="flex items-center gap-2.5 p-3">
+                <img src={inf.avatar} alt={inf.handle} className="w-9 h-9 rounded-full object-cover border-2 border-pink-500" />
+                <div className="flex-1 min-w-0">
+                  <p className={`text-sm font-bold truncate ${isDark ? 'text-white' : 'text-gray-900'}`}>{inf.handle}</p>
+                  <p className={`text-[11px] ${isDark ? 'text-gray-400' : 'text-gray-500'}`}>{inf.followers} followers</p>
+                </div>
+                <svg viewBox="0 0 24 24" className={`w-4 h-4 ${isDark ? 'text-white/30' : 'text-gray-300'}`} fill="currentColor"><path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-2.88 2.5 2.89 2.89 0 0 1-2.88-2.88 2.89 2.89 0 0 1 2.88-2.88c.28 0 .55.04.81.11v-3.51a6.31 6.31 0 0 0-.81-.05A6.34 6.34 0 0 0 3.15 15.2 6.34 6.34 0 0 0 9.49 21.54a6.34 6.34 0 0 0 6.34-6.34V8.73a8.28 8.28 0 0 0 4.82 1.56V6.84a4.85 4.85 0 0 1-1.06-.15z"/></svg>
+              </div>
+
+              {/* Video thumbnail */}
+              <div className="relative aspect-[4/5]">
+                <img src={inf.image} alt="Vacation" className="w-full h-full object-cover" />
+                <div className="absolute inset-0 bg-black/20 flex items-center justify-center">
+                  <div className="w-12 h-12 rounded-full bg-white/25 backdrop-blur-sm flex items-center justify-center">
+                    <Play className="w-5 h-5 text-white ml-0.5" fill="white" />
+                  </div>
+                </div>
+                {/* View count */}
+                <div className="absolute bottom-2 left-2 flex items-center gap-1 bg-black/60 backdrop-blur-sm rounded-full px-2 py-0.5">
+                  <Eye className="w-3 h-3 text-white" />
+                  <span className="text-[11px] text-white font-medium">{inf.views}</span>
+                </div>
+                {/* Caption overlay */}
+                <div className="absolute bottom-0 left-0 right-0 p-3 bg-gradient-to-t from-black/80 via-black/40 to-transparent">
+                  <p className="text-white text-xs leading-relaxed line-clamp-2">{inf.caption}</p>
+                </div>
+              </div>
+
+              {/* Engagement */}
+              <div className={`flex items-center justify-between px-3 py-2.5 text-xs ${isDark ? 'text-gray-400' : 'text-gray-500'}`}>
+                <span className="flex items-center gap-1"><Heart className="w-3.5 h-3.5 text-pink-500" fill="#EC4899" />{inf.likes}</span>
+                <span className="flex items-center gap-1"><MessageCircle className="w-3.5 h-3.5" />{inf.comments}</span>
+                <span className="flex items-center gap-1"><Share2 className="w-3.5 h-3.5" />Share</span>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}
diff --git a/src/components/lp/shared/PayNowForm.tsx b/src/components/lp/shared/PayNowForm.tsx
new file mode 100644
index 0000000..31e13a5
--- /dev/null
+++ b/src/components/lp/shared/PayNowForm.tsx
@@ -0,0 +1,471 @@
+'use client'
+
+import { useState, useEffect, useRef } from 'react'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import {
+  Loader2, Lock, Shield, CreditCard, CheckCircle, ShieldCheck,
+  Star, Clock, Undo2, Plane, Sparkles, ArrowRight, X, Check,
+} from 'lucide-react'
+import { toast } from 'sonner'
+import { PAYMENT_CONFIG } from '@/app/lp/_config/types'
+import CountdownTimer from './CountdownTimer'
+import { useTrackingParams } from '@/hooks/useTrackingParams'
+import { useEarlyLead } from '@/hooks/useEarlyLead'
+
+interface PayNowFormProps {
+  variant?: 'default' | 'minimal' | 'dark' | 'inline'
+  accentColor?: string
+  buttonText?: string
+  showToggle?: boolean
+  className?: string
+  sourceLp?: string
+  onSuccess?: () => void
+}
+
+export default function PayNowForm({
+  variant = 'default',
+  accentColor = '#E8651A',
+  buttonText = 'Get My Vacation Certificate!',
+  showToggle = true,
+  className = '',
+  sourceLp,
+  onSuccess,
+}: PayNowFormProps) {
+  const tracking = useTrackingParams(sourceLp)
+  const [email, setEmail] = useState('')
+  const [phone, setPhone] = useState('')
+  const [firstName, setFirstName] = useState('')
+  const [lastName, setLastName] = useState('')
+  const [cardNumber, setCardNumber] = useState('')
+  const [cardExp, setCardExp] = useState('')
+  const [cardCvv, setCardCvv] = useState('')
+  const [isLoading, setIsLoading] = useState(false)
+  const [isSuccess, setIsSuccess] = useState(false)
+  const [paymentType, setPaymentType] = useState<'monthly' | 'one-time'>('monthly')
+  const [showPaymentModal, setShowPaymentModal] = useState(false)
+  const [paymentError, setPaymentError] = useState<string | null>(null)
+  const modalRef = useRef<HTMLDivElement>(null)
+
+  const amount = paymentType === 'monthly' ? PAYMENT_CONFIG.monthlyPrice : PAYMENT_CONFIG.oneTimePrice
+
+  const { captured: earlyCaptured, capture: captureNow } = useEarlyLead({
+    email, phone, name: `${firstName} ${lastName}`.trim() || undefined,
+    source_lp: sourceLp,
+    referral_code: tracking.ref,
+    utm_source: tracking.utm_source,
+    utm_medium: tracking.utm_medium,
+    utm_campaign: tracking.utm_campaign,
+  })
+
+  // Lock body scroll when modal open
+  useEffect(() => {
+    if (showPaymentModal) {
+      document.body.style.overflow = 'hidden'
+    } else {
+      document.body.style.overflow = ''
+    }
+    return () => { document.body.style.overflow = '' }
+  }, [showPaymentModal])
+
+  const formatCardNumber = (value: string) => {
+    const digits = value.replace(/\D/g, '').slice(0, 16)
+    return digits.replace(/(\d{4})(?=\d)/g, '$1 ')
+  }
+
+  const formatExp = (value: string) => {
+    const digits = value.replace(/\D/g, '').slice(0, 4)
+    if (digits.length >= 3) return `${digits.slice(0, 2)}/${digits.slice(2)}`
+    return digits
+  }
+
+  const handleLeadCapture = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!email || !phone) {
+      toast.error('Please enter your email and phone number')
+      return
+    }
+    setIsLoading(true)
+    try {
+      // Fire claim — saves to DB, sends PDF email. Don't block payment modal
+      // on email send failures (rare).
+      const res = await fetch('/api/claim', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          email, phone,
+          source_lp: sourceLp,
+          referral_code: tracking.ref,
+          utm_source: tracking.utm_source,
+          utm_medium: tracking.utm_medium,
+          utm_campaign: tracking.utm_campaign,
+        }),
+      })
+      const data = await res.json().catch(() => ({}))
+      if (data?.emailSent) {
+        toast.success('Free guide is on its way to your inbox!')
+      }
+    } catch (err) {
+      console.error('claim error:', err)
+    } finally {
+      setIsLoading(false)
+      setShowPaymentModal(true)
+    }
+  }
+
+  const handlePayment = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!firstName || !lastName || !cardNumber || !cardExp || !cardCvv) {
+      toast.error('Please fill in all fields')
+      return
+    }
+
+    setIsLoading(true)
+    setPaymentError(null)
+    try {
+      const signupRes = await fetch('/api/signup', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          email,
+          full_name: `${firstName} ${lastName}`,
+          phone,
+          amount: paymentType === 'monthly' ? PAYMENT_CONFIG.totalPrice : PAYMENT_CONFIG.oneTimePrice,
+          monthly_payment: PAYMENT_CONFIG.monthlyPrice,
+          payment_plan_months: paymentType === 'monthly' ? PAYMENT_CONFIG.totalMonths : 1,
+          source_lp: tracking.source_lp,
+          referral_code: tracking.ref,
+          utm_source: tracking.utm_source,
+          utm_medium: tracking.utm_medium,
+          utm_campaign: tracking.utm_campaign,
+        }),
+      })
+      const signupData = await signupRes.json()
+      if (!signupRes.ok) throw new Error(signupData.error || 'Failed to create signup')
+
+      const paymentRes = await fetch('/api/payment/create', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          firstName, lastName, email, phone,
+          cardNumber: cardNumber.replace(/\s/g, ''),
+          cardExp: cardExp.replace('/', ''),
+          cardCvv,
+          paymentType,
+          signupId: signupData.id,
+        }),
+      })
+      const paymentData = await paymentRes.json()
+      if (!paymentRes.ok) {
+        const errMsg = paymentData.error || 'Payment declined. Please check your card details and try again.'
+        setPaymentError(errMsg)
+        return
+      }
+
+      setIsSuccess(true)
+      setShowPaymentModal(false)
+      onSuccess?.()
+      // Redirect to payment success page
+      window.location.href = '/dashboard/login'
+    } catch (error) {
+      const errMsg = error instanceof Error ? error.message : 'Something went wrong. Please try again.'
+      setPaymentError(errMsg)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  if (isSuccess) {
+    return (
+      <div className={`text-center py-8 ${className}`}>
+        <CheckCircle className="w-16 h-16 mx-auto mb-4 text-green-500" />
+        <h3 className="text-2xl font-bold mb-2">Welcome to Paradise!</h3>
+        <p className="text-sm text-gray-500">
+          Check your email for your vacation certificate. You can book your travel dates immediately!
+          {paymentType === 'monthly' && ` Next payment of $${PAYMENT_CONFIG.monthlyPrice} in 30 days.`}
+        </p>
+      </div>
+    )
+  }
+
+  return (
+    <>
+      {/* Step 1: Email + Phone inline capture — always light bg inputs */}
+      <div className={className}>
+        <form onSubmit={handleLeadCapture} className="space-y-3">
+          <div className="space-y-2">
+            <Label htmlFor="pay-email" className="text-sm font-medium" style={{ color: variant === 'dark' ? '#e5e7eb' : '#374151' }}>
+              Email Address
+            </Label>
+            <div className="relative">
+              <Input
+                id="pay-email"
+                type="email"
+                placeholder="you@example.com"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                onBlur={captureNow}
+                className={`h-12 text-base bg-white text-gray-900 border-gray-300 placeholder:text-gray-400 ${earlyCaptured ? 'pr-9' : ''}`}
+                required
+              />
+              {earlyCaptured && (
+                <Check className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-green-600" aria-label="Email saved" />
+              )}
+            </div>
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="pay-phone" className="text-sm font-medium" style={{ color: variant === 'dark' ? '#e5e7eb' : '#374151' }}>
+              Phone Number
+            </Label>
+            <Input
+              id="pay-phone"
+              type="tel"
+              placeholder="(555) 123-4567"
+              value={phone}
+              onChange={(e) => setPhone(e.target.value)}
+              onBlur={captureNow}
+              className="h-12 text-base bg-white text-gray-900 border-gray-300 placeholder:text-gray-400"
+              required
+            />
+          </div>
+          <Button type="submit" disabled={isLoading} className="w-full h-12 text-base font-semibold text-white" style={{ backgroundColor: accentColor }}>
+            {isLoading ? (
+              <><Loader2 className="w-4 h-4 mr-2 animate-spin" /> Sending your guide...</>
+            ) : (
+              buttonText
+            )}
+          </Button>
+          <div className="flex items-center justify-center gap-4 text-xs" style={{ color: variant === 'dark' ? '#9ca3af' : '#9ca3af' }}>
+            <span className="flex items-center gap-1"><Lock className="w-3 h-3" /> Secure</span>
+            <span className="flex items-center gap-1"><Shield className="w-3 h-3" /> 100% Money-Back</span>
+          </div>
+        </form>
+      </div>
+
+      {/* Step 2: Full-screen payment modal — custom implementation for mobile */}
+      {showPaymentModal && (
+        <div className="fixed inset-0 z-[100]">
+          {/* Backdrop */}
+          <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={() => setShowPaymentModal(false)} />
+
+          {/* Modal — full screen on mobile, centered card on desktop */}
+          <div
+            ref={modalRef}
+            className="absolute inset-0 sm:inset-auto sm:top-1/2 sm:left-1/2 sm:-translate-x-1/2 sm:-translate-y-1/2 sm:max-w-lg sm:w-[95%] sm:max-h-[90vh] sm:rounded-2xl bg-white overflow-y-auto"
+          >
+            {/* Close button */}
+            <button
+              onClick={() => setShowPaymentModal(false)}
+              className="fixed sm:absolute top-3 right-3 z-10 w-8 h-8 rounded-full bg-black/20 sm:bg-gray-100 flex items-center justify-center hover:bg-black/30 sm:hover:bg-gray-200"
+            >
+              <X className="w-5 h-5 text-white sm:text-gray-600" />
+            </button>
+
+            {/* Hero header — compact on mobile */}
+            <div className="bg-gradient-to-br from-orange-500 via-red-500 to-pink-600 text-white px-4 sm:px-6 py-4 text-center">
+              <div className="inline-flex items-center gap-1.5 bg-white/20 backdrop-blur-sm rounded-full px-3 py-1 text-[11px] font-bold mb-2">
+                <Sparkles className="w-3 h-3" /> EXCLUSIVE OFFER
+              </div>
+              <h2 className="text-lg sm:text-xl font-bold mb-0.5">
+                All-Inclusive Mexico Vacation
+              </h2>
+              <p className="text-white/80 text-xs">5 Days &bull; 4 Nights &bull; All Meals &amp; Drinks</p>
+              <div className="mt-2 flex items-center justify-center gap-1.5">
+                <Clock className="w-3.5 h-3.5 text-yellow-300" />
+                <span className="text-xs">Expires in </span>
+                <CountdownTimer minutes={30} variant="minimal" accentColor="#FFC107" />
+              </div>
+            </div>
+
+            {/* 100% Money Back — compact */}
+            <div className="mx-4 sm:mx-5 -mt-3 relative z-10">
+              <div className="flex items-center gap-2.5 bg-green-50 border border-green-300 rounded-xl p-3 shadow-md">
+                <ShieldCheck className="w-8 h-8 text-green-600 shrink-0" />
+                <div>
+                  <p className="font-black text-green-800 text-sm">100% MONEY-BACK GUARANTEE</p>
+                  <p className="text-[11px] text-green-600">30 days. No questions. Full refund.</p>
+                </div>
+              </div>
+            </div>
+
+            <div className="px-4 sm:px-5 pt-4 pb-6">
+
+              {/* Pricing toggle — compact */}
+              {showToggle && (
+                <div className="grid grid-cols-2 gap-2 mb-4">
+                  <button
+                    type="button"
+                    onClick={() => setPaymentType('monthly')}
+                    className={`relative rounded-xl border-2 py-3 px-2 text-center transition-all ${
+                      paymentType === 'monthly' ? 'border-orange-500 bg-orange-50' : 'border-gray-200'
+                    }`}
+                  >
+                    {paymentType === 'monthly' && (
+                      <span className="absolute -top-2.5 left-1/2 -translate-x-1/2 bg-red-500 text-white text-[9px] font-black px-2 py-0.5 rounded-full">POPULAR</span>
+                    )}
+                    <p className="text-xs text-gray-400 line-through">$59/mo</p>
+                    <p className="text-2xl font-black" style={{ color: paymentType === 'monthly' ? '#E8651A' : '#374151' }}>
+                      ${PAYMENT_CONFIG.monthlyPrice}<span className="text-xs font-normal">/mo</span>
+                    </p>
+                    <p className="text-[10px] text-gray-500">× {PAYMENT_CONFIG.totalMonths} months</p>
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => setPaymentType('one-time')}
+                    className={`relative rounded-xl border-2 py-3 px-2 text-center transition-all ${
+                      paymentType === 'one-time' ? 'border-green-500 bg-green-50' : 'border-gray-200'
+                    }`}
+                  >
+                    {paymentType === 'one-time' && (
+                      <span className="absolute -top-2.5 left-1/2 -translate-x-1/2 bg-green-500 text-white text-[9px] font-black px-2 py-0.5 rounded-full">BEST VALUE</span>
+                    )}
+                    <p className="text-xs text-gray-400 line-through">$599</p>
+                    <p className="text-2xl font-black" style={{ color: paymentType === 'one-time' ? '#16a34a' : '#374151' }}>
+                      ${PAYMENT_CONFIG.oneTimePrice}
+                    </p>
+                    <p className="text-[10px] text-green-600 font-bold">Save ${PAYMENT_CONFIG.totalPrice - PAYMENT_CONFIG.oneTimePrice}!</p>
+                  </button>
+                </div>
+              )}
+
+              {/* Book immediately callout */}
+              <div className="flex items-center gap-2 bg-blue-50 border border-blue-200 rounded-lg p-2.5 mb-4">
+                <Plane className="w-5 h-5 text-blue-500 shrink-0" />
+                <p className="text-xs font-bold text-blue-800">Book your vacation RIGHT AFTER first payment!</p>
+              </div>
+
+              {/* What's included — compact horizontal */}
+              <div className="grid grid-cols-3 gap-1.5 mb-4 text-[11px] text-gray-600">
+                {['5 Days / 4 Nights', 'All-Inclusive', 'Unlimited Food', '4 Destinations', 'Flexible Dates', 'Book Immediately'].map(item => (
+                  <span key={item} className="flex items-center gap-1">
+                    <CheckCircle className="w-3 h-3 text-green-500 shrink-0" />{item}
+                  </span>
+                ))}
+              </div>
+
+              {/* Payment form */}
+              <form onSubmit={handlePayment} className="space-y-3">
+                {/* Booking info */}
+                <div className="text-xs bg-gray-50 rounded-lg px-3 py-2 text-gray-500">
+                  Booking: <strong className="text-gray-800">{email}</strong>
+                </div>
+
+                {/* Name fields */}
+                <div className="grid grid-cols-2 gap-2">
+                  <div>
+                    <Label className="text-xs text-gray-600">First Name</Label>
+                    <Input type="text" placeholder="First" value={firstName} onChange={(e) => setFirstName(e.target.value)}
+                      className="h-10 text-sm bg-white text-gray-900 border-gray-300" required />
+                  </div>
+                  <div>
+                    <Label className="text-xs text-gray-600">Last Name</Label>
+                    <Input type="text" placeholder="Last" value={lastName} onChange={(e) => setLastName(e.target.value)}
+                      className="h-10 text-sm bg-white text-gray-900 border-gray-300" required />
+                  </div>
+                </div>
+
+                {/* Card fields — standard HTML inputs, no Collect.js iframe issues */}
+                <div className="border-t pt-3">
+                  <p className="text-xs font-bold text-gray-700 mb-2 flex items-center gap-1.5">
+                    <CreditCard className="w-3.5 h-3.5" /> Card Details
+                  </p>
+                  <div className="space-y-2">
+                    <Input
+                      type="text"
+                      inputMode="numeric"
+                      placeholder="Card number"
+                      value={cardNumber}
+                      onChange={(e) => setCardNumber(formatCardNumber(e.target.value))}
+                      className="h-10 text-sm font-mono bg-white text-gray-900 border-gray-300 placeholder:text-gray-400"
+                      maxLength={19}
+                      required
+                    />
+                    <div className="grid grid-cols-2 gap-2">
+                      <Input
+                        type="text"
+                        inputMode="numeric"
+                        placeholder="MM/YY"
+                        value={cardExp}
+                        onChange={(e) => setCardExp(formatExp(e.target.value))}
+                        className="h-10 text-sm font-mono bg-white text-gray-900 border-gray-300 placeholder:text-gray-400"
+                        maxLength={5}
+                        required
+                      />
+                      <Input
+                        type="text"
+                        inputMode="numeric"
+                        placeholder="CVV"
+                        value={cardCvv}
+                        onChange={(e) => setCardCvv(e.target.value.replace(/\D/g, '').slice(0, 4))}
+                        className="h-10 text-sm font-mono bg-white text-gray-900 border-gray-300 placeholder:text-gray-400"
+                        maxLength={4}
+                        required
+                      />
+                    </div>
+                  </div>
+                </div>
+
+                {/* Charge summary — compact */}
+                <div className="rounded-lg bg-orange-50 border border-orange-200 p-3">
+                  <div className="flex items-center justify-between">
+                    <span className="text-xs text-gray-600">Today&apos;s charge:</span>
+                    <div>
+                      <span className="text-xs text-gray-400 line-through mr-1.5">{paymentType === 'monthly' ? '$59' : '$599'}</span>
+                      <span className="text-xl font-black text-green-600">${amount}</span>
+                    </div>
+                  </div>
+                  {paymentType === 'monthly' && (
+                    <p className="text-[10px] text-gray-500 mt-1">Then ${PAYMENT_CONFIG.monthlyPrice}/mo × {PAYMENT_CONFIG.totalMonths - 1} more. Cancel anytime.</p>
+                  )}
+                  <div className="flex items-center gap-1.5 mt-1.5 text-[10px] text-green-700 font-medium">
+                    <Undo2 className="w-3 h-3" /> 100% refund within 30 days
+                  </div>
+                </div>
+
+                {/* Error message */}
+                {paymentError && (
+                  <div className="rounded-lg bg-red-50 border border-red-300 p-3 flex items-start gap-2">
+                    <X className="w-5 h-5 text-red-500 shrink-0 mt-0.5" />
+                    <div>
+                      <p className="text-sm font-bold text-red-700">Payment Failed</p>
+                      <p className="text-xs text-red-600">{paymentError}</p>
+                      <p className="text-[10px] text-red-400 mt-1">Please check your card details and try again.</p>
+                    </div>
+                  </div>
+                )}
+
+                {/* Pay button */}
+                <Button
+                  type="submit"
+                  disabled={isLoading}
+                  className="w-full h-12 text-base font-black text-white rounded-xl shadow-lg"
+                  style={{ backgroundColor: '#E8651A' }}
+                >
+                  {isLoading ? (
+                    <><Loader2 className="w-5 h-5 mr-2 animate-spin" /> Processing...</>
+                  ) : (
+                    <><Lock className="w-4 h-4 mr-2" /> PAY ${amount} — START MY VACATION <ArrowRight className="w-4 h-4 ml-1" /></>
+                  )}
+                </Button>
+
+                {/* Trust strip */}
+                <div className="flex items-center justify-center gap-4 text-[10px] text-gray-400">
+                  <span className="flex items-center gap-1"><Lock className="w-3 h-3" /> SSL</span>
+                  <span className="flex items-center gap-1"><ShieldCheck className="w-3 h-3" /> 30-Day Guarantee</span>
+                  <span className="flex items-center gap-1"><Star className="w-3 h-3" /> 4.8★</span>
+                </div>
+
+                <p className="text-[8px] text-center text-gray-400 leading-tight">
+                  {paymentType === 'monthly'
+                    ? `By clicking Pay, you authorize $${PAYMENT_CONFIG.monthlyPrice} today and ${PAYMENT_CONFIG.totalMonths - 1} monthly charges of $${PAYMENT_CONFIG.monthlyPrice}. Cancel anytime. 100% refund within 30 days.`
+                    : `By clicking Pay, you authorize $${PAYMENT_CONFIG.oneTimePrice}. 100% refund within 30 days.`}
+                </p>
+              </form>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  )
+}
diff --git a/src/components/lp/shared/PricingDisplay.tsx b/src/components/lp/shared/PricingDisplay.tsx
new file mode 100644
index 0000000..80bce77
--- /dev/null
+++ b/src/components/lp/shared/PricingDisplay.tsx
@@ -0,0 +1,79 @@
+'use client'
+
+import { useState } from 'react'
+import { PAYMENT_CONFIG } from '@/app/lp/_config/types'
+
+interface PricingDisplayProps {
+  variant?: 'default' | 'large' | 'compact' | 'dark'
+  accentColor?: string
+  className?: string
+  showComparison?: boolean
+}
+
+export default function PricingDisplay({
+  variant = 'default',
+  accentColor = '#E8651A',
+  className = '',
+  showComparison = true,
+}: PricingDisplayProps) {
+  const [selected, setSelected] = useState<'monthly' | 'one-time'>('monthly')
+  const isDark = variant === 'dark'
+
+  return (
+    <div className={className}>
+      <div className="flex rounded-xl overflow-hidden mb-4 border">
+        <button
+          type="button"
+          onClick={() => setSelected('monthly')}
+          className={`flex-1 py-3 text-center transition-colors font-semibold ${
+            selected === 'monthly' ? 'text-white' : isDark ? 'text-gray-300 bg-gray-800' : 'text-gray-600 bg-gray-50'
+          }`}
+          style={selected === 'monthly' ? { backgroundColor: accentColor } : undefined}
+        >
+          Monthly Plan
+        </button>
+        <button
+          type="button"
+          onClick={() => setSelected('one-time')}
+          className={`flex-1 py-3 text-center transition-colors font-semibold ${
+            selected === 'one-time' ? 'text-white' : isDark ? 'text-gray-300 bg-gray-800' : 'text-gray-600 bg-gray-50'
+          }`}
+          style={selected === 'one-time' ? { backgroundColor: accentColor } : undefined}
+        >
+          One-Time
+        </button>
+      </div>
+
+      <div className="text-center">
+        {selected === 'monthly' ? (
+          <>
+            <div className={`text-5xl font-bold ${variant === 'large' ? 'text-6xl' : ''}`} style={{ color: accentColor }}>
+              ${PAYMENT_CONFIG.monthlyPrice}<span className="text-lg font-normal opacity-70">/mo</span>
+            </div>
+            <p className={`text-sm mt-1 ${isDark ? 'text-gray-400' : 'text-gray-500'}`}>
+              for {PAYMENT_CONFIG.totalMonths} months (${PAYMENT_CONFIG.totalPrice} total)
+            </p>
+          </>
+        ) : (
+          <>
+            <div className={`text-5xl font-bold ${variant === 'large' ? 'text-6xl' : ''}`} style={{ color: accentColor }}>
+              ${PAYMENT_CONFIG.oneTimePrice}
+            </div>
+            <p className={`text-sm mt-1 ${isDark ? 'text-gray-400' : 'text-gray-500'}`}>
+              one-time payment — save ${PAYMENT_CONFIG.totalPrice - PAYMENT_CONFIG.oneTimePrice} vs. monthly!
+            </p>
+          </>
+        )}
+      </div>
+
+      {showComparison && (
+        <div className={`mt-4 text-center text-sm ${isDark ? 'text-gray-400' : 'text-gray-500'}`}>
+          <span className="line-through">Regular price: $1,500+</span>
+          <span className="ml-2 px-2 py-0.5 rounded-full text-xs font-semibold bg-green-100 text-green-700">
+            Save over $1,100!
+          </span>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/src/components/lp/shared/SocialProofTicker.tsx b/src/components/lp/shared/SocialProofTicker.tsx
new file mode 100644
index 0000000..163c08f
--- /dev/null
+++ b/src/components/lp/shared/SocialProofTicker.tsx
@@ -0,0 +1,68 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
+
+const NAMES = [
+  'Maria from TX', 'James from FL', 'Sarah from CA', 'David from NY',
+  'Jennifer from IL', 'Robert from AZ', 'Lisa from CO', 'Michael from GA',
+  'Rachel from PA', 'Chris from WA', 'Amanda from NC', 'Daniel from OH',
+  'Emily from VA', 'Brian from NJ', 'Nicole from TN', 'Kevin from MN',
+]
+
+const ACTIONS = [
+  'just claimed their certificate',
+  'just signed up',
+  'booked Cancun',
+  'booked Cabo',
+  'chose Riviera Maya',
+  'is heading to Puerto Vallarta',
+]
+
+interface SocialProofTickerProps {
+  className?: string
+  bgColor?: string
+  textColor?: string
+  interval?: number
+}
+
+export default function SocialProofTicker({
+  className = '',
+  bgColor = '#000000',
+  textColor = '#FFFFFF',
+  interval = 5000,
+}: SocialProofTickerProps) {
+  const [current, setCurrent] = useState(0)
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setCurrent(prev => (prev + 1) % NAMES.length)
+    }, interval)
+    return () => clearInterval(timer)
+  }, [interval])
+
+  const name = NAMES[current % NAMES.length]
+  const action = ACTIONS[current % ACTIONS.length]
+
+  return (
+    <div
+      className={`fixed bottom-20 right-4 z-30 max-w-xs rounded-lg shadow-lg px-4 py-3 hidden md:block ${className}`}
+      style={{ backgroundColor: bgColor, color: textColor }}
+    >
+      <AnimatePresence mode="wait">
+        <motion.div
+          key={current}
+          initial={{ opacity: 0, y: 10 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: -10 }}
+          className="flex items-center gap-2"
+        >
+          <span className="w-2 h-2 rounded-full bg-green-400 shrink-0" />
+          <p className="text-sm">
+            <strong>{name}</strong> {action}
+          </p>
+        </motion.div>
+      </AnimatePresence>
+    </div>
+  )
+}
diff --git a/src/components/lp/shared/StickyMobileCTA.tsx b/src/components/lp/shared/StickyMobileCTA.tsx
new file mode 100644
index 0000000..49cfbbe
--- /dev/null
+++ b/src/components/lp/shared/StickyMobileCTA.tsx
@@ -0,0 +1,74 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { Phone } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { PAYMENT_CONFIG } from '@/app/lp/_config/types'
+import CountdownTimer from './CountdownTimer'
+
+interface StickyMobileCTAProps {
+  accentColor?: string
+  buttonText?: string
+  targetId?: string
+  className?: string
+}
+
+export default function StickyMobileCTA({
+  accentColor = '#E8651A',
+  buttonText = 'Lock In This Price',
+  targetId = 'signup-form',
+  className = '',
+}: StickyMobileCTAProps) {
+  const [visible, setVisible] = useState(false)
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setVisible(window.scrollY > 400)
+    }
+    window.addEventListener('scroll', handleScroll, { passive: true })
+    return () => window.removeEventListener('scroll', handleScroll)
+  }, [])
+
+  const scrollToForm = () => {
+    document.getElementById(targetId)?.scrollIntoView({ behavior: 'smooth' })
+  }
+
+  return (
+    <div
+      className={`fixed bottom-0 left-0 right-0 z-50 md:hidden transition-transform duration-300 ${
+        visible ? 'translate-y-0' : 'translate-y-full'
+      } ${className}`}
+    >
+      <div className="bg-white/95 backdrop-blur-md border-t shadow-2xl">
+        {/* Urgency micro-bar */}
+        <div className="bg-red-600 text-white text-center py-1 px-2">
+          <p className="text-[11px] font-bold tracking-wide flex items-center justify-center gap-1.5">
+            <span className="w-1.5 h-1.5 bg-yellow-400 rounded-full animate-pulse" />
+            OFFER EXPIRES IN <CountdownTimer minutes={30} variant="minimal" accentColor="#FFC107" />
+            <span className="w-1.5 h-1.5 bg-yellow-400 rounded-full animate-pulse" />
+          </p>
+        </div>
+        <div className="px-4 py-3 flex items-center gap-3">
+          <a
+            href="tel:+18886022424"
+            className="flex items-center justify-center w-11 h-11 rounded-full bg-green-600 text-white shrink-0"
+            aria-label="Call (888) 602-2424"
+          >
+            <Phone className="w-5 h-5" />
+          </a>
+          <div className="flex-1 min-w-0">
+            <p className="text-xs text-gray-500 line-through">$59/mo regular</p>
+            <p className="text-lg font-bold">${PAYMENT_CONFIG.monthlyPrice}/mo</p>
+          </div>
+          <Button
+            onClick={scrollToForm}
+            className="h-11 px-6 text-white font-bold shrink-0 animate-pulse"
+            style={{ backgroundColor: accentColor }}
+          >
+            {buttonText}
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/lp/shared/TestimonialCard.tsx b/src/components/lp/shared/TestimonialCard.tsx
new file mode 100644
index 0000000..8e7398e
--- /dev/null
+++ b/src/components/lp/shared/TestimonialCard.tsx
@@ -0,0 +1,53 @@
+'use client'
+
+import { Star } from 'lucide-react'
+
+interface TestimonialCardProps {
+  quote: string
+  name: string
+  location: string
+  photo?: string
+  variant?: 'default' | 'dark' | 'minimal'
+  className?: string
+}
+
+export default function TestimonialCard({
+  quote,
+  name,
+  location,
+  photo,
+  variant = 'default',
+  className = '',
+}: TestimonialCardProps) {
+  const isDark = variant === 'dark'
+
+  return (
+    <div
+      className={`rounded-xl p-6 ${
+        isDark ? 'bg-white/10 text-white' : variant === 'minimal' ? '' : 'bg-gray-50 border'
+      } ${className}`}
+    >
+      <div className="flex gap-1 mb-3">
+        {Array.from({ length: 5 }).map((_, i) => (
+          <Star key={i} className="w-4 h-4 fill-yellow-400 text-yellow-400" />
+        ))}
+      </div>
+      <p className={`text-sm leading-relaxed mb-4 ${isDark ? 'text-gray-200' : 'text-gray-600'}`}>
+        &ldquo;{quote}&rdquo;
+      </p>
+      <div className="flex items-center gap-3">
+        {photo && (
+          <img
+            src={photo}
+            alt={name}
+            className="w-10 h-10 rounded-full object-cover"
+          />
+        )}
+        <div>
+          <p className={`text-sm font-semibold ${isDark ? 'text-white' : 'text-gray-900'}`}>{name}</p>
+          <p className={`text-xs ${isDark ? 'text-gray-400' : 'text-gray-500'}`}>{location}</p>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/lp/shared/TikTokCarousel.tsx b/src/components/lp/shared/TikTokCarousel.tsx
new file mode 100644
index 0000000..63897b9
--- /dev/null
+++ b/src/components/lp/shared/TikTokCarousel.tsx
@@ -0,0 +1,171 @@
+'use client'
+
+import { useEffect, useMemo, useState } from 'react'
+import useEmblaCarousel from 'embla-carousel-react'
+import { ChevronLeft, ChevronRight, Play } from 'lucide-react'
+import videosRaw from '@/data/tiktok-videos.json'
+
+interface VideoMeta {
+  id: string
+  username: string
+  title: string
+}
+
+const ALL_VIDEOS: VideoMeta[] = videosRaw as VideoMeta[]
+const DEFAULT_USERNAME = 'travel.to.mexico8'
+
+function shuffle<T>(arr: T[]): T[] {
+  const a = [...arr]
+  for (let i = a.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1))
+    ;[a[i], a[j]] = [a[j], a[i]]
+  }
+  return a
+}
+
+interface TikTokCarouselProps {
+  username?: string
+  className?: string
+  title?: string
+  subtitle?: string
+  count?: number
+}
+
+function TikTokTile({ video }: { video: VideoMeta }) {
+  const href = `https://www.tiktok.com/@${video.username}/video/${video.id}`
+  return (
+    <a
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="group relative block w-[325px] h-[578px] rounded-xl overflow-hidden bg-gray-900 shadow-lg hover:shadow-2xl transition-shadow flex-shrink-0"
+    >
+      <img
+        src={`/tiktok/${video.id}.jpg`}
+        alt={video.title || `TikTok video by @${video.username}`}
+        loading="lazy"
+        className="absolute inset-0 w-full h-full object-cover group-hover:scale-[1.02] transition-transform duration-300"
+      />
+      {/* Dim overlay on hover */}
+      <div className="absolute inset-0 bg-black/10 group-hover:bg-black/30 transition-colors" />
+
+      {/* TikTok corner badge */}
+      <div className="absolute top-3 right-3 flex items-center gap-1.5 bg-black/70 backdrop-blur-sm text-white px-2 py-1 rounded-full text-[10px] font-semibold">
+        <svg viewBox="0 0 24 24" className="w-3 h-3 fill-current">
+          <path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-2.88 2.5 2.89 2.89 0 0 1-2.88-2.88 2.89 2.89 0 0 1 2.88-2.88c.28 0 .55.04.81.11v-3.51a6.31 6.31 0 0 0-.81-.05A6.34 6.34 0 0 0 3.15 15.2 6.34 6.34 0 0 0 9.49 21.54a6.34 6.34 0 0 0 6.34-6.34V8.73a8.28 8.28 0 0 0 4.82 1.56V6.84a4.85 4.85 0 0 1-1.06-.15z"/>
+        </svg>
+        TikTok
+      </div>
+
+      {/* Center play button */}
+      <div className="absolute inset-0 flex items-center justify-center">
+        <div className="w-16 h-16 rounded-full bg-white/90 group-hover:bg-white flex items-center justify-center shadow-xl transition-transform group-hover:scale-110">
+          <Play className="w-7 h-7 text-black ml-1" fill="black" />
+        </div>
+      </div>
+
+      {/* Bottom gradient + caption */}
+      <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/90 via-black/60 to-transparent p-4 pt-12">
+        <p className="text-white text-xs font-semibold truncate mb-1">@{video.username}</p>
+        {video.title && (
+          <p className="text-white/90 text-[11px] line-clamp-2 leading-tight">{video.title}</p>
+        )}
+      </div>
+    </a>
+  )
+}
+
+export default function TikTokCarousel({
+  username = DEFAULT_USERNAME,
+  className = '',
+  title = 'See Real Vacationers in Paradise',
+  subtitle = 'Watch what our travelers are experiencing right now',
+  count = 10,
+}: TikTokCarouselProps) {
+  const videos = useMemo(() => shuffle(ALL_VIDEOS).slice(0, count), [count])
+
+  const [emblaRef, emblaApi] = useEmblaCarousel({
+    loop: false,
+    align: 'start',
+    slidesToScroll: 1,
+    containScroll: 'trimSnaps',
+  })
+  const [canScrollPrev, setCanScrollPrev] = useState(false)
+  const [canScrollNext, setCanScrollNext] = useState(true)
+
+  useEffect(() => {
+    if (!emblaApi) return
+    const onSelect = () => {
+      setCanScrollPrev(emblaApi.canScrollPrev())
+      setCanScrollNext(emblaApi.canScrollNext())
+    }
+    emblaApi.on('select', onSelect)
+    emblaApi.on('reInit', onSelect)
+    onSelect()
+    return () => { emblaApi.off('select', onSelect); emblaApi.off('reInit', onSelect) }
+  }, [emblaApi])
+
+  if (videos.length === 0) return null
+
+  return (
+    <section className={`py-16 ${className}`}>
+      <div className="max-w-7xl mx-auto px-4">
+        <div className="text-center mb-10">
+          <div className="inline-flex items-center gap-2 bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 text-white px-4 py-1.5 rounded-full text-sm font-bold mb-4">
+            <svg viewBox="0 0 24 24" className="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg">
+              <path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-2.88 2.5 2.89 2.89 0 0 1-2.88-2.88 2.89 2.89 0 0 1 2.88-2.88c.28 0 .55.04.81.11v-3.51a6.31 6.31 0 0 0-.81-.05A6.34 6.34 0 0 0 3.15 15.2 6.34 6.34 0 0 0 9.49 21.54a6.34 6.34 0 0 0 6.34-6.34V8.73a8.28 8.28 0 0 0 4.82 1.56V6.84a4.85 4.85 0 0 1-1.06-.15z"/>
+            </svg>
+            {ALL_VIDEOS.length} Real Videos
+          </div>
+          <h2 className="text-3xl sm:text-4xl font-bold mb-2">{title}</h2>
+          <p className="text-gray-500 text-lg">{subtitle}</p>
+        </div>
+
+        <div className="relative">
+          <div className="overflow-hidden" ref={emblaRef}>
+            <div className="flex gap-4">
+              {videos.map((v) => (
+                <div key={v.id} className="flex-[0_0_auto]">
+                  <TikTokTile video={v} />
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {canScrollPrev && (
+            <button
+              onClick={() => emblaApi?.scrollPrev()}
+              aria-label="Previous"
+              className="absolute left-0 top-1/2 -translate-y-1/2 -translate-x-4 w-12 h-12 rounded-full bg-white shadow-lg flex items-center justify-center hover:bg-gray-50 z-10"
+            >
+              <ChevronLeft className="w-6 h-6" />
+            </button>
+          )}
+          {canScrollNext && (
+            <button
+              onClick={() => emblaApi?.scrollNext()}
+              aria-label="Next"
+              className="absolute right-0 top-1/2 -translate-y-1/2 translate-x-4 w-12 h-12 rounded-full bg-white shadow-lg flex items-center justify-center hover:bg-gray-50 z-10"
+            >
+              <ChevronRight className="w-6 h-6" />
+            </button>
+          )}
+        </div>
+
+        <div className="text-center mt-8">
+          <a
+            href={`https://www.tiktok.com/@${username}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-2 bg-black text-white px-6 py-3 rounded-full font-semibold hover:bg-gray-800 transition-colors"
+          >
+            <svg viewBox="0 0 24 24" className="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg">
+              <path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-2.88 2.5 2.89 2.89 0 0 1-2.88-2.88 2.89 2.89 0 0 1 2.88-2.88c.28 0 .55.04.81.11v-3.51a6.31 6.31 0 0 0-.81-.05A6.34 6.34 0 0 0 3.15 15.2 6.34 6.34 0 0 0 9.49 21.54a6.34 6.34 0 0 0 6.34-6.34V8.73a8.28 8.28 0 0 0 4.82 1.56V6.84a4.85 4.85 0 0 1-1.06-.15z"/>
+            </svg>
+            Follow us on TikTok
+          </a>
+        </div>
+      </div>
+    </section>
+  )
+}
diff --git a/src/components/lp/shared/TopPhoneBar.tsx b/src/components/lp/shared/TopPhoneBar.tsx
new file mode 100644
index 0000000..f3378f9
--- /dev/null
+++ b/src/components/lp/shared/TopPhoneBar.tsx
@@ -0,0 +1,20 @@
+'use client'
+
+import { Phone } from 'lucide-react'
+
+export default function TopPhoneBar() {
+  return (
+    <div className="bg-gradient-to-r from-blue-700 to-blue-800 text-white py-2 px-4 text-center z-[60] relative">
+      <a
+        href="tel:+18886022424"
+        className="inline-flex items-center gap-2 hover:opacity-90 transition-opacity"
+      >
+        <Phone className="w-4 h-4 animate-pulse" />
+        <span className="text-sm font-bold">
+          Call to Book: <span className="text-lg tracking-wide">(888) 602-2424</span>
+        </span>
+        <span className="hidden sm:inline text-xs text-blue-200 ml-1">Toll-Free</span>
+      </a>
+    </div>
+  )
+}
diff --git a/src/components/lp/shared/TrustBadges.tsx b/src/components/lp/shared/TrustBadges.tsx
new file mode 100644
index 0000000..40b7eef
--- /dev/null
+++ b/src/components/lp/shared/TrustBadges.tsx
@@ -0,0 +1,60 @@
+'use client'
+
+import { Shield, Lock, Star, BadgeCheck, CreditCard } from 'lucide-react'
+
+interface TrustBadgesProps {
+  variant?: 'horizontal' | 'vertical' | 'compact'
+  className?: string
+  textColor?: string
+}
+
+export default function TrustBadges({
+  variant = 'horizontal',
+  className = '',
+  textColor = '#6B7280',
+}: TrustBadgesProps) {
+  const badges = [
+    { icon: Lock, label: '256-bit SSL' },
+    { icon: Shield, label: '30-Day Guarantee' },
+    { icon: Star, label: '4.8/5 Rating' },
+    { icon: BadgeCheck, label: 'Verified Business' },
+    { icon: CreditCard, label: 'Secure Payments' },
+  ]
+
+  if (variant === 'compact') {
+    return (
+      <div className={`flex items-center justify-center gap-4 flex-wrap ${className}`}>
+        {badges.slice(0, 3).map((b) => (
+          <span key={b.label} className="flex items-center gap-1 text-xs" style={{ color: textColor }}>
+            <b.icon className="w-3.5 h-3.5" />
+            {b.label}
+          </span>
+        ))}
+      </div>
+    )
+  }
+
+  if (variant === 'vertical') {
+    return (
+      <div className={`flex flex-col gap-3 ${className}`}>
+        {badges.map((b) => (
+          <div key={b.label} className="flex items-center gap-2 text-sm" style={{ color: textColor }}>
+            <b.icon className="w-4 h-4" />
+            {b.label}
+          </div>
+        ))}
+      </div>
+    )
+  }
+
+  return (
+    <div className={`flex items-center justify-center gap-6 flex-wrap ${className}`}>
+      {badges.map((b) => (
+        <div key={b.label} className="flex items-center gap-2 text-sm" style={{ color: textColor }}>
+          <b.icon className="w-4 h-4" />
+          {b.label}
+        </div>
+      ))}
+    </div>
+  )
+}
diff --git a/src/components/lp/shared/UrgencyBanner.tsx b/src/components/lp/shared/UrgencyBanner.tsx
new file mode 100644
index 0000000..6c3e63e
--- /dev/null
+++ b/src/components/lp/shared/UrgencyBanner.tsx
@@ -0,0 +1,97 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { X, AlertTriangle, Clock, Users } from 'lucide-react'
+import CountdownTimer from './CountdownTimer'
+
+interface UrgencyBannerProps {
+  variant?: 'countdown' | 'scarcity' | 'social' | 'combined'
+  className?: string
+  dismissible?: boolean
+}
+
+// Psychological triggers:
+// 1. Loss aversion — "Don't miss out" > "Get this deal"
+// 2. Social proof — others are buying right now
+// 3. Scarcity — limited quantity
+// 4. Time pressure — countdown creates urgency
+// 5. Anchoring — show the "real" price first
+
+const SCARCITY_MESSAGES = [
+  '🔥 Only 7 certificates left at this price',
+  '⚡ 14 people are viewing this offer right now',
+  '🎯 23 certificates claimed in the last hour',
+  '⏰ Price increases to $59/mo after this promotion ends',
+]
+
+export default function UrgencyBanner({
+  variant = 'combined',
+  className = '',
+  dismissible = true,
+}: UrgencyBannerProps) {
+  const [dismissed, setDismissed] = useState(false)
+  const [messageIdx, setMessageIdx] = useState(0)
+  const [viewerCount] = useState(() => Math.floor(Math.random() * 12) + 8)
+
+  useEffect(() => {
+    if (variant === 'social' || variant === 'combined') {
+      const timer = setInterval(() => {
+        setMessageIdx(prev => (prev + 1) % SCARCITY_MESSAGES.length)
+      }, 4000)
+      return () => clearInterval(timer)
+    }
+  }, [variant])
+
+  if (dismissed) return null
+
+  return (
+    <div className={`fixed top-0 left-0 right-0 z-50 ${className}`}>
+      {/* Main urgency bar */}
+      <div className="bg-gradient-to-r from-red-700 via-red-600 to-red-700 text-white py-2.5 px-4 relative">
+        <div className="max-w-5xl mx-auto flex items-center justify-center gap-3 text-sm font-medium">
+          {variant === 'countdown' || variant === 'combined' ? (
+            <>
+              <AlertTriangle className="w-4 h-4 shrink-0 animate-pulse text-yellow-300" />
+              <span className="hidden sm:inline">⚠️ PROMOTIONAL PRICING EXPIRES IN</span>
+              <span className="sm:hidden">EXPIRES IN</span>
+              <CountdownTimer minutes={30} variant="minimal" accentColor="#FFC107" />
+              <span className="hidden md:inline">— Lock in $29/mo before it&apos;s gone</span>
+            </>
+          ) : variant === 'scarcity' ? (
+            <>
+              <AlertTriangle className="w-4 h-4 shrink-0 text-yellow-300" />
+              <span>{SCARCITY_MESSAGES[messageIdx]}</span>
+            </>
+          ) : (
+            <>
+              <Users className="w-4 h-4 shrink-0" />
+              <span>{viewerCount} people viewing</span>
+              <span className="mx-1">•</span>
+              <Clock className="w-4 h-4 shrink-0" />
+              <CountdownTimer minutes={30} variant="minimal" accentColor="#FFC107" />
+              <span className="hidden sm:inline ml-1">left at this price</span>
+            </>
+          )}
+        </div>
+
+        {dismissible && (
+          <button
+            onClick={() => setDismissed(true)}
+            className="absolute right-2 top-1/2 -translate-y-1/2 p-1 hover:bg-white/20 rounded"
+          >
+            <X className="w-4 h-4" />
+          </button>
+        )}
+      </div>
+
+      {/* Secondary social proof ticker (combined only) */}
+      {variant === 'combined' && (
+        <div className="bg-yellow-50 border-b border-yellow-200 py-1.5 px-4 text-center">
+          <p className="text-xs font-medium text-yellow-800 animate-pulse">
+            {SCARCITY_MESSAGES[messageIdx]}
+          </p>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/src/data/tiktok-videos.json b/src/data/tiktok-videos.json
new file mode 100644
index 0000000..7603b0e
--- /dev/null
+++ b/src/data/tiktok-videos.json
@@ -0,0 +1,1212 @@
+[
+  {
+    "id": "7618023828597312788",
+    "username": "travel.to.mexico8",
+    "title": "🌴 MEXICO FAMILY VACATION FOR ONLY $299! 🇲🇽 5 Days & 4 Nights • ALL-INCLUSIVE ✨ ✔️ 2 Adults + 2 Kids (12 & under) ✔️ No blackout dates — t"
+  },
+  {
+    "id": "7618023673798151444",
+    "username": "travel.to.mexico8",
+    "title": "🌴 MEXICO FAMILY VACATION FOR ONLY $299! 🇲🇽 5 Days & 4 Nights • ALL-INCLUSIVE ✨ ✔️ 2 Adults + 2 Kids (12 & under) ✔️ No blackout dates — t"
+  },
+  {
+    "id": "7618023580994948372",
+    "username": "travel.to.mexico8",
+    "title": "🌴 MEXICO FAMILY VACATION FOR ONLY $299! 🇲🇽 5 Days & 4 Nights • ALL-INCLUSIVE ✨ ✔️ 2 Adults + 2 Kids (12 & under) ✔️ No blackout dates — t"
+  },
+  {
+    "id": "7618023404637130005",
+    "username": "travel.to.mexico8",
+    "title": "🌴 MEXICO FAMILY VACATION FOR ONLY $299! 🇲🇽 5 Days & 4 Nights • ALL-INCLUSIVE ✨ ✔️ 2 Adults + 2 Kids (12 & under) ✔️ No blackout dates — t"
+  },
+  {
+    "id": "7618023226857311508",
+    "username": "travel.to.mexico8",
+    "title": "🌴 MEXICO FAMILY VACATION FOR ONLY $299! 🇲🇽 5 Days & 4 Nights • ALL-INCLUSIVE ✨ ✔️ 2 Adults + 2 Kids (12 & under) ✔️ No blackout dates — t"
+  },
+  {
+    "id": "7616902964158008596",
+    "username": "travel.to.mexico8",
+    "title": "Picture this… Your kids laughing in the pool 🌊 You relaxing with a drink in hand 🍹 No stress. No planning headaches. Just paradise. 🏖️ 5 "
+  },
+  {
+    "id": "7616902684678917397",
+    "username": "travel.to.mexico8",
+    "title": "Picture this… Your kids laughing in the pool 🌊 You relaxing with a drink in hand 🍹 No stress. No planning headaches. Just paradise. 🏖️ 5 "
+  },
+  {
+    "id": "7616902503128501524",
+    "username": "travel.to.mexico8",
+    "title": "Picture this… Your kids laughing in the pool 🌊 You relaxing with a drink in hand 🍹 No stress. No planning headaches. Just paradise. 🏖️ 5 "
+  },
+  {
+    "id": "7616902289504193812",
+    "username": "travel.to.mexico8",
+    "title": "Picture this… Your kids laughing in the pool 🌊 You relaxing with a drink in hand 🍹 No stress. No planning headaches. Just paradise. 🏖️ 5 "
+  },
+  {
+    "id": "7616902084092480789",
+    "username": "travel.to.mexico8",
+    "title": "Picture this… Your kids laughing in the pool 🌊 You relaxing with a drink in hand 🍹 No stress. No planning headaches. Just paradise. 🏖️ 5 "
+  },
+  {
+    "id": "7616536467678055701",
+    "username": "travel.to.mexico8",
+    "title": "Picture this… Your kids laughing in the pool 🌊 You relaxing with a drink in hand 🍹 No stress. No planning headaches. Just paradise. 🏖️ 5 "
+  },
+  {
+    "id": "7616536245102972180",
+    "username": "travel.to.mexico8",
+    "title": "Picture this… Your kids laughing in the pool 🌊 You relaxing with a drink in hand 🍹 No stress. No planning headaches. Just paradise. 🏖️ 5 "
+  },
+  {
+    "id": "7616536083496455445",
+    "username": "travel.to.mexico8",
+    "title": "Picture this… Your kids laughing in the pool 🌊 You relaxing with a drink in hand 🍹 No stress. No planning headaches. Just paradise. 🏖️ 5 "
+  },
+  {
+    "id": "7616535801245093141",
+    "username": "travel.to.mexico8",
+    "title": "Picture this… Your kids laughing in the pool 🌊 You relaxing with a drink in hand 🍹 No stress. No planning headaches. Just paradise. 🏖️ 5 "
+  },
+  {
+    "id": "7616535620449619220",
+    "username": "travel.to.mexico8",
+    "title": "Picture this… Your kids laughing in the pool 🌊 You relaxing with a drink in hand 🍹 No stress. No planning headaches. Just paradise. 🏖️ 5 "
+  },
+  {
+    "id": "7616165126718115093",
+    "username": "travel.to.mexico8",
+    "title": "🌴 MEXICO FAMILY VACATION FOR ONLY $299! 🇲🇽 5 Days & 4 Nights • ALL-INCLUSIVE ✨ ✔️ 2 Adults + 2 Kids (12 & under) ✔️ No blackout dates — t"
+  },
+  {
+    "id": "7616164954739182869",
+    "username": "travel.to.mexico8",
+    "title": "🌴 MEXICO FAMILY VACATION FOR ONLY $299! 🇲🇽 5 Days & 4 Nights • ALL-INCLUSIVE ✨ ✔️ 2 Adults + 2 Kids (12 & under) ✔️ No blackout dates — t"
+  },
+  {
+    "id": "7616164791706717461",
+    "username": "travel.to.mexico8",
+    "title": "🌴 MEXICO FAMILY VACATION FOR ONLY $299! 🇲🇽 5 Days & 4 Nights • ALL-INCLUSIVE ✨ ✔️ 2 Adults + 2 Kids (12 & under) ✔️ No blackout dates — t"
+  },
+  {
+    "id": "7616164636920007957",
+    "username": "travel.to.mexico8",
+    "title": "🌴 MEXICO FAMILY VACATION FOR ONLY $299! 🇲🇽 5 Days & 4 Nights • ALL-INCLUSIVE ✨ ✔️ 2 Adults + 2 Kids (12 & under) ✔️ No blackout dates — t"
+  },
+  {
+    "id": "7616164443701103893",
+    "username": "travel.to.mexico8",
+    "title": "🌴 MEXICO FAMILY VACATION FOR ONLY $299! 🇲🇽 5 Days & 4 Nights • ALL-INCLUSIVE ✨ ✔️ 2 Adults + 2 Kids (12 & under) ✔️ No blackout dates — t"
+  },
+  {
+    "id": "7615793139785288980",
+    "username": "travel.to.mexico8",
+    "title": "🌴 MEXICO FAMILY VACATION FOR ONLY $299! 🇲🇽 5 Days & 4 Nights • ALL-INCLUSIVE ✨ ✔️ 2 Adults + 2 Kids (12 & under) ✔️ No blackout dates — t"
+  },
+  {
+    "id": "7615792939800808725",
+    "username": "travel.to.mexico8",
+    "title": "🌴 MEXICO FAMILY VACATION FOR ONLY $299! 🇲🇽 5 Days & 4 Nights • ALL-INCLUSIVE ✨ ✔️ 2 Adults + 2 Kids (12 & under) ✔️ No blackout dates — t"
+  },
+  {
+    "id": "7615792741502487828",
+    "username": "travel.to.mexico8",
+    "title": "🌴 MEXICO FAMILY VACATION FOR ONLY $299! 🇲🇽 5 Days & 4 Nights • ALL-INCLUSIVE ✨ ✔️ 2 Adults + 2 Kids (12 & under) ✔️ No blackout dates — t"
+  },
+  {
+    "id": "7615792557251071253",
+    "username": "travel.to.mexico8",
+    "title": "🌴 MEXICO FAMILY VACATION FOR ONLY $299! 🇲🇽 5 Days & 4 Nights • ALL-INCLUSIVE ✨ ✔️ 2 Adults + 2 Kids (12 & under) ✔️ No blackout dates — t"
+  },
+  {
+    "id": "7615792335791787285",
+    "username": "travel.to.mexico8",
+    "title": "🌴 MEXICO FAMILY VACATION FOR ONLY $299! 🇲🇽 5 Days & 4 Nights • ALL-INCLUSIVE ✨ ✔️ 2 Adults + 2 Kids (12 & under) ✔️ No blackout dates — t"
+  },
+  {
+    "id": "7615418268869741845",
+    "username": "travel.to.mexico8",
+    "title": "🌴 MEXICO FAMILY VACATION FOR ONLY $299! 🇲🇽 5 Days & 4 Nights • ALL-INCLUSIVE ✨ ✔️ 2 Adults + 2 Kids (12 & under) ✔️ No blackout dates — t"
+  },
+  {
+    "id": "7615418100892192020",
+    "username": "travel.to.mexico8",
+    "title": "🌴 MEXICO FAMILY VACATION FOR ONLY $299! 🇲🇽 5 Days & 4 Nights • ALL-INCLUSIVE ✨ ✔️ 2 Adults + 2 Kids (12 & under) ✔️ No blackout dates — t"
+  },
+  {
+    "id": "7615417898932243732",
+    "username": "travel.to.mexico8",
+    "title": "🌴 MEXICO FAMILY VACATION FOR ONLY $299! 🇲🇽 5 Days & 4 Nights • ALL-INCLUSIVE ✨ ✔️ 2 Adults + 2 Kids (12 & under) ✔️ No blackout dates — t"
+  },
+  {
+    "id": "7615417606446632213",
+    "username": "travel.to.mexico8",
+    "title": "🌴 MEXICO FAMILY VACATION FOR ONLY $299! 🇲🇽 5 Days & 4 Nights • ALL-INCLUSIVE ✨ ✔️ 2 Adults + 2 Kids (12 & under) ✔️ No blackout dates — t"
+  },
+  {
+    "id": "7615417396140068116",
+    "username": "travel.to.mexico8",
+    "title": "🌴 MEXICO FAMILY VACATION FOR ONLY $299! 🇲🇽 5 Days & 4 Nights • ALL-INCLUSIVE ✨ ✔️ 2 Adults + 2 Kids (12 & under) ✔️ No blackout dates — t"
+  },
+  {
+    "id": "7614307089007021332",
+    "username": "travel.to.mexico8",
+    "title": "🌴 MEXICO FAMILY VACATION FOR ONLY $299! 🇲🇽 5 Days & 4 Nights • ALL-INCLUSIVE ✨ ✔️ 2 Adults + 2 Kids (12 & under) ✔️ No blackout dates — t"
+  },
+  {
+    "id": "7614306978164264213",
+    "username": "travel.to.mexico8",
+    "title": "🌴 MEXICO FAMILY VACATION FOR ONLY $299! 🇲🇽 5 Days & 4 Nights • ALL-INCLUSIVE ✨ ✔️ 2 Adults + 2 Kids (12 & under) ✔️ No blackout dates — t"
+  },
+  {
+    "id": "7614306835511790868",
+    "username": "travel.to.mexico8",
+    "title": "🌴 MEXICO FAMILY VACATION FOR ONLY $299! 🇲🇽 5 Days & 4 Nights • ALL-INCLUSIVE ✨ ✔️ 2 Adults + 2 Kids (12 & under) ✔️ No blackout dates — t"
+  },
+  {
+    "id": "7614306744541383957",
+    "username": "travel.to.mexico8",
+    "title": "🌴 MEXICO FAMILY VACATION FOR ONLY $299! 🇲🇽 5 Days & 4 Nights • ALL-INCLUSIVE ✨ ✔️ 2 Adults + 2 Kids (12 & under) ✔️ No blackout dates — t"
+  },
+  {
+    "id": "7614306570301738260",
+    "username": "travel.to.mexico8",
+    "title": "🌴 MEXICO FAMILY VACATION FOR ONLY $299! 🇲🇽 5 Days & 4 Nights • ALL-INCLUSIVE ✨ ✔️ 2 Adults + 2 Kids (12 & under) ✔️ No blackout dates — t"
+  },
+  {
+    "id": "7613939774008593684",
+    "username": "travel.to.mexico8",
+    "title": "🌴 MEXICO FAMILY VACATION FOR ONLY $299! 🇲🇽 5 Days & 4 Nights • ALL-INCLUSIVE ✨ ✔️ 2 Adults + 2 Kids (12 & under) ✔️ No blackout dates — t"
+  },
+  {
+    "id": "7613939542713715989",
+    "username": "travel.to.mexico8",
+    "title": "🌴 MEXICO FAMILY VACATION FOR ONLY $299! 🇲🇽 5 Days & 4 Nights • ALL-INCLUSIVE ✨ ✔️ 2 Adults + 2 Kids (12 & under) ✔️ No blackout dates — t"
+  },
+  {
+    "id": "7613939329387220245",
+    "username": "travel.to.mexico8",
+    "title": "🌴 MEXICO FAMILY VACATION FOR ONLY $299! 🇲🇽 5 Days & 4 Nights • ALL-INCLUSIVE ✨ ✔️ 2 Adults + 2 Kids (12 & under) ✔️ No blackout dates — t"
+  },
+  {
+    "id": "7613939116627086613",
+    "username": "travel.to.mexico8",
+    "title": "🌴 MEXICO FAMILY VACATION FOR ONLY $299! 🇲🇽 5 Days & 4 Nights • ALL-INCLUSIVE ✨ ✔️ 2 Adults + 2 Kids (12 & under) ✔️ No blackout dates — t"
+  },
+  {
+    "id": "7613938879388798228",
+    "username": "travel.to.mexico8",
+    "title": "🌴 MEXICO FAMILY VACATION FOR ONLY $299! 🇲🇽 5 Days & 4 Nights • ALL-INCLUSIVE ✨ ✔️ 2 Adults + 2 Kids (12 & under) ✔️ No blackout dates — t"
+  },
+  {
+    "id": "7612825138291166485",
+    "username": "travel.to.mexico8",
+    "title": "Picture this… Your kids laughing in the pool 🌊 You relaxing with a drink in hand 🍹 No stress. No planning headaches. Just paradise. 🏖️ 5 "
+  },
+  {
+    "id": "7612825010587077908",
+    "username": "travel.to.mexico8",
+    "title": "Picture this… Your kids laughing in the pool 🌊 You relaxing with a drink in hand 🍹 No stress. No planning headaches. Just paradise. 🏖️ 5 "
+  },
+  {
+    "id": "7612824883743001877",
+    "username": "travel.to.mexico8",
+    "title": "Picture this… Your kids laughing in the pool 🌊 You relaxing with a drink in hand 🍹 No stress. No planning headaches. Just paradise. 🏖️ 5 "
+  },
+  {
+    "id": "7612824727228271892",
+    "username": "travel.to.mexico8",
+    "title": "Picture this… Your kids laughing in the pool 🌊 You relaxing with a drink in hand 🍹 No stress. No planning headaches. Just paradise. 🏖️ 5 "
+  },
+  {
+    "id": "7612824588543626516",
+    "username": "travel.to.mexico8",
+    "title": "Picture this… Your kids laughing in the pool 🌊 You relaxing with a drink in hand 🍹 No stress. No planning headaches. Just paradise. 🏖️ 5 "
+  },
+  {
+    "id": "7611713202807754005",
+    "username": "travel.to.mexico8",
+    "title": "Picture this… Your kids laughing in the pool 🌊 You relaxing with a drink in hand 🍹 No stress. No planning headaches. Just paradise. 🏖️ 5 "
+  },
+  {
+    "id": "7611713028819537172",
+    "username": "travel.to.mexico8",
+    "title": "Picture this… Your kids laughing in the pool 🌊 You relaxing with a drink in hand 🍹 No stress. No planning headaches. Just paradise. 🏖️ 5 "
+  },
+  {
+    "id": "7611712896271240469",
+    "username": "travel.to.mexico8",
+    "title": "Picture this… Your kids laughing in the pool 🌊 You relaxing with a drink in hand 🍹 No stress. No planning headaches. Just paradise. 🏖️ 5 "
+  },
+  {
+    "id": "7611712751257292053",
+    "username": "travel.to.mexico8",
+    "title": "Picture this… Your kids laughing in the pool 🌊 You relaxing with a drink in hand 🍹 No stress. No planning headaches. Just paradise. 🏖️ 5 "
+  },
+  {
+    "id": "7611712572877851925",
+    "username": "travel.to.mexico8",
+    "title": "Picture this… Your kids laughing in the pool 🌊 You relaxing with a drink in hand 🍹 No stress. No planning headaches. Just paradise. 🏖️ 5 "
+  },
+  {
+    "id": "7611334215837256981",
+    "username": "travel.to.mexico8",
+    "title": "🌴 Escape to Paradise! 5 Days & 4 Nights in Mexico — All-Inclusive for Only $299! 🌞 Imagine sun-soaked beaches, crystal-clear waters, and u"
+  },
+  {
+    "id": "7611334042528533780",
+    "username": "travel.to.mexico8",
+    "title": "🌴 Escape to Paradise! 5 Days & 4 Nights in Mexico — All-Inclusive for Only $299! 🌞 Imagine sun-soaked beaches, crystal-clear waters, and u"
+  },
+  {
+    "id": "7611333870310460693",
+    "username": "travel.to.mexico8",
+    "title": "🌴 Escape to Paradise! 5 Days & 4 Nights in Mexico — All-Inclusive for Only $299! 🌞 Imagine sun-soaked beaches, crystal-clear waters, and u"
+  },
+  {
+    "id": "7611333628567571732",
+    "username": "travel.to.mexico8",
+    "title": "🌴 Escape to Paradise! 5 Days & 4 Nights in Mexico — All-Inclusive for Only $299! 🌞 Imagine sun-soaked beaches, crystal-clear waters, and u"
+  },
+  {
+    "id": "7611333495373204756",
+    "username": "travel.to.mexico8",
+    "title": "🌴 Escape to Paradise! 5 Days & 4 Nights in Mexico — All-Inclusive for Only $299! 🌞 Imagine sun-soaked beaches, crystal-clear waters, and u"
+  },
+  {
+    "id": "7610599550029516053",
+    "username": "travel.to.mexico8",
+    "title": "🌴 Escape to Paradise! 5 Days & 4 Nights in Mexico — All-Inclusive for Only $299! 🌞 Imagine sun-soaked beaches, crystal-clear waters, and u"
+  },
+  {
+    "id": "7610596527475608853",
+    "username": "travel.to.mexico8",
+    "title": "🌴 Escape to Paradise! 5 Days & 4 Nights in Mexico — All-Inclusive for Only $299! 🌞 Imagine sun-soaked beaches, crystal-clear waters, and u"
+  },
+  {
+    "id": "7610593736338197780",
+    "username": "travel.to.mexico8",
+    "title": "🌴 Escape to Paradise! 5 Days & 4 Nights in Mexico — All-Inclusive for Only $299! 🌞 Imagine sun-soaked beaches, crystal-clear waters, and u"
+  },
+  {
+    "id": "7610591010338458901",
+    "username": "travel.to.mexico8",
+    "title": "🌴 Escape to Paradise! 5 Days & 4 Nights in Mexico — All-Inclusive for Only $299! 🌞 Imagine sun-soaked beaches, crystal-clear waters, and u"
+  },
+  {
+    "id": "7610586339880242453",
+    "username": "travel.to.mexico8",
+    "title": "🌴 Escape to Paradise! 5 Days & 4 Nights in Mexico — All-Inclusive for Only $299! 🌞 Imagine sun-soaked beaches, crystal-clear waters, and u"
+  },
+  {
+    "id": "7610229016678796565",
+    "username": "travel.to.mexico8",
+    "title": "🌴 Escape to Paradise! 5 Days & 4 Nights in Mexico — All-Inclusive for Only $299! 🌞 Imagine sun-soaked beaches, crystal-clear waters, and u"
+  },
+  {
+    "id": "7610225854345399573",
+    "username": "travel.to.mexico8",
+    "title": "🌴 Escape to Paradise! 5 Days & 4 Nights in Mexico — All-Inclusive for Only $299! 🌞 Imagine sun-soaked beaches, crystal-clear waters, and u"
+  },
+  {
+    "id": "7610214868418956565",
+    "username": "travel.to.mexico8",
+    "title": "🌴 Escape to Paradise! 5 Days & 4 Nights in Mexico — All-Inclusive for Only $299! 🌞 Imagine sun-soaked beaches, crystal-clear waters, and u"
+  },
+  {
+    "id": "7610212093278555413",
+    "username": "travel.to.mexico8",
+    "title": "🌴 Escape to Paradise! 5 Days & 4 Nights in Mexico — All-Inclusive for Only $299! 🌞 Imagine sun-soaked beaches, crystal-clear waters, and u"
+  },
+  {
+    "id": "7606146061446417685",
+    "username": "travel.to.mexico8",
+    "title": "🚨 $299 MEXICO VACATION DEAL 🚨 🌴 5 Days / 4 Nights 🍹 All-Inclusive Resort 👨‍👩‍👧‍👦 2 Adults + 2 Kids 📅 NO blackout dates This deal wo"
+  },
+  {
+    "id": "7606141425520053524",
+    "username": "travel.to.mexico8",
+    "title": "🚨 $299 MEXICO VACATION DEAL 🚨 🌴 5 Days / 4 Nights 🍹 All-Inclusive Resort 👨‍👩‍👧‍👦 2 Adults + 2 Kids 📅 NO blackout dates This deal wo"
+  },
+  {
+    "id": "7606137412191882517",
+    "username": "travel.to.mexico8",
+    "title": "🚨 $299 MEXICO VACATION DEAL 🚨 🌴 5 Days / 4 Nights 🍹 All-Inclusive Resort 👨‍👩‍👧‍👦 2 Adults + 2 Kids 📅 NO blackout dates This deal wo"
+  },
+  {
+    "id": "7606131787672079636",
+    "username": "travel.to.mexico8",
+    "title": "🚨 $299 MEXICO VACATION DEAL 🚨 🌴 5 Days / 4 Nights 🍹 All-Inclusive Resort 👨‍👩‍👧‍👦 2 Adults + 2 Kids 📅 NO blackout dates This deal wo"
+  },
+  {
+    "id": "7606128084961545493",
+    "username": "travel.to.mexico8",
+    "title": "🚨 $299 MEXICO VACATION DEAL 🚨 🌴 5 Days / 4 Nights 🍹 All-Inclusive Resort 👨‍👩‍👧‍👦 2 Adults + 2 Kids 📅 NO blackout dates This deal wo"
+  },
+  {
+    "id": "7605777886037003541",
+    "username": "travel.to.mexico8",
+    "title": "Picture this… Your kids laughing in the pool 🌊 You relaxing with a drink in hand 🍹 No stress. No planning headaches. Just paradise. 🏖️ 5 "
+  },
+  {
+    "id": "7605774409177107732",
+    "username": "travel.to.mexico8",
+    "title": "Picture this… Your kids laughing in the pool 🌊 You relaxing with a drink in hand 🍹 No stress. No planning headaches. Just paradise. 🏖️ 5 "
+  },
+  {
+    "id": "7605771533738380564",
+    "username": "travel.to.mexico8",
+    "title": "Picture this… Your kids laughing in the pool 🌊 You relaxing with a drink in hand 🍹 No stress. No planning headaches. Just paradise. 🏖️ 5 "
+  },
+  {
+    "id": "7605765455831141653",
+    "username": "travel.to.mexico8",
+    "title": "Picture this… Your kids laughing in the pool 🌊 You relaxing with a drink in hand 🍹 No stress. No planning headaches. Just paradise. 🏖️ 5 "
+  },
+  {
+    "id": "7605763423334337813",
+    "username": "travel.to.mexico8",
+    "title": "Picture this… Your kids laughing in the pool 🌊 You relaxing with a drink in hand 🍹 No stress. No planning headaches. Just paradise. 🏖️ 5 "
+  },
+  {
+    "id": "7605403420501134613",
+    "username": "travel.to.mexico8",
+    "title": "🌴 Escape to Paradise! 5 Days & 4 Nights in Mexico — All-Inclusive for Only $299! 🌞 Imagine sun-soaked beaches, crystal-clear waters, and u"
+  },
+  {
+    "id": "7605393075606850836",
+    "username": "travel.to.mexico8",
+    "title": "🌴 Escape to Paradise! 5 Days & 4 Nights in Mexico — All-Inclusive for Only $299! 🌞 Imagine sun-soaked beaches, crystal-clear waters, and u"
+  },
+  {
+    "id": "7605388929088441621",
+    "username": "travel.to.mexico8",
+    "title": "🌴 Escape to Paradise! 5 Days & 4 Nights in Mexico — All-Inclusive for Only $299! 🌞 Imagine sun-soaked beaches, crystal-clear waters, and u"
+  },
+  {
+    "id": "7605385078083980565",
+    "username": "travel.to.mexico8",
+    "title": "🌴 Escape to Paradise! 5 Days & 4 Nights in Mexico — All-Inclusive for Only $299! 🌞 Imagine sun-soaked beaches, crystal-clear waters, and u"
+  },
+  {
+    "id": "7605034148218113301",
+    "username": "travel.to.mexico8",
+    "title": "Escape the everyday and treat your family to the vacation you’ve all been dreaming of — without breaking the bank! ✨ What’s Included: ✔️ 5 D"
+  },
+  {
+    "id": "7605031715878341908",
+    "username": "travel.to.mexico8",
+    "title": "Escape the everyday and treat your family to the vacation you’ve all been dreaming of — without breaking the bank! ✨ What’s Included: ✔️ 5 D"
+  },
+  {
+    "id": "7605025108616350996",
+    "username": "travel.to.mexico8",
+    "title": "Escape the everyday and treat your family to the vacation you’ve all been dreaming of — without breaking the bank! ✨ What’s Included: ✔️ 5 D"
+  },
+  {
+    "id": "7605017071356792084",
+    "username": "travel.to.mexico8",
+    "title": "Escape the everyday and treat your family to the vacation you’ve all been dreaming of — without breaking the bank! ✨ What’s Included: ✔️ 5 D"
+  },
+  {
+    "id": "7605011911742115093",
+    "username": "travel.to.mexico8",
+    "title": "Escape the everyday and treat your family to the vacation you’ve all been dreaming of — without breaking the bank! ✨ What’s Included: ✔️ 5 D"
+  },
+  {
+    "id": "7603922127410056469",
+    "username": "travel.to.mexico8",
+    "title": "🌴 CANCUN GETAWAY for ONLY $299?! 😱✈️ Yes, you read that right! Treat your family to a 5 Days / 4 Nights All-Inclusive Vacation in beautifu"
+  },
+  {
+    "id": "7603917143503113492",
+    "username": "travel.to.mexico8",
+    "title": "🌴 CANCUN GETAWAY for ONLY $299?! 😱✈️ Yes, you read that right! Treat your family to a 5 Days / 4 Nights All-Inclusive Vacation in beautifu"
+  },
+  {
+    "id": "7603915141607853332",
+    "username": "travel.to.mexico8",
+    "title": "🌴 CANCUN GETAWAY for ONLY $299?! 😱✈️ Yes, you read that right! Treat your family to a 5 Days / 4 Nights All-Inclusive Vacation in beautifu"
+  },
+  {
+    "id": "7603904300644961556",
+    "username": "travel.to.mexico8",
+    "title": "🌴 CANCUN GETAWAY for ONLY $299?! 😱✈️ Yes, you read that right! Treat your family to a 5 Days / 4 Nights All-Inclusive Vacation in beautifu"
+  },
+  {
+    "id": "7603547156028476693",
+    "username": "travel.to.mexico8",
+    "title": "🌴 CANCUN GETAWAY for ONLY $299?! 😱✈️ Yes, you read that right! Treat your family to a 5 Days / 4 Nights All-Inclusive Vacation in beautifu"
+  },
+  {
+    "id": "7603542827678715156",
+    "username": "travel.to.mexico8",
+    "title": "🌴 CANCUN GETAWAY for ONLY $299?! 😱✈️ Yes, you read that right! Treat your family to a 5 Days / 4 Nights All-Inclusive Vacation in beautifu"
+  },
+  {
+    "id": "7602437874096639253",
+    "username": "travel.to.mexico8",
+    "title": "🌴 CANCUN GETAWAY for ONLY $299?! 😱✈️ Yes, you read that right! Treat your family to a 5 Days / 4 Nights All-Inclusive Vacation in beautifu"
+  },
+  {
+    "id": "7602435246679739668",
+    "username": "travel.to.mexico8",
+    "title": "🌴 CANCUN GETAWAY for ONLY $299?! 😱✈️ Yes, you read that right! Treat your family to a 5 Days / 4 Nights All-Inclusive Vacation in beautifu"
+  },
+  {
+    "id": "7602432094261841172",
+    "username": "travel.to.mexico8",
+    "title": "🌴 CANCUN GETAWAY for ONLY $299?! 😱✈️ Yes, you read that right! Treat your family to a 5 Days / 4 Nights All-Inclusive Vacation in beautifu"
+  },
+  {
+    "id": "7602427461330029844",
+    "username": "travel.to.mexico8",
+    "title": "🌴 CANCUN GETAWAY for ONLY $299?! 😱✈️ Yes, you read that right! Treat your family to a 5 Days / 4 Nights All-Inclusive Vacation in beautifu"
+  },
+  {
+    "id": "7602421070645169429",
+    "username": "travel.to.mexico8",
+    "title": "🌴 CANCUN GETAWAY for ONLY $299?! 😱✈️ Yes, you read that right! Treat your family to a 5 Days / 4 Nights All-Inclusive Vacation in beautifu"
+  },
+  {
+    "id": "7602416902236835093",
+    "username": "travel.to.mexico8",
+    "title": "🌴 CANCUN GETAWAY for ONLY $299?! 😱✈️ Yes, you read that right! Treat your family to a 5 Days / 4 Nights All-Inclusive Vacation in beautifu"
+  },
+  {
+    "id": "7601325166483737877",
+    "username": "travel.to.mexico8",
+    "title": "🌴 CANCUN GETAWAY for ONLY $299?! 😱✈️ Yes, you read that right! Treat your family to a 5 Days / 4 Nights All-Inclusive Vacation in beautifu"
+  },
+  {
+    "id": "7601319181895814421",
+    "username": "travel.to.mexico8",
+    "title": "🌴 CANCUN GETAWAY for ONLY $299?! 😱✈️ Yes, you read that right! Treat your family to a 5 Days / 4 Nights All-Inclusive Vacation in beautifu"
+  },
+  {
+    "id": "7601314019064040724",
+    "username": "travel.to.mexico8",
+    "title": "🌴 CANCUN GETAWAY for ONLY $299?! 😱✈️ Yes, you read that right! Treat your family to a 5 Days / 4 Nights All-Inclusive Vacation in beautifu"
+  },
+  {
+    "id": "7601307252854721813",
+    "username": "travel.to.mexico8",
+    "title": "🌴 CANCUN GETAWAY for ONLY $299?! 😱✈️ Yes, you read that right! Treat your family to a 5 Days / 4 Nights All-Inclusive Vacation in beautifu"
+  },
+  {
+    "id": "7601302133505264916",
+    "username": "travel.to.mexico8",
+    "title": "🌴 CANCUN GETAWAY for ONLY $299?! 😱✈️ Yes, you read that right! Treat your family to a 5 Days / 4 Nights All-Inclusive Vacation in beautifu"
+  },
+  {
+    "id": "7600953259527818517",
+    "username": "travel.to.mexico8",
+    "title": "🌴 CANCUN GETAWAY for ONLY $299?! 😱✈️ Yes, you read that right! Treat your family to a 5 Days / 4 Nights All-Inclusive Vacation in beautifu"
+  },
+  {
+    "id": "7600948478646242581",
+    "username": "travel.to.mexico8",
+    "title": "🌴 CANCUN GETAWAY for ONLY $299?! 😱✈️ Yes, you read that right! Treat your family to a 5 Days / 4 Nights All-Inclusive Vacation in beautifu"
+  },
+  {
+    "id": "7600928959915756820",
+    "username": "travel.to.mexico8",
+    "title": "🌴 CANCUN GETAWAY for ONLY $299?! 😱✈️ Yes, you read that right! Treat your family to a 5 Days / 4 Nights All-Inclusive Vacation in beautifu"
+  },
+  {
+    "id": "7600582098000383252",
+    "username": "travel.to.mexico8",
+    "title": "🌴 CANCUN GETAWAY for ONLY $299?! 😱✈️ Yes, you read that right! Treat your family to a 5 Days / 4 Nights All-Inclusive Vacation in beautifu"
+  },
+  {
+    "id": "7600564867724021013",
+    "username": "travel.to.mexico8",
+    "title": "🌴 CANCUN GETAWAY for ONLY $299?! 😱✈️ Yes, you read that right! Treat your family to a 5 Days / 4 Nights All-Inclusive Vacation in beautifu"
+  },
+  {
+    "id": "7600559301060578581",
+    "username": "travel.to.mexico8",
+    "title": "🌴 CANCUN GETAWAY for ONLY $299?! 😱✈️ Yes, you read that right! Treat your family to a 5 Days / 4 Nights All-Inclusive Vacation in beautifu"
+  },
+  {
+    "id": "7600213209684970772",
+    "username": "travel.to.mexico8",
+    "title": "🌴 CANCUN GETAWAY for ONLY $299?! 😱✈️ Yes, you read that right! Treat your family to a 5 Days / 4 Nights All-Inclusive Vacation in beautifu"
+  },
+  {
+    "id": "7600210082596539669",
+    "username": "travel.to.mexico8",
+    "title": "🌴 CANCUN GETAWAY for ONLY $299?! 😱✈️ Yes, you read that right! Treat your family to a 5 Days / 4 Nights All-Inclusive Vacation in beautifu"
+  },
+  {
+    "id": "7600207352259808532",
+    "username": "travel.to.mexico8",
+    "title": "🌴 CANCUN GETAWAY for ONLY $299?! 😱✈️ Yes, you read that right! Treat your family to a 5 Days / 4 Nights All-Inclusive Vacation in beautifu"
+  },
+  {
+    "id": "7600201175933177109",
+    "username": "travel.to.mexico8",
+    "title": "🌴 CANCUN GETAWAY for ONLY $299?! 😱✈️ Yes, you read that right! Treat your family to a 5 Days / 4 Nights All-Inclusive Vacation in beautifu"
+  },
+  {
+    "id": "7598734004359007509",
+    "username": "travel.to.mexico8",
+    "title": "🌴 CANCUN GETAWAY for ONLY $299?! 😱✈️ Yes, you read that right! Treat your family to a 5 Days / 4 Nights All-Inclusive Vacation in beautifu"
+  },
+  {
+    "id": "7598726765644696853",
+    "username": "travel.to.mexico8",
+    "title": "🌴 CANCUN GETAWAY for ONLY $299?! 😱✈️ Yes, you read that right! Treat your family to a 5 Days / 4 Nights All-Inclusive Vacation in beautifu"
+  },
+  {
+    "id": "7598715055793868052",
+    "username": "travel.to.mexico8",
+    "title": ""
+  },
+  {
+    "id": "7618035152551218450",
+    "username": "chris724santos",
+    "title": "They said Cancun isn’t safe anymore… meanwhile I’m here watching the sun on the beach, totally safe! Toll-Free (US & Canada): 1-888-602-2424"
+  },
+  {
+    "id": "7618034303322148114",
+    "username": "chris724santos",
+    "title": "Everyone says Cancun is dangerous… I’m here right now and honestly… it’s one of the most peaceful vacations I’ve had Toll-Free (US & Canada)"
+  },
+  {
+    "id": "7618032920892148999",
+    "username": "chris724santos",
+    "title": "New Yorkers, Let me show you what a real stress-free vacation looks like. In Cancun, all-inclusive means everything is covered—from food and"
+  },
+  {
+    "id": "7618031655797738760",
+    "username": "chris724santos",
+    "title": "Calgarians, Close your eyes… now imagine the perfect vacation. Warm beaches, unlimited cocktails, all-you-can-eat dining, poolside service—y"
+  },
+  {
+    "id": "7618030206959340818",
+    "username": "chris724santos",
+    "title": "Spoiler alert: Paradise is actually affordable. Cancun all-inclusive resorts bundle meals, drinks, pools, and beach access into one simple p"
+  },
+  {
+    "id": "7616168374267055378",
+    "username": "chris724santos",
+    "title": "Calgarians, here’s something better than your morning coffee… Waking up in Cancun to ocean breezes, breakfast buffets, and unlimited resort "
+  },
+  {
+    "id": "7616166257783606535",
+    "username": "chris724santos",
+    "title": "Easterners, warning: This might cause you to pack your bags. Cancun offers all-inclusive resorts with 24/7 food, drinks, entertainment, and "
+  },
+  {
+    "id": "7616163461604609287",
+    "username": "chris724santos",
+    "title": "Ottawans, your future self will thank you for hearing this. A Cancun all-inclusive stay means zero planning, zero stress—just sunsets, warm "
+  },
+  {
+    "id": "7616159717517167879",
+    "username": "chris724santos",
+    "title": "New Yorkers, stop scrolling if you need a break from reality. Imagine unlimited cocktails, poolside vibes, and white-sand beaches—all packag"
+  },
+  {
+    "id": "7616157825328254215",
+    "username": "chris724santos",
+    "title": "Hey If you could be anywhere right now… why not Cancun? All-inclusive means unlimited meals, drinks, pools, and beach access—no extra planni"
+  },
+  {
+    "id": "7615802426007801096",
+    "username": "chris724santos",
+    "title": "Americans and Canadians, ever wanted to feel like a VIP without paying VIP prices? Cancun’s all-inclusive packages give you luxury—beach acc"
+  },
+  {
+    "id": "7615798501636672776",
+    "username": "chris724santos",
+    "title": "Canadians and US, this is your sign to take that vacation you’ve been putting off. Cancun all-inclusive resorts take care of everything: foo"
+  },
+  {
+    "id": "7615795344672132360",
+    "username": "chris724santos",
+    "title": "Americans, cancel your weekend plans… because I just found something better. Picture white-sand beaches, unlimited cocktails, poolside servi"
+  },
+  {
+    "id": "7615793545781267730",
+    "username": "chris724santos",
+    "title": "What if your next vacation didn’t require planning anything at all? In Cancun’s all-inclusive resorts, you get meals, drinks, activities, an"
+  },
+  {
+    "id": "7615791481458117895",
+    "username": "chris724santos",
+    "title": "US and CA, Imagine waking up in paradise where your only job is to relax… From unlimited food & drinks to beachfront pools and daily enterta"
+  },
+  {
+    "id": "7615454710916533511",
+    "username": "chris724santos",
+    "title": "Americans, Need a break? If you want sun + sand? Think Cancun! Cancún gives you luxury vibes without the price, super affordable! Message me"
+  },
+  {
+    "id": "7615452362475392264",
+    "username": "chris724santos",
+    "title": "Canadians, If you’ve been thinking about taking a break, Cancún is the perfect place to make it happen. Beautiful beaches, warm weather, gre"
+  },
+  {
+    "id": "7615450387285331208",
+    "username": "chris724santos",
+    "title": "Sometimes you don’t need a long plan — just the right destination. And for many, that’s Cancún. This promo covers a comfortable resort stay,"
+  },
+  {
+    "id": "7615448674025442567",
+    "username": "chris724santos",
+    "title": "Looking for a destination that’s worth every minute of your vacation time? Cancún is always a solid choice. You get beaches, culture, nightl"
+  },
+  {
+    "id": "7615447194316885256",
+    "username": "chris724santos",
+    "title": "Picture yourself waking up to turquoise water and warm ocean breeze — that’s Cancún. This offer gives you resort access, pools, entertainmen"
+  },
+  {
+    "id": "7615066189110185234",
+    "username": "chris724santos",
+    "title": "US and Canadians, Sometimes you just need a break from everything. And that break looks like a beachfront resort in Cancun, warm weather, an"
+  },
+  {
+    "id": "7615063282382146824",
+    "username": "chris724santos",
+    "title": "Canadians and US, You just booked a trip to Cancun. You start imagining the beaches, the sunsets, the resort pools, and the feeling of final"
+  },
+  {
+    "id": "7615061277148187922",
+    "username": "chris724santos",
+    "title": "US and Canadian, This is your sign to take a vacation. Cancun beaches, ocean views, and a few days away from the daily routine. Message me o"
+  },
+  {
+    "id": "7615059773691546887",
+    "username": "chris724santos",
+    "title": "Hey, If someone offered you a 4-day resort stay in Cancun, would you take it? Because honestly… most people would say yes. DM or comment Can"
+  },
+  {
+    "id": "7615058166895709458",
+    "username": "chris724santos",
+    "title": "US and Canadians, Imagine spending a few days in Cancun instead of being stuck at work. Honestly… everyone deserves a vacation like this at "
+  },
+  {
+    "id": "7613982935712107794",
+    "username": "chris724santos",
+    "title": "US and Canadians, if you’ve never been to Cancun… this is your chance. You might want to check out these resort stays we still have availabl"
+  },
+  {
+    "id": "7613978916574874887",
+    "username": "chris724santos",
+    "title": "Canadians and US, Stop scrolling if you love beach vacations. We currently have Cancun resort stays available. Send a message and I’ll expla"
+  },
+  {
+    "id": "7613977546417310983",
+    "username": "chris724santos",
+    "title": "Cancun vacations are expensive… unless you know about this. US and Canadians, We currently have discounted resort stays available. Outro: “C"
+  },
+  {
+    "id": "7613976159252008199",
+    "username": "chris724santos",
+    "title": "Canadians and US, If Cancun has been on your bucket list… this is your sign. We still have discounted stays at beachfront resorts in Cancun,"
+  },
+  {
+    "id": "7613974424663952658",
+    "username": "chris724santos",
+    "title": "US and Canadians, Planning a trip to Mexico this year? We have Cancun resort stays available for a limited time. Send me a quick message bef"
+  },
+  {
+    "id": "7613613311300504850",
+    "username": "chris724santos",
+    "title": "Americans and Canadians… if you need a warm escape, listen to this. We’re offering a Cancun resort getaway with beautiful beaches and relaxi"
+  },
+  {
+    "id": "7613611646375693576",
+    "username": "chris724santos",
+    "title": "Canadians and US, if Cancun is on your travel list, listen to this. We’re helping travelers enjoy resort stays near the beach. DM or comment"
+  },
+  {
+    "id": "7613609941160529160",
+    "username": "chris724santos",
+    "title": "Hey, thinking about a tropical vacation this year? Cancun offers stunning beaches and relaxing resort experiences. Comment ‘INFO’ and I’ll m"
+  },
+  {
+    "id": "7613608501083917576",
+    "username": "chris724santos",
+    "title": "US and Canadians, here’s a quick vacation idea for you. A relaxing Cancun resort stay where you can enjoy the beach and sunshine. Message me"
+  },
+  {
+    "id": "7613607211008363784",
+    "username": "chris724santos",
+    "title": "Still deciding where to go for your next vacation? Cancun might be the perfect choice—tropical beaches and amazing resort stays. Comment ‘CA"
+  },
+  {
+    "id": "7613185644747164935",
+    "username": "chris724santos",
+    "title": "Canadians and US, let’s turn your dream beach trip into reality! We have discounted Cancun packages for couples, families, or solo travelers"
+  },
+  {
+    "id": "7613183865204641031",
+    "username": "chris724santos",
+    "title": "Hey! Planning a trip but don’t know where to start? We’ve got Cancun deals that make your vacation simple and affordable. Chat with me and I"
+  },
+  {
+    "id": "7613182036366478610",
+    "username": "chris724santos",
+    "title": "Got 15 seconds? Let me show you your next vacation. Cancun—beautiful beaches, great food, and affordable promo stays. Message me now for the"
+  },
+  {
+    "id": "7613180263983549703",
+    "username": "chris724santos",
+    "title": "US and Canadians, you deserve a break, don’t you? We've got amazing discounted stays in Cancun with flexible dates. Send me a quick message "
+  },
+  {
+    "id": "7613178679929228552",
+    "username": "chris724santos",
+    "title": "Hey! When was the last time you treated yourself to a real vacation? Come enjoy Cancun’s beaches and top-notch resorts with our promo packag"
+  },
+  {
+    "id": "7612818180699852050",
+    "username": "chris724santos",
+    "title": "Canadian and US travelers, need a warm reset? Cancun is calling your name. With an all-inclusive food, drinks, pools, and upgraded safety fo"
+  },
+  {
+    "id": "7612815416146103570",
+    "username": "chris724santos",
+    "title": "Hi there US and Canadians, it’s the perfect time for a warm break—sun, sand, and all-inclusive comfort. Enjoy unlimited food and drinks, res"
+  },
+  {
+    "id": "7612813070410337554",
+    "username": "chris724santos",
+    "title": "From the US and Canada to pure tropical bliss—your next getaway starts now. Everything is covered. Escape the cold and enjoy crystal-clear w"
+  },
+  {
+    "id": "7612811446468005138",
+    "username": "chris724santos",
+    "title": "Hey Canadians and US, if you want beaches, luxury, and stress-free travel, this is it. Krystal Grand Cancun, includes full amenities, daily "
+  },
+  {
+    "id": "7611704941241060626",
+    "username": "chris724santos",
+    "title": "Hey friends from Canada and US! Ready to make new memories? Cancún is one of the top beach destinations waiting for you. With an all-inclusi"
+  },
+  {
+    "id": "7611702983197314311",
+    "username": "chris724santos",
+    "title": "Feeling stressed lately? Maybe it’s time to unwind in Cancún, where every day feels like summer. Our all-inclusive package covers food, drin"
+  },
+  {
+    "id": "7611700828247706887",
+    "username": "chris724santos",
+    "title": "Hey US ans Canadians! Your next unforgettable vacation starts the moment you land in Cancún. Relax at an all-inclusive resort with unlimited"
+  },
+  {
+    "id": "7611698597385522440",
+    "username": "chris724santos",
+    "title": "Ready for a warm escape? Your dream getaway starts in Cancún, one of the top beach destinations in Mexico. Stay in an all-inclusive resort w"
+  },
+  {
+    "id": "7611694991936736530",
+    "username": "chris724santos",
+    "title": "Hey there! If you’ve been craving sunshine and turquoise waters, Cancún is calling your name. Enjoy a full all-inclusive experience—unlimite"
+  },
+  {
+    "id": "7611334414362004743",
+    "username": "chris724santos",
+    "title": "US and Canadian travelers—looking for a safe destination with crystal-blue waters? Stay at an all-inclusive resort with unlimited food, unli"
+  },
+  {
+    "id": "7611332584718568711",
+    "username": "chris724santos",
+    "title": "Hey, If you're flying from Canada or the US, Cancún is still one of the top safe zones for tourist vacations, especially inside the resort a"
+  },
+  {
+    "id": "7611330525692841224",
+    "username": "chris724santos",
+    "title": "To my US and Canadian travelers—your next safe and sunny escape is waiting in Cancun! Enjoy stress-free all-inclusive perks: gourmet meals, "
+  },
+  {
+    "id": "7611328364732845320",
+    "username": "chris724santos",
+    "title": "Whether you're coming from Canada or the US, you deserve a getaway! All-inclusive resorts here give you unlimited dining, open bars, pristin"
+  },
+  {
+    "id": "7611326035031788818",
+    "username": "chris724santos",
+    "title": "Calling all travelers from the US and Canada - dreaming of a tropical escape. Imagine staying in an all-inclusive resort where your food, dr"
+  },
+  {
+    "id": "7610608531678530823",
+    "username": "chris724santos",
+    "title": "Imagine staying right on the beach, with warm waters, full amenities, and restaurants just steps away. Shall we go ahead and confirm your sp"
+  },
+  {
+    "id": "7610594867172920584",
+    "username": "chris724santos",
+    "title": "Hi! I’ll keep this quick—I’ve got a Cancun vacation offer that’s too good not to share with you. If this sounds good so far, we can lock it "
+  },
+  {
+    "id": "7610582097748577544",
+    "username": "chris724santos",
+    "title": "Hi! Quick question—have you ever imagined waking up to crystal-blue beaches in Cancun? We’re talking about staying in a beachfront resort—wh"
+  },
+  {
+    "id": "7610228483909782791",
+    "username": "chris724santos",
+    "title": "Cold front in Ontario? Heatwave in Arizona? Cancun stays perfect all year round. A luxury vacation doesn’t have to be expensive—especially i"
+  },
+  {
+    "id": "7610226305556221191",
+    "username": "chris724santos",
+    "title": "Say yes to sun-soaked mornings and unforgettable nights in Cancun. Cancun is the escape you deserve. PM or comment CANCUN! Toll-Free (US & C"
+  },
+  {
+    "id": "7610220494742211858",
+    "username": "chris724santos",
+    "title": "Whether you’re near the mountains of Alberta or the plains of Kansas, Cancun is your chance to switch scenery instantly. What are you waitin"
+  },
+  {
+    "id": "7610214043680345352",
+    "username": "chris724santos",
+    "title": "From Montreal to California, travelers are picking Cancun for the beaches, the food, and the crystal-clear water. Pack light. Relax heavy. C"
+  },
+  {
+    "id": "7610205552127266066",
+    "username": "chris724santos",
+    "title": "Canadian winters hitting hard? Ready to trade your routine for turquoise waters? Just pm or comment Cancun! ☀︎.⋆ 𖤓  Toll-Free (US & Canada)"
+  },
+  {
+    "id": "7609117013834845447",
+    "username": "chris724santos",
+    "title": "Calgary folks, quick vacation notice! We still have discounted vacation package for you yall. Message me or comment CANCUN! ☀︎.⋆ 𖤓  Toll-Fr"
+  },
+  {
+    "id": "7609115330388053256",
+    "username": "chris724santos",
+    "title": "Miami travelers, imagine a private balcony right inside your bedroom. These bedrooms? Pure hotel-goals. DM or message CANCUN now! 𖤓 ｡𖦹°‧ ⋆"
+  },
+  {
+    "id": "7609113519203667218",
+    "username": "chris724santos",
+    "title": "Good day, Montreal people — listen to this. We’re helping families secure their discounted vacation this year. Feel free to message or comme"
+  },
+  {
+    "id": "7609100427375725832",
+    "username": "chris724santos",
+    "title": "Hey California! Quick vacation heads-up! I have a vacation package promo still open for you! Message me or comment CANCUN right now to take "
+  },
+  {
+    "id": "7609098109934767367",
+    "username": "chris724santos",
+    "title": "Toronto! Listen up, this one’s for you. Your promo slot is still open — just letting you know. Message me or comment CANCUN! °❀⋆.ೃ #TorontoT"
+  },
+  {
+    "id": "7609095709073263880",
+    "username": "chris724santos",
+    "title": "Ottawa people, hear me real quick. We still have your promo rate available if you want to grab it. Feel free to DM or comment Cancun. #Cancu"
+  },
+  {
+    "id": "7608741747623070983",
+    "username": "chris724santos",
+    "title": "No matter if you're in Florida or New York, I’m ready when you are. Travelers from any state can avail this! Just send me a quick message to"
+  },
+  {
+    "id": "7608739596989451527",
+    "username": "chris724santos",
+    "title": "New Yorkers, if you need a break from the city, listen to this. Imagine a vacation that doesn’t break your budget. Let me know once you’re r"
+  },
+  {
+    "id": "7608727936786648338",
+    "username": "chris724santos",
+    "title": "Stop searching—your next getaway might be right here. If you’re planning a trip soon, this might be exactly what you need. DM or comment Cab"
+  },
+  {
+    "id": "7608725450415770888",
+    "username": "chris724santos",
+    "title": "If affordable luxury exists, this is it. A lot of people are asking about this. I’m just a message away whenever you’re ready to proceed. Co"
+  },
+  {
+    "id": "7608360935576603922",
+    "username": "chris724santos",
+    "title": "If you’re thinking of Riviera Maya this year… watch this first. Look at what’s already included in the price. Slots are limited — secure you"
+  },
+  {
+    "id": "7605030386606951687",
+    "username": "chris724santos",
+    "title": "Picture this—sitting by the shore in Cancun, watching the sky turn gold and pink 🌅 Mexico sunsets hit different! Wanna experience this, wit"
+  },
+  {
+    "id": "7605027310227426567",
+    "username": "chris724santos",
+    "title": "Wait—before you scroll, imagine yourself in Riviera Maya for a few days… but without spending too much. We’ve got an all-inclusive vacation "
+  },
+  {
+    "id": "7605014829023251719",
+    "username": "chris724santos",
+    "title": "Looking for a budget-friendly getaway? Puerto Vallarta got you. All-inclusive vacation. We work directly with the resorts, so you’ll get ver"
+  },
+  {
+    "id": "7605011840698944786",
+    "username": "chris724santos",
+    "title": "POV: You’re finally taking that trip you’ve been putting off forever. 🌴✨ Imagine waking up to ocean views, unlimited food and drinks, and a"
+  },
+  {
+    "id": "7605009292281859335",
+    "username": "chris724santos",
+    "title": "🌴 Hey! If you’ve been dreaming of a quick escape, Cancun is calling your name.  I’ve got an all-inclusive vacation package you might love D"
+  },
+  {
+    "id": "7603919277430721810",
+    "username": "chris724santos",
+    "title": "Cancun? With an all-inclusive deal? Yes, please. We’re offering a full package that covers everything. “Food, drinks, hotel, beach access — "
+  },
+  {
+    "id": "7603916425044036882",
+    "username": "chris724santos",
+    "title": "What if your next reset moment looked like this Hello, Cabo Let me show you a peaceful, all-inclusive escape You get ocean views, pools, unl"
+  },
+  {
+    "id": "7603907885462080775",
+    "username": "chris724santos",
+    "title": "STOP scrolling — Riviera Maya might be cheaper than your last weekend out. Serious. This all-inclusive package is actually doable. From whit"
+  },
+  {
+    "id": "7603905329964895495",
+    "username": "chris724santos",
+    "title": "POV: You’re tired of adulting and Cancun is calling your name. So here’s a quick look at this all-inclusive escape. 5 days, 4 nights. Beachf"
+  },
+  {
+    "id": "7603547720111901970",
+    "username": "chris724santos",
+    "title": "Ready for a break? Cancun, Mexico has everything you need for the perfect getaway! 🌴 All-inclusive means zero stress — eat, drink, relax, a"
+  },
+  {
+    "id": "7603541240449223943",
+    "username": "chris724santos",
+    "title": "Escape the daily grind… Puerto Vallarta is your paradise! 🏖️ All-inclusive fun means you can relax and enjoy every moment — no planning req"
+  },
+  {
+    "id": "7603533611102424328",
+    "username": "chris724santos",
+    "title": "Who’s ready for some sunshine? ☀️ Riviera Maya, Mexico is waiting! All your meals, drinks, and activities are included. Just show up and enj"
+  },
+  {
+    "id": "7603529785150672146",
+    "username": "chris724santos",
+    "title": "Hey! Planning your next getaway? 🌴 Imagine yourself in Cancun, Mexico — sun, sand, and total relaxation all in one trip! This is an all-inc"
+  },
+  {
+    "id": "7603176846171098375",
+    "username": "chris724santos",
+    "title": "⋆.˚ 𓇼 Cancun trip on a budget? Yup, possible. We have an all-inclusive Cancun vacation with a super good rate. Perfect for couples, familie"
+  },
+  {
+    "id": "7603172717289950472",
+    "username": "chris724santos",
+    "title": "CABO 2026 — who’s ready? ⋆.˚ 𓇼 We have an all-inclusive Cabo vacation with one of the best resort experiences in Mexico. 5 days, 4 nights. "
+  },
+  {
+    "id": "7603170263777201416",
+    "username": "chris724santos",
+    "title": "Looking for your next escape? Try Riviera Maya. ⋆.˚ 𓇼 We’re offering an all-inclusive vacation in Riviera Maya — one of the most beautiful "
+  },
+  {
+    "id": "7603162462015245576",
+    "username": "chris724santos",
+    "title": "Stop waiting for the ‘perfect time’ — your Cancun trip could literally start here. I’m helping people get an all-inclusive Cancun vacation f"
+  },
+  {
+    "id": "7603159313737190664",
+    "username": "chris724santos",
+    "title": "We have an all-inclusive Mexico vacation package perfect for couples, families, or friends. ⋆.˚ 𓇼 5 days, 4 nights. Unlimited food, unlimit"
+  },
+  {
+    "id": "7603155425307184402",
+    "username": "chris724santos",
+    "title": "POV: You’re about to unlock a Cancun vacation you didn’t know was possible. Hey! If you’ve been dreaming of white-sand beaches, bottomless d"
+  },
+  {
+    "id": "7602808291353201938",
+    "username": "chris724santos",
+    "title": "No plans this year? No problem! 𓇼 ⋆.˚ 𓆉 𓆝 𓆡 Cancun all-inclusive: sun, food, pools, fun — done! Just relax and let the vacation do its m"
+  },
+  {
+    "id": "7602801434245074194",
+    "username": "chris724santos",
+    "title": "Cancun hack: do less, enjoy more. °𓇼🌊⋆🐚 Think beaches, fun, and nonstop sunshine Let’s make it happen! °𓇼🌊⋆🐚 Just show up and enjoy! #"
+  },
+  {
+    "id": "7602797860169567506",
+    "username": "chris724santos",
+    "title": "Pack your bags… paradise awaits! 🌊⋆🐚🫧🥥🌴 Think turquoise waters, endless sun, and all-inclusive treats — cocktails, food, pools, and mor"
+  },
+  {
+    "id": "7602793251241856263",
+    "username": "chris724santos",
+    "title": "Paradise isn’t a place… it’s Cancun! 𓆝 𓆡⋆.˚ 𓇼 Sun, fun, and zero worries… who’s in? 𓆝 𓆡⋆.˚ 𓇼 All-inclusive vibes, just show up and enj"
+  },
+  {
+    "id": "7602788687109328135",
+    "username": "chris724santos",
+    "title": "Stress-free mode: ON. 🌺🌅🌊𓇼 ⋆. Let me show you how! Think all-inclusive means boring? Think again! Cancun has it all — stunning beaches, "
+  },
+  {
+    "id": "7602783687364578567",
+    "username": "chris724santos",
+    "title": "Ever seen water THIS blue? 😍 Cancun is calling! 🐚🫧🥥🌴 Stay at an all-inclusive resort, sip cocktails by the pool, and enjoy endless sun "
+  },
+  {
+    "id": "7602436296635632904",
+    "username": "chris724santos",
+    "title": "It’s the kind of trip where your only problem is choosing between the pool or the beach! 𓆉°❀⋆.ೃ࿔*:･ ˚⋆𓇼˚⊹ If Mexico is on your wishlist, I"
+  },
+  {
+    "id": "7602432924708834568",
+    "username": "chris724santos",
+    "title": "Hold up! Look how relaxing this is! You literally wake up, eat, swim, relax, repeat! No planning needed! If you ever needed a sign to plan a"
+  },
+  {
+    "id": "7602427669245889800",
+    "username": "chris724santos",
+    "title": "Let’s manifest good vibes today… starting with this view! 𓆉°❀⋆.ೃ࿔*:･ ˚⋆𓇼˚⊹ Perfect for couples, families, friends—just pure good vibes! 𓆉"
+  },
+  {
+    "id": "7602422161747283207",
+    "username": "chris724santos",
+    "title": "Real talk… we all deserve a soft life moment, so check this out! Everything is inside the resort—food spots, bars, pools, activities. You li"
+  },
+  {
+    "id": "7602416103356239111",
+    "username": "chris724santos",
+    "title": "If you need a sign to take a vacation… this is it! 𓆉°❀⋆.ೃ࿔*:･ ˚⋆𓇼˚⊹ Picture this: pool in the morning, beach in the afternoon, shows at ni"
+  },
+  {
+    "id": "7602412252343438599",
+    "username": "chris724santos",
+    "title": "POV: You just need a break… so here’s Mexico. 𖤓 ⋆˚࿔⋆.˚ 𓇼 Mexico has insane all-inclusive resorts… unlimited food, unlimited drinks, unlimi"
+  },
+  {
+    "id": "7601324989383527698",
+    "username": "chris724santos",
+    "title": "If travel heals you…🥥🌴🌺🌅🌊𖤓 ｡𖦹°‧ ⋆☀︎.⋆ 𖤓 ⋆˚࿔⋆.˚ 𓇼 SAME!!!! There’s something about Cancun that just refreshes your whole soul. Maybe"
+  },
+  {
+    "id": "7601322386176134407",
+    "username": "chris724santos",
+    "title": "Imagine being here right now… 🌻🏝️🕶️👕🌴☀️ Quiet beaches, good food, and days that just flow. Cancun feels like a reset button. One day, y"
+  },
+  {
+    "id": "7601315168517180679",
+    "username": "chris724santos",
+    "title": "If you’ve been craving a breather… ☀︎.⋆ 𖤓 ⋆˚࿔⋆.˚ 𓇼 Cancun is that place where time slows down and everything feels lighter. Adding this to"
+  },
+  {
+    "id": "7601306996272270599",
+    "username": "chris724santos",
+    "title": "Hey, you deserve a break. 🥥🌴🌺🌅🌊 Let me bring you to Cancun Beaches, sunsets, and unlimited fun. If you want the package, just DM me “CA"
+  },
+  {
+    "id": "7601301018957106440",
+    "username": "chris724santos",
+    "title": "Cancun? Yes please. 🌴 ₊✩‧₊˚౨ৎ˚₊✩‧₊ ˚⟡˖ All-inclusive vacation for you and your loved ones — food, drinks, activities, everything! ₊✩‧₊˚౨ৎ˚₊"
+  },
+  {
+    "id": "7601298265182637320",
+    "username": "chris724santos",
+    "title": "Tired of the same routine? Take a break in Cancun! All-inclusive food, drinks, and 5 days of purefun.  DM me “MEXICO” for the details! ✈️🔥 "
+  },
+  {
+    "id": "7600953943153331463",
+    "username": "chris724santos",
+    "title": "Stop scrolling — this is your next vacation 😎🌅 Travel smart and save more with this all-inclusive deal 🔥✈️ Let’s book your Cancun trip to"
+  },
+  {
+    "id": "7600949627860307208",
+    "username": "chris724santos",
+    "title": "Stop dreaming, start packing! Cancun awaits!! 😎🧳 Family-friendly + budget-friendly = perfect deal!! 🔥 Ready to make memories in Mexico? M"
+  },
+  {
+    "id": "7600940014209371400",
+    "username": "chris724santos",
+    "title": "Who wants Cancun for 5 days? Stay, dine, swim, enjoy! Promo won’t last long — DM me now °❀⋆.ೃ࿔*:･ ˚ ༘ #724vacation #cancunmexico #alliinclus"
+  },
+  {
+    "id": "7600936171354557704",
+    "username": "chris724santos",
+    "title": "All-inclusive package: food, drinks, pools, hotel… everything covered! DM me to start planning your 5D4N Mexico adventure! #724vacation #can"
+  },
+  {
+    "id": "7600931800495475975",
+    "username": "chris724santos",
+    "title": "Getaway vacation!!! ALERT!!! Just pure vacation mode!!! Limited time offer!!! Secure yours now!!! #724vacation #cancunmexico #familyvacation"
+  },
+  {
+    "id": "7600928850821860626",
+    "username": "chris724santos",
+    "title": "Sun, sand & unlimited drinks? Cancun is calling!!! #724vacation #cancunmexico #familyvacation #CapCut "
+  },
+  {
+    "id": "7600582664717913351",
+    "username": "chris724santos",
+    "title": "Craving a beach escape? Mexico has white-sand beaches and amazing resorts waiting for you! Let’s plan your trip today! 🌸🌺🌝💥☀️ #724vacati"
+  },
+  {
+    "id": "7600579435082812679",
+    "username": "chris724santos",
+    "title": "Ready for paradise? Let Mexico take your stress away. Let’s get you booked! 🍷🍾🍹☕️🫧🌸 #724vacation #cancunmexico #familyvacation #allincl"
+  },
+  {
+    "id": "7600574564598385928",
+    "username": "chris724santos",
+    "title": "Looking for your next destination? Mexico has everything—beach, culture, food, and unforgettable moments. Your Mexican adventure starts here"
+  },
+  {
+    "id": "7600568620103650578",
+    "username": "chris724santos",
+    "title": "Hey Travelers!!! Mexico is the best place to relax!!! DM Cancun!!! ☀️☀️ #724vacation #cancunmexico #alliinclusive "
+  },
+  {
+    "id": "7600564652304518418",
+    "username": "chris724santos",
+    "title": "Need a break from stress? Fly to Mexico! Plan your trip today! DM Cancun! 🐚😎 #724vacation #cancunmexico #alliinclusive #familyvacation "
+  },
+  {
+    "id": "7600559846118690055",
+    "username": "chris724santos",
+    "title": "Dreaming of a sunny escape? DM Cancun! ☀️🕶️ #cancunmexico #724vacation #alliinclusive "
+  },
+  {
+    "id": "7600210549238009106",
+    "username": "chris724santos",
+    "title": "Cancun is waiting for you!!! DM meeee!!!! #cancunmexico #724vacation #alliinclusive "
+  },
+  {
+    "id": "7600205520087043335",
+    "username": "chris724santos",
+    "title": "Want a luxury Cancun getaway? #cancunmexico #724vacation #familyvacation "
+  },
+  {
+    "id": "7600194855343541522",
+    "username": "chris724santos",
+    "title": "Cancun is calling!!! ⛱️🐚 #cancunmexico #familyvacation #724vacation "
+  },
+  {
+    "id": "7600189653106380039",
+    "username": "chris724santos",
+    "title": "Imagine yourself here in Cancun! 🐚 #cancunmexico #familyvacation #724vacation "
+  },
+  {
+    "id": "7599836054589394194",
+    "username": "chris724santos",
+    "title": "Dreaming of a getaway? DM us Cancun #cancunmexico #724vacation #familyvacation "
+  },
+  {
+    "id": "7599823703538453768",
+    "username": "chris724santos",
+    "title": "All Inclusive Vacation, DM us CANCUN #cancunmexico #724vacation #familyvacation "
+  },
+  {
+    "id": "7599817155001044231",
+    "username": "chris724santos",
+    "title": "Cancun Vacation getaway #cancunmexico #724vacation #allinclusive "
+  }
+]
\ No newline at end of file
diff --git a/src/hooks/useEarlyLead.ts b/src/hooks/useEarlyLead.ts
new file mode 100644
index 0000000..903978d
--- /dev/null
+++ b/src/hooks/useEarlyLead.ts
@@ -0,0 +1,76 @@
+'use client'
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+
+interface CapturePayload {
+  email: string
+  phone?: string
+  name?: string
+  source_lp?: string
+  referral_code?: string
+  utm_source?: string
+  utm_medium?: string
+  utm_campaign?: string
+}
+
+interface UseEarlyLeadOptions {
+  debounceMs?: number
+}
+
+/**
+ * Fire-and-forget early lead capture: posts to /api/track/lead the moment a
+ * valid email is detected, again whenever the payload changes (debounced).
+ * Used so we never lose a lead to abandoned-cart / abandoned-form behavior.
+ *
+ * Returns { captured, capture } — `captured` flips to true once the server
+ * has acknowledged at least one valid payload; `capture` is the manual
+ * trigger (call from onBlur for instant-on-blur capture in addition to the
+ * debounced auto-trigger).
+ */
+export function useEarlyLead(payload: CapturePayload, options: UseEarlyLeadOptions = {}) {
+  const { debounceMs = 800 } = options
+  const [captured, setCaptured] = useState(false)
+  const lastSentRef = useRef<string>('')
+  const inFlightRef = useRef(false)
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  const send = useCallback(async (p: CapturePayload) => {
+    if (!p.email || !EMAIL_RE.test(p.email)) return
+    const key = JSON.stringify(p)
+    if (key === lastSentRef.current || inFlightRef.current) return
+    inFlightRef.current = true
+    try {
+      const res = await fetch('/api/track/lead', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(p),
+        keepalive: true,
+      })
+      if (res.ok) {
+        lastSentRef.current = key
+        setCaptured(true)
+        // Remember the email so the checkout can prefill it (no re-asking).
+        try { localStorage.setItem('hi2b_email', p.email) } catch { /* ignore */ }
+      }
+    } catch {
+      // Silent — capture is best-effort
+    } finally {
+      inFlightRef.current = false
+    }
+  }, [])
+
+  const payloadKey = JSON.stringify(payload)
+
+  useEffect(() => {
+    if (timerRef.current) clearTimeout(timerRef.current)
+    timerRef.current = setTimeout(() => { void send(payload) }, debounceMs)
+    return () => { if (timerRef.current) clearTimeout(timerRef.current) }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [payloadKey, debounceMs])
+
+  const capture = useCallback(() => { void send(payload) }, [payloadKey, send]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  return { captured, capture }
+}
diff --git a/src/hooks/useTrackingParams.ts b/src/hooks/useTrackingParams.ts
new file mode 100644
index 0000000..db35de4
--- /dev/null
+++ b/src/hooks/useTrackingParams.ts
@@ -0,0 +1,57 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+export interface TrackingParams {
+  ref?: string
+  utm_source?: string
+  utm_medium?: string
+  utm_campaign?: string
+  source_lp?: string
+}
+
+const STORAGE_KEY = 'hi2b_tracking'
+
+export function useTrackingParams(sourceLp?: string): TrackingParams {
+  const [params, setParams] = useState<TrackingParams>({})
+
+  useEffect(() => {
+    // Read from URL
+    const url = new URL(window.location.href)
+    const ref = url.searchParams.get('ref') || undefined
+    const utm_source = url.searchParams.get('utm_source') || undefined
+    const utm_medium = url.searchParams.get('utm_medium') || undefined
+    const utm_campaign = url.searchParams.get('utm_campaign') || undefined
+
+    // Merge with sessionStorage (URL params take priority)
+    const stored = JSON.parse(sessionStorage.getItem(STORAGE_KEY) || '{}')
+    const merged: TrackingParams = {
+      ref: ref || stored.ref,
+      utm_source: utm_source || stored.utm_source,
+      utm_medium: utm_medium || stored.utm_medium,
+      utm_campaign: utm_campaign || stored.utm_campaign,
+      source_lp: sourceLp || stored.source_lp,
+    }
+
+    // Persist
+    sessionStorage.setItem(STORAGE_KEY, JSON.stringify(merged))
+    setParams(merged)
+
+    // Record page view
+    if (sourceLp) {
+      fetch('/api/track/pageview', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          page_slug: sourceLp,
+          referral_code: merged.ref,
+          utm_source: merged.utm_source,
+          utm_medium: merged.utm_medium,
+          utm_campaign: merged.utm_campaign,
+        }),
+      }).catch(() => {})
+    }
+  }, [sourceLp])
+
+  return params
+}
diff --git a/src/lib/admin-auth.ts b/src/lib/admin-auth.ts
new file mode 100644
index 0000000..43b883a
--- /dev/null
+++ b/src/lib/admin-auth.ts
@@ -0,0 +1,72 @@
+import bcrypt from 'bcryptjs'
+import jwt from 'jsonwebtoken'
+import { cookies } from 'next/headers'
+import { randomBytes, createHash } from 'crypto'
+
+if (!process.env.JWT_SECRET || process.env.JWT_SECRET.length < 32) {
+  throw new Error('JWT_SECRET env var is required (≥32 chars)')
+}
+const BASE_SECRET: string = process.env.JWT_SECRET
+const ADMIN_SECRET = createHash('sha256').update(BASE_SECRET + '::admin').digest('hex')
+const AFFILIATE_SECRET = createHash('sha256').update(BASE_SECRET + '::affiliate').digest('hex')
+
+// ─── Admin Auth ────────────────────────────────────────────
+
+export function createAdminToken(payload: { id: number; email: string; role: string }): string {
+  return jwt.sign({ ...payload, type: 'admin' }, ADMIN_SECRET, { expiresIn: '24h' })
+}
+
+export function verifyAdminToken(token: string): { id: number; email: string; role: string } | null {
+  try {
+    const decoded = jwt.verify(token, ADMIN_SECRET) as any
+    if (decoded.type !== 'admin') return null
+    return decoded
+  } catch { return null }
+}
+
+export async function getAdminSession() {
+  const cookieStore = await cookies()
+  const token = cookieStore.get('admin_token')?.value
+  if (!token) return null
+  return verifyAdminToken(token)
+}
+
+// ─── Affiliate Auth ────────────────────────────────────────
+
+export function createAffiliateToken(payload: { id: number; email: string; referral_code: string }): string {
+  return jwt.sign({ ...payload, type: 'affiliate' }, AFFILIATE_SECRET, { expiresIn: '7d' })
+}
+
+export function verifyAffiliateToken(token: string): { id: number; email: string; referral_code: string } | null {
+  try {
+    const decoded = jwt.verify(token, AFFILIATE_SECRET) as any
+    if (decoded.type !== 'affiliate') return null
+    return decoded
+  } catch { return null }
+}
+
+export async function getAffiliateSession() {
+  const cookieStore = await cookies()
+  const token = cookieStore.get('affiliate_token')?.value
+  if (!token) return null
+  return verifyAffiliateToken(token)
+}
+
+// ─── Shared ────────────────────────────────────────────────
+
+export async function hashPassword(password: string): Promise<string> {
+  return bcrypt.hash(password, 12)
+}
+
+export async function verifyPassword(password: string, hash: string): Promise<boolean> {
+  return bcrypt.compare(password, hash)
+}
+
+export function generateReferralCode(name: string): string {
+  const prefix = name.replace(/[^a-zA-Z]/g, '').substring(0, 3).toUpperCase() || 'AFF'
+  const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789'
+  const bytes = randomBytes(4)
+  let suffix = ''
+  for (let i = 0; i < 4; i++) suffix += chars[bytes[i] % chars.length]
+  return `${prefix}${suffix}`
+}
diff --git a/src/lib/auth-utils.ts b/src/lib/auth-utils.ts
new file mode 100644
index 0000000..78a68e0
--- /dev/null
+++ b/src/lib/auth-utils.ts
@@ -0,0 +1,48 @@
+import bcrypt from 'bcryptjs'
+import jwt from 'jsonwebtoken'
+import { cookies } from 'next/headers'
+import { randomBytes } from 'crypto'
+
+if (!process.env.JWT_SECRET || process.env.JWT_SECRET.length < 32) {
+  throw new Error('JWT_SECRET env var is required (≥32 chars)')
+}
+const JWT_SECRET: string = process.env.JWT_SECRET
+const TOKEN_EXPIRY = '7d'
+
+export async function hashPassword(password: string): Promise<string> {
+  return bcrypt.hash(password, 12)
+}
+
+export async function verifyPassword(password: string, hash: string): Promise<boolean> {
+  return bcrypt.compare(password, hash)
+}
+
+export function createToken(payload: { id: number; email: string }): string {
+  return jwt.sign(payload, JWT_SECRET, { expiresIn: TOKEN_EXPIRY })
+}
+
+export function verifyToken(token: string): { id: number; email: string } | null {
+  try {
+    return jwt.verify(token, JWT_SECRET) as { id: number; email: string }
+  } catch {
+    return null
+  }
+}
+
+export async function getSessionUser(): Promise<{ id: number; email: string } | null> {
+  const cookieStore = await cookies()
+  const token = cookieStore.get('auth_token')?.value
+  if (!token) return null
+  return verifyToken(token)
+}
+
+export function generateResetToken(): string {
+  return randomBytes(32).toString('hex')
+}
+
+export function generateCertificateNumber(): string {
+  const prefix = 'MPV'
+  const year = new Date().getFullYear()
+  const random = randomBytes(4).toString('hex').toUpperCase().slice(0, 6)
+  return `${prefix}-${year}-${random}`
+}
diff --git a/src/lib/db-admin.ts b/src/lib/db-admin.ts
new file mode 100644
index 0000000..d351b1d
--- /dev/null
+++ b/src/lib/db-admin.ts
@@ -0,0 +1,197 @@
+import pool from './db-mysql'
+
+// ─── Admin Stats ───────────────────────────────────────────
+
+export async function getKPIStats() {
+  const [salesRow] = await pool.execute(
+    `SELECT COUNT(*) as total_sales, COALESCE(SUM(amount),0) as total_revenue
+     FROM signups WHERE payment_status IN ('active','completed')`
+  ) as any[]
+
+  const [mrrRow] = await pool.execute(
+    `SELECT COUNT(*) * 29 as mrr FROM signups WHERE payment_status = 'active' AND payment_plan_months > 1`
+  ) as any[]
+
+  const [leadsRow] = await pool.execute(`SELECT COUNT(*) as total_leads FROM ebook_leads`) as any[]
+
+  const [viewsRow] = await pool.execute(`SELECT COUNT(*) as total_views FROM page_views`) as any[]
+
+  const totalSales = salesRow[0]?.total_sales || 0
+  const totalLeads = leadsRow[0]?.total_leads || 0
+  const conversionRate = totalLeads > 0 ? ((totalSales / totalLeads) * 100).toFixed(1) : '0'
+
+  return {
+    totalSales: salesRow[0]?.total_sales || 0,
+    totalRevenue: parseFloat(salesRow[0]?.total_revenue || 0),
+    mrr: mrrRow[0]?.mrr || 0,
+    totalLeads,
+    totalViews: viewsRow[0]?.total_views || 0,
+    conversionRate: parseFloat(conversionRate),
+  }
+}
+
+// ─── Sales by LP ───────────────────────────────────────────
+
+export async function getSalesByLP() {
+  const [rows] = await pool.execute(
+    `SELECT COALESCE(source_lp,'unknown') as name, COUNT(*) as count, COALESCE(SUM(amount),0) as revenue
+     FROM signups WHERE payment_status IN ('active','completed')
+     GROUP BY source_lp ORDER BY count DESC LIMIT 20`
+  ) as any[]
+  return rows
+}
+
+// ─── Sales by Source ───────────────────────────────────────
+
+export async function getSalesBySource() {
+  const [rows] = await pool.execute(
+    `SELECT COALESCE(utm_source,'direct') as name, COUNT(*) as count, COALESCE(SUM(amount),0) as revenue
+     FROM signups WHERE payment_status IN ('active','completed')
+     GROUP BY utm_source ORDER BY count DESC`
+  ) as any[]
+  return rows
+}
+
+// ─── Sales by Affiliate ───────────────────────────────────
+
+export async function getSalesByAffiliate() {
+  const [rows] = await pool.execute(
+    `SELECT a.name, a.referral_code, COUNT(ar.id) as sales, COALESCE(SUM(ar.commission_amount),0) as total_commission
+     FROM affiliates a
+     LEFT JOIN affiliate_referrals ar ON a.id = ar.affiliate_id
+     GROUP BY a.id ORDER BY sales DESC`
+  ) as any[]
+  return rows
+}
+
+// ─── Revenue Over Time ─────────────────────────────────────
+
+export async function getRevenueOverTime(days: number = 30) {
+  const [rows] = await pool.execute(
+    `SELECT DATE(created_at) as date, COUNT(*) as sales, COALESCE(SUM(amount),0) as revenue
+     FROM signups WHERE payment_status IN ('active','completed') AND created_at >= DATE_SUB(NOW(), INTERVAL ? DAY)
+     GROUP BY DATE(created_at) ORDER BY date`,
+    [days]
+  ) as any[]
+  return rows
+}
+
+// ─── Funnel Data ───────────────────────────────────────────
+
+export async function getFunnelData(days: number = 30) {
+  const since = `DATE_SUB(NOW(), INTERVAL ${days} DAY)`
+
+  const [views] = await pool.execute(`SELECT COUNT(*) as c FROM page_views WHERE created_at >= ${since}`) as any[]
+  const [leads] = await pool.execute(`SELECT COUNT(*) as c FROM ebook_leads WHERE created_at >= ${since}`) as any[]
+  const [signups] = await pool.execute(`SELECT COUNT(*) as c FROM signups WHERE created_at >= ${since}`) as any[]
+  const [paid] = await pool.execute(`SELECT COUNT(*) as c FROM signups WHERE payment_status IN ('active','completed') AND created_at >= ${since}`) as any[]
+
+  return {
+    pageViews: views[0]?.c || 0,
+    ebookDownloads: leads[0]?.c || 0,
+    signups: signups[0]?.c || 0,
+    paidCustomers: paid[0]?.c || 0,
+  }
+}
+
+// ─── Paginated Sales ───────────────────────────────────────
+
+export async function getSales(params: {
+  page?: number
+  limit?: number
+  status?: string
+  source_lp?: string
+  affiliate_id?: number
+  utm_source?: string
+  search?: string
+}) {
+  const { page = 1, limit = 25, status, source_lp, affiliate_id, utm_source, search } = params
+  const offset = (page - 1) * limit
+  const conditions: string[] = []
+  const values: any[] = []
+
+  if (status) { conditions.push('s.payment_status = ?'); values.push(status) }
+  if (source_lp) { conditions.push('s.source_lp = ?'); values.push(source_lp) }
+  if (affiliate_id) { conditions.push('s.affiliate_id = ?'); values.push(affiliate_id) }
+  if (utm_source) { conditions.push('s.utm_source = ?'); values.push(utm_source) }
+  if (search) { conditions.push('(s.email LIKE ? OR s.full_name LIKE ?)'); values.push(`%${search}%`, `%${search}%`) }
+
+  const where = conditions.length > 0 ? 'WHERE ' + conditions.join(' AND ') : ''
+
+  const [countRow] = await pool.execute(`SELECT COUNT(*) as total FROM signups s ${where}`, values) as any[]
+  const total = countRow[0]?.total || 0
+
+  const [rows] = await pool.execute(
+    `SELECT s.*,
+            a.name as affiliate_name,
+            a.referral_code as aff_code,
+            (SELECT COUNT(*) FROM payments p
+              WHERE p.signup_id = s.id AND p.status = 'completed') as payments_made
+     FROM signups s LEFT JOIN affiliates a ON s.affiliate_id = a.id
+     ${where} ORDER BY s.created_at DESC LIMIT ? OFFSET ?`,
+    [...values, limit, offset]
+  ) as any[]
+
+  return { data: rows, total, page, limit, totalPages: Math.ceil(total / limit) }
+}
+
+// ─── Paginated Leads ───────────────────────────────────────
+
+export async function getLeads(params: { page?: number; limit?: number; search?: string }) {
+  const { page = 1, limit = 25, search } = params
+  const offset = (page - 1) * limit
+  const where = search ? 'WHERE email LIKE ? OR name LIKE ?' : ''
+  const values = search ? [`%${search}%`, `%${search}%`] : []
+
+  const [countRow] = await pool.execute(`SELECT COUNT(*) as total FROM ebook_leads ${where}`, values) as any[]
+  const [rows] = await pool.execute(
+    `SELECT * FROM ebook_leads ${where} ORDER BY created_at DESC LIMIT ? OFFSET ?`,
+    [...values, limit, offset]
+  ) as any[]
+
+  return { data: rows, total: countRow[0]?.total || 0, page, limit }
+}
+
+// ─── Affiliate Management ──────────────────────────────────
+
+export async function getAffiliates() {
+  const [rows] = await pool.execute(
+    `SELECT a.*, COUNT(ar.id) as referral_count, COALESCE(SUM(CASE WHEN ar.status != 'rejected' THEN ar.commission_amount ELSE 0 END),0) as earned
+     FROM affiliates a LEFT JOIN affiliate_referrals ar ON a.id = ar.affiliate_id
+     GROUP BY a.id ORDER BY a.created_at DESC`
+  ) as any[]
+  return rows
+}
+
+export async function updateAffiliateStatus(id: number, status: string) {
+  await pool.execute('UPDATE affiliates SET status = ? WHERE id = ?', [status, id])
+}
+
+// ─── Payouts ───────────────────────────────────────────────
+
+export async function getPayouts() {
+  const [rows] = await pool.execute(
+    `SELECT ap.*, a.name as affiliate_name, a.email as affiliate_email
+     FROM affiliate_payouts ap JOIN affiliates a ON ap.affiliate_id = a.id
+     ORDER BY ap.created_at DESC`
+  ) as any[]
+  return rows
+}
+
+export async function createPayout(affiliateId: number, amount: number, method: string, reference: string) {
+  const [result] = await pool.execute(
+    `INSERT INTO affiliate_payouts (affiliate_id, amount, method, reference, status) VALUES (?, ?, ?, ?, 'completed')`,
+    [affiliateId, amount, method, reference]
+  ) as any[]
+
+  // Update affiliate totals
+  await pool.execute('UPDATE affiliates SET total_paid = total_paid + ? WHERE id = ?', [amount, affiliateId])
+
+  // Mark referrals as paid
+  await pool.execute(
+    `UPDATE affiliate_referrals SET status = 'paid', paid_at = NOW() WHERE affiliate_id = ? AND status = 'approved'`,
+    [affiliateId]
+  )
+
+  return (result as any).insertId
+}
diff --git a/src/lib/db-mysql.ts b/src/lib/db-mysql.ts
new file mode 100644
index 0000000..682ad08
--- /dev/null
+++ b/src/lib/db-mysql.ts
@@ -0,0 +1,296 @@
+import mysql from 'mysql2/promise'
+
+const { MYSQL_HOST, MYSQL_USER, MYSQL_PASSWORD, MYSQL_DATABASE } = process.env
+if (!MYSQL_HOST || !MYSQL_USER || !MYSQL_PASSWORD || !MYSQL_DATABASE) {
+  throw new Error('MYSQL_HOST, MYSQL_USER, MYSQL_PASSWORD, and MYSQL_DATABASE env vars are required')
+}
+
+const pool = mysql.createPool({
+  host: MYSQL_HOST,
+  user: MYSQL_USER,
+  password: MYSQL_PASSWORD,
+  database: MYSQL_DATABASE,
+  waitForConnections: true,
+  connectionLimit: 10,
+})
+
+export default pool
+
+// ─── Signups ───────────────────────────────────────────────
+
+export async function createSignup(data: {
+  email: string
+  full_name?: string | null
+  phone?: string | null
+  amount?: number | null
+  monthly_payment?: number | null
+  payment_plan_months?: number | null
+  payment_status?: string | null
+  source_lp?: string
+  referral_code?: string
+  utm_source?: string
+  utm_medium?: string
+  utm_campaign?: string
+}) {
+  // Apply sensible defaults so the client dashboard never crashes on nulls.
+  const full_name = data.full_name ?? ''
+  const phone = data.phone ?? ''
+  const amount = data.amount ?? 290
+  const monthly_payment = data.monthly_payment ?? 29
+  const payment_plan_months = data.payment_plan_months ?? 10
+  const payment_status = data.payment_status ?? 'pending'
+
+  const [existing] = await pool.execute('SELECT * FROM signups WHERE email = ?', [data.email]) as any[]
+
+  if (existing.length > 0) {
+    await pool.execute(
+      `UPDATE signups SET payment_status = ?, full_name = ?, phone = ?, amount = ?, monthly_payment = ?,
+       payment_plan_months = ?, source_lp = COALESCE(?, source_lp), referral_code = COALESCE(?, referral_code),
+       utm_source = COALESCE(?, utm_source), utm_medium = COALESCE(?, utm_medium), utm_campaign = COALESCE(?, utm_campaign)
+       WHERE email = ?`,
+      [payment_status, full_name, phone, amount, monthly_payment, payment_plan_months,
+       data.source_lp || null, data.referral_code || null,
+       data.utm_source || null, data.utm_medium || null, data.utm_campaign || null, data.email]
+    )
+    // Re-fetch to get the ID
+    const [updated] = await pool.execute('SELECT * FROM signups WHERE email = ?', [data.email]) as any[]
+    return { error: null, data: updated[0] }
+  }
+
+  // Look up affiliate by referral code
+  let affiliateId: number | null = null
+  if (data.referral_code) {
+    const [aff] = await pool.execute('SELECT id FROM affiliates WHERE referral_code = ? AND status = ?', [data.referral_code, 'active']) as any[]
+    if (aff.length > 0) affiliateId = aff[0].id
+  }
+
+  const [result] = await pool.execute(
+    `INSERT INTO signups (email, full_name, phone, amount, monthly_payment, payment_plan_months, payment_status,
+     source_lp, affiliate_id, referral_code, utm_source, utm_medium, utm_campaign)
+     VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`,
+    [data.email, full_name, phone, amount, monthly_payment, payment_plan_months, payment_status,
+     data.source_lp || null, affiliateId, data.referral_code || null,
+     data.utm_source || null, data.utm_medium || null, data.utm_campaign || null]
+  ) as any[]
+
+  const [rows] = await pool.execute('SELECT * FROM signups WHERE id = ?', [(result as any).insertId]) as any[]
+  return { error: null, data: rows[0] }
+}
+
+// Strict whitelist of columns that updateSignup is allowed to modify. Any key
+// outside this set is rejected to prevent SQL injection via attacker-controlled
+// object keys.
+const UPDATE_SIGNUP_ALLOWED_COLUMNS = new Set([
+  'full_name', 'phone', 'amount', 'monthly_payment', 'payment_plan_months',
+  'payment_status', 'certificate_number', 'certificate_expires', 'subscription_id',
+  'source_lp', 'affiliate_id', 'referral_code', 'utm_source', 'utm_medium',
+  'utm_campaign', 'password_hash', 'reset_token', 'reset_token_expires', 'destination',
+])
+
+export async function updateSignup(id: number, updates: Record<string, any>) {
+  const keys = Object.keys(updates)
+  for (const key of keys) {
+    if (!UPDATE_SIGNUP_ALLOWED_COLUMNS.has(key)) {
+      throw new Error(`updateSignup: disallowed column "${key}"`)
+    }
+  }
+  if (keys.length === 0) return
+  const fields = keys.map(k => `${k} = ?`).join(', ')
+  const values = keys.map(k => updates[k])
+  await pool.execute(`UPDATE signups SET ${fields} WHERE id = ?`, [...values, id])
+}
+
+// ─── Payments ──────────────────────────────────────────────
+
+export async function createPayment(data: {
+  signup_id: number
+  payment_method?: string
+  amount: number
+  currency?: string
+  payment_type?: string
+  status?: string
+  transaction_id?: string
+}) {
+  const [result] = await pool.execute(
+    `INSERT INTO payments (signup_id, payment_method, amount, currency, payment_type, status, transaction_id)
+     VALUES (?, ?, ?, ?, ?, ?, ?)`,
+    [data.signup_id, data.payment_method || 'nmi', data.amount, data.currency || 'USD',
+     data.payment_type || 'initial', data.status || 'completed', data.transaction_id || null]
+  ) as any[]
+  return { insertId: (result as any).insertId }
+}
+
+// ─── Ebook Leads ───────────────────────────────────────────
+
+export async function createEbookLead(data: {
+  email: string
+  name?: string
+  source_lp?: string
+  utm_source?: string
+  utm_medium?: string
+  utm_campaign?: string
+}) {
+  try {
+    await pool.execute(
+      `INSERT INTO ebook_leads (email, name, source_lp, utm_source, utm_medium, utm_campaign) VALUES (?, ?, ?, ?, ?, ?)
+       ON DUPLICATE KEY UPDATE source_lp = COALESCE(VALUES(source_lp), source_lp),
+       utm_source = COALESCE(VALUES(utm_source), utm_source)`,
+      [data.email, data.name || null, data.source_lp || 'unknown',
+       data.utm_source || null, data.utm_medium || null, data.utm_campaign || null]
+    )
+    return { error: null }
+  } catch (err) {
+    return { error: err }
+  }
+}
+
+// ─── Early Leads (debounced input capture, pre-submit) ─────
+
+let earlyLeadsTableReady: Promise<void> | null = null
+function ensureEarlyLeadsTable(): Promise<void> {
+  if (!earlyLeadsTableReady) {
+    earlyLeadsTableReady = pool.execute(`
+      CREATE TABLE IF NOT EXISTS early_leads (
+        id INT AUTO_INCREMENT PRIMARY KEY,
+        email VARCHAR(255) NOT NULL UNIQUE,
+        phone VARCHAR(50),
+        name VARCHAR(255),
+        ip_address VARCHAR(64),
+        source_lp VARCHAR(100),
+        referral_code VARCHAR(50),
+        utm_source VARCHAR(100),
+        utm_medium VARCHAR(100),
+        utm_campaign VARCHAR(100),
+        confirmed TINYINT(1) NOT NULL DEFAULT 0,
+        confirmed_at TIMESTAMP NULL,
+        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+        updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+        INDEX idx_confirmed (confirmed),
+        INDEX idx_created (created_at)
+      )
+    `).then(() => undefined)
+  }
+  return earlyLeadsTableReady
+}
+
+export async function upsertEarlyLead(data: {
+  email: string
+  phone?: string | null
+  name?: string | null
+  ip_address?: string | null
+  source_lp?: string | null
+  referral_code?: string | null
+  utm_source?: string | null
+  utm_medium?: string | null
+  utm_campaign?: string | null
+}) {
+  await ensureEarlyLeadsTable()
+  await pool.execute(
+    `INSERT INTO early_leads
+      (email, phone, name, ip_address, source_lp, referral_code, utm_source, utm_medium, utm_campaign)
+      VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)
+     ON DUPLICATE KEY UPDATE
+      phone = COALESCE(VALUES(phone), phone),
+      name = COALESCE(VALUES(name), name),
+      ip_address = COALESCE(VALUES(ip_address), ip_address),
+      source_lp = COALESCE(VALUES(source_lp), source_lp),
+      referral_code = COALESCE(VALUES(referral_code), referral_code),
+      utm_source = COALESCE(VALUES(utm_source), utm_source),
+      utm_medium = COALESCE(VALUES(utm_medium), utm_medium),
+      utm_campaign = COALESCE(VALUES(utm_campaign), utm_campaign)`,
+    [data.email, data.phone || null, data.name || null, data.ip_address || null,
+     data.source_lp || null, data.referral_code || null,
+     data.utm_source || null, data.utm_medium || null, data.utm_campaign || null]
+  )
+}
+
+export async function confirmEarlyLead(email: string) {
+  await ensureEarlyLeadsTable()
+  await pool.execute(
+    'UPDATE early_leads SET confirmed = 1, confirmed_at = CURRENT_TIMESTAMP WHERE email = ?',
+    [email]
+  )
+}
+
+// ─── Affiliate Short Codes (2-char vanity for hi2b.com/pay/XX) ─
+
+let affiliateShortCodeReady: Promise<void> | null = null
+function ensureAffiliateShortCodeColumn(): Promise<void> {
+  if (!affiliateShortCodeReady) {
+    affiliateShortCodeReady = (async () => {
+      // Add column if missing — MySQL has no IF NOT EXISTS for ADD COLUMN, so catch dup error
+      try {
+        await pool.execute('ALTER TABLE affiliates ADD COLUMN short_code VARCHAR(8) UNIQUE')
+      } catch (e: any) {
+        if (!String(e?.code || e?.message).match(/Duplicate column|already exists/i)) throw e
+      }
+    })()
+  }
+  return affiliateShortCodeReady
+}
+
+// Confusable-free alphabet for 2-char codes (32 chars = 1024 combinations)
+const SC_ALPHA = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789'
+
+async function generateUniqueShortCode(): Promise<string> {
+  await ensureAffiliateShortCodeColumn()
+  for (let attempt = 0; attempt < 50; attempt++) {
+    const code = SC_ALPHA[Math.floor(Math.random() * SC_ALPHA.length)] +
+                 SC_ALPHA[Math.floor(Math.random() * SC_ALPHA.length)]
+    const [rows] = await pool.execute('SELECT id FROM affiliates WHERE short_code = ?', [code]) as any[]
+    if (rows.length === 0) return code
+  }
+  throw new Error('No free short codes — increase to 3 chars')
+}
+
+export async function ensureAffiliateShortCode(affiliateId: number): Promise<string> {
+  await ensureAffiliateShortCodeColumn()
+  const [rows] = await pool.execute('SELECT short_code FROM affiliates WHERE id = ?', [affiliateId]) as any[]
+  if (rows[0]?.short_code) return rows[0].short_code
+  const code = await generateUniqueShortCode()
+  await pool.execute('UPDATE affiliates SET short_code = ? WHERE id = ?', [code, affiliateId])
+  return code
+}
+
+export async function getAffiliateByShortCode(code: string): Promise<{ id: number; referral_code: string; name: string } | null> {
+  await ensureAffiliateShortCodeColumn()
+  const [rows] = await pool.execute(
+    'SELECT id, referral_code, name FROM affiliates WHERE short_code = ? AND status = ?',
+    [code.toUpperCase(), 'active']
+  ) as any[]
+  return rows.length > 0 ? rows[0] : null
+}
+
+// ─── Affiliate Referral (called after successful payment) ──
+
+export async function createAffiliateReferral(signupId: number) {
+  // Get signup with affiliate info
+  const [signups] = await pool.execute('SELECT * FROM signups WHERE id = ?', [signupId]) as any[]
+  if (signups.length === 0) return
+
+  const signup = signups[0]
+  if (!signup.affiliate_id) return
+
+  // Get affiliate commission rate
+  const [affs] = await pool.execute('SELECT * FROM affiliates WHERE id = ? AND status = ?', [signup.affiliate_id, 'active']) as any[]
+  if (affs.length === 0) return
+
+  const affiliate = affs[0]
+  const commissionAmount = (signup.monthly_payment || 29) * (affiliate.commission_rate / 100)
+
+  // Check for duplicate
+  const [existing] = await pool.execute(
+    'SELECT id FROM affiliate_referrals WHERE affiliate_id = ? AND signup_id = ?',
+    [affiliate.id, signupId]
+  ) as any[]
+  if (existing.length > 0) return
+
+  // Create referral
+  await pool.execute(
+    `INSERT INTO affiliate_referrals (affiliate_id, signup_id, commission_amount, status) VALUES (?, ?, ?, 'pending')`,
+    [affiliate.id, signupId, commissionAmount]
+  )
+
+  // Update affiliate total_earned
+  await pool.execute('UPDATE affiliates SET total_earned = total_earned + ? WHERE id = ?', [commissionAmount, affiliate.id])
+}
diff --git a/src/lib/email.ts b/src/lib/email.ts
new file mode 100644
index 0000000..260c7c8
--- /dev/null
+++ b/src/lib/email.ts
@@ -0,0 +1,414 @@
+const MAIL_API_URL = process.env.MAIL_API_URL || 'https://mail.3ava.com/api/emails'
+const MAIL_API_KEY = process.env.MAIL_API_KEY
+const FROM = process.env.EMAIL_FROM || 'Mexico Paradise Vacations <noreply@hi2b.com>'
+const REPLY_TO = process.env.EMAIL_REPLY_TO || 'support@724vacation.com'
+const APP_URL = process.env.NEXT_PUBLIC_APP_URL || 'https://hi2b.com'
+
+const HEADER = `
+<div style="background: linear-gradient(135deg, #E8651A, #DC2626); padding: 30px 20px; text-align: center;">
+  <h1 style="color: white; margin: 0; font-size: 24px; font-family: Georgia, serif; letter-spacing: 1px;">Mexico Paradise Vacations</h1>
+  <p style="color: rgba(255,255,255,0.8); margin: 5px 0 0; font-size: 13px;">Your All-Inclusive Paradise Awaits</p>
+</div>`
+
+const FOOTER = `
+<div style="border-top: 1px solid #eee; padding: 20px; text-align: center; background: #f9fafb;">
+  <p style="color: #999; font-size: 12px; margin: 0;">Mexico Paradise Vacations &bull; hi2b.com</p>
+  <p style="color: #999; font-size: 12px; margin: 4px 0;">Toll-Free: <a href="tel:888-602-2424" style="color: #E8651A;">888-602-2424</a></p>
+  <p style="color: #bbb; font-size: 11px; margin: 8px 0 0;">Mon-Fri 9am-8pm &bull; Sat 10am-4pm EST</p>
+</div>`
+
+function wrap(content: string) {
+  return `
+<!DOCTYPE html>
+<html>
+<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"></head>
+<body style="margin:0; padding:0; background:#f4f4f5; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;">
+  <div style="max-width: 560px; margin: 0 auto; background: white; border-radius: 12px; overflow: hidden; margin-top: 20px; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.08);">
+    ${HEADER}
+    <div style="padding: 30px 24px;">
+      ${content}
+    </div>
+    ${FOOTER}
+  </div>
+</body>
+</html>`
+}
+
+function btn(text: string, url: string, color = '#E8651A') {
+  return `<div style="text-align: center; margin: 28px 0;">
+    <a href="${url}" style="background-color: ${color}; color: white; padding: 14px 36px; text-decoration: none; border-radius: 8px; font-weight: bold; font-size: 16px; display: inline-block;">${text}</a>
+  </div>`
+}
+
+interface SendEmailInput {
+  to: string | string[]
+  subject: string
+  html: string
+  text?: string
+  from?: string
+  replyTo?: string
+}
+
+/**
+ * Send a transactional email via 3AVA Mail.
+ * Never throws into the request path — logs and resolves with the API response or null.
+ */
+async function sendMail(input: SendEmailInput): Promise<{ id?: string; status?: string } | null> {
+  if (!MAIL_API_KEY) {
+    console.error('[mail] MAIL_API_KEY not configured; skipping send to', input.to)
+    return null
+  }
+  const replyTo = input.replyTo ?? REPLY_TO
+  const body = {
+    from: input.from ?? FROM,
+    to: Array.isArray(input.to) ? input.to : [input.to],
+    subject: input.subject,
+    html: input.html,
+    ...(input.text ? { text: input.text } : {}),
+    ...(replyTo ? { reply_to: [replyTo] } : {}),
+  }
+  try {
+    const res = await fetch(MAIL_API_URL, {
+      method: 'POST',
+      headers: {
+        Authorization: `Bearer ${MAIL_API_KEY}`,
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(body),
+    })
+    const data = await res.json().catch(() => ({}))
+    if (!res.ok) {
+      console.error('[mail] send failed', res.status, data)
+      return null
+    }
+    return data
+  } catch (err) {
+    console.error('[mail] network error', err)
+    return null
+  }
+}
+
+// ─── Welcome / Payment Confirmation ───────────────────────
+
+export async function sendWelcomeEmail(email: string, name: string, certificateNumber: string, paymentType: string, amount: number) {
+  return sendMail({
+    to: email,
+    subject: 'Welcome to Paradise! Your Vacation Certificate is Ready',
+    html: wrap(`
+      <h2 style="color: #1a1a2e; margin: 0 0 8px;">Welcome to Paradise, ${name}!</h2>
+      <p style="color: #666; line-height: 1.6;">Congratulations! Your vacation certificate has been activated. Here are your details:</p>
+
+      <div style="background: linear-gradient(135deg, #FFF7ED, #FEF3C7); border: 2px solid #F59E0B; border-radius: 12px; padding: 24px; margin: 20px 0; text-align: center;">
+        <p style="color: #92400E; font-size: 12px; text-transform: uppercase; letter-spacing: 2px; margin: 0 0 8px;">Certificate Number</p>
+        <p style="color: #E8651A; font-size: 28px; font-weight: bold; margin: 0; letter-spacing: 3px; font-family: monospace;">${certificateNumber}</p>
+      </div>
+
+      <div style="background: #f8f9fa; border-radius: 8px; padding: 16px; margin: 16px 0;">
+        <p style="margin: 0 0 4px; color: #333; font-size: 14px;"><strong>Payment:</strong> $${amount} ${paymentType === 'monthly' ? '(first of 10 monthly payments)' : '(one-time payment)'}</p>
+        <p style="margin: 0 0 4px; color: #333; font-size: 14px;"><strong>Package:</strong> 5 Days / 4 Nights All-Inclusive</p>
+        <p style="margin: 0 0 4px; color: #333; font-size: 14px;"><strong>Destinations:</strong> Cancun, Cabo, Riviera Maya, Puerto Vallarta</p>
+        <p style="margin: 0; color: #333; font-size: 14px;"><strong>Valid for:</strong> 18 months from today</p>
+      </div>
+
+      <div style="background: #ECFDF5; border: 1px solid #A7F3D0; border-radius: 8px; padding: 16px; margin: 16px 0; text-align: center;">
+        <p style="color: #065F46; font-weight: bold; margin: 0 0 4px;">100% Money-Back Guarantee</p>
+        <p style="color: #059669; font-size: 13px; margin: 0;">Full refund within 30 days, no questions asked.</p>
+      </div>
+
+      <h3 style="color: #1a1a2e; margin: 24px 0 12px;">What's Next?</h3>
+      <ol style="color: #666; line-height: 1.8; padding-left: 20px;">
+        <li>Set up your account password below</li>
+        <li>Log in to your dashboard to view your certificate</li>
+        <li><strong>Call 888-602-2424 to book your travel dates!</strong></li>
+      </ol>
+
+      ${btn('Set Up My Account', `${APP_URL}/dashboard/login`)}
+
+      <div style="background: #EFF6FF; border: 1px solid #BFDBFE; border-radius: 8px; padding: 16px; text-align: center;">
+        <p style="color: #1E40AF; font-size: 14px; margin: 0 0 4px;">Ready to book? Call us now!</p>
+        <p style="color: #1E40AF; font-size: 24px; font-weight: bold; margin: 0;"><a href="tel:888-602-2424" style="color: #1E40AF; text-decoration: none;">888-602-2424</a></p>
+      </div>
+    `),
+  })
+}
+
+// ─── Payment Receipt ──────────────────────────────────────
+
+export async function sendPaymentReceiptEmail(email: string, name: string, amount: number, transactionId: string, paymentNumber: number, totalPayments: number) {
+  return sendMail({
+    to: email,
+    subject: `Payment Received — $${amount.toFixed(2)} — Mexico Paradise Vacations`,
+    html: wrap(`
+      <h2 style="color: #1a1a2e; margin: 0 0 8px;">Payment Received</h2>
+      <p style="color: #666;">Hi ${name}, your payment has been processed successfully.</p>
+
+      <div style="border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; margin: 20px 0;">
+        <div style="background: #f9fafb; padding: 12px 16px; border-bottom: 1px solid #e5e7eb;">
+          <p style="margin: 0; color: #333; font-weight: bold;">Payment Receipt</p>
+        </div>
+        <div style="padding: 16px;">
+          <table style="width: 100%; font-size: 14px; color: #333;">
+            <tr><td style="padding: 6px 0; color: #666;">Amount</td><td style="padding: 6px 0; text-align: right; font-weight: bold;">$${amount.toFixed(2)}</td></tr>
+            <tr><td style="padding: 6px 0; color: #666;">Payment</td><td style="padding: 6px 0; text-align: right;">${paymentNumber} of ${totalPayments}</td></tr>
+            <tr><td style="padding: 6px 0; color: #666;">Transaction ID</td><td style="padding: 6px 0; text-align: right; font-family: monospace; font-size: 12px;">${transactionId}</td></tr>
+            <tr><td style="padding: 6px 0; color: #666;">Date</td><td style="padding: 6px 0; text-align: right;">${new Date().toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}</td></tr>
+          </table>
+        </div>
+      </div>
+
+      ${btn('View Billing History', `${APP_URL}/dashboard/billing`)}
+    `),
+  })
+}
+
+// ─── Password Reset ───────────────────────────────────────
+
+export async function sendPasswordResetEmail(email: string, token: string) {
+  const resetUrl = `${APP_URL}/dashboard/reset-password?token=${token}`
+
+  return sendMail({
+    to: email,
+    subject: 'Reset Your Password — Mexico Paradise Vacations',
+    html: wrap(`
+      <h2 style="color: #1a1a2e; margin: 0 0 8px;">Reset Your Password</h2>
+      <p style="color: #666; line-height: 1.6;">We received a request to reset your password. Click the button below to create a new one.</p>
+
+      ${btn('Reset My Password', resetUrl)}
+
+      <p style="color: #999; font-size: 13px; text-align: center;">This link expires in 1 hour. If you didn't request this, you can safely ignore this email.</p>
+
+      <div style="background: #f8f9fa; border-radius: 8px; padding: 12px; margin-top: 20px;">
+        <p style="color: #999; font-size: 12px; margin: 0;">If the button doesn't work, copy this link:</p>
+        <p style="color: #E8651A; font-size: 12px; word-break: break-all; margin: 4px 0 0;">${resetUrl}</p>
+      </div>
+    `),
+  })
+}
+
+// ─── Certificate Email ────────────────────────────────────
+
+export async function sendCertificateEmail(email: string, name: string, certificateNumber: string, expiryDate: string) {
+  return sendMail({
+    to: email,
+    subject: `Your Vacation Certificate #${certificateNumber} — Mexico Paradise Vacations`,
+    html: wrap(`
+      <h2 style="color: #1a1a2e; margin: 0 0 8px;">Your Vacation Certificate</h2>
+      <p style="color: #666;">Hi ${name}, here's your vacation certificate. Save this email for your records.</p>
+
+      <div style="background: linear-gradient(135deg, #FFF7ED, #FEF3C7); border: 3px solid #D97706; border-radius: 16px; padding: 32px; margin: 24px 0; text-align: center;">
+        <p style="color: #92400E; font-size: 11px; text-transform: uppercase; letter-spacing: 3px; margin: 0 0 4px;">Vacation Certificate</p>
+        <p style="color: #78350F; font-size: 20px; font-weight: bold; margin: 0 0 16px; font-family: Georgia, serif;">MEXICO PARADISE VACATIONS</p>
+        <p style="color: #92400E; font-size: 11px; text-transform: uppercase; letter-spacing: 2px; margin: 0 0 6px;">Presented To</p>
+        <p style="color: #1a1a2e; font-size: 26px; font-weight: bold; margin: 0 0 16px; font-family: Georgia, serif; border-bottom: 2px solid #D97706; display: inline-block; padding-bottom: 4px;">${name}</p>
+
+        <div style="display: flex; justify-content: center; gap: 20px; margin: 16px 0;">
+          <div>
+            <p style="color: #92400E; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; margin: 0 0 4px;">Certificate No.</p>
+            <p style="color: #E8651A; font-size: 16px; font-weight: bold; font-family: monospace; letter-spacing: 2px; margin: 0;">${certificateNumber}</p>
+          </div>
+        </div>
+
+        <p style="color: #92400E; font-size: 12px; margin: 12px 0 0;">Valid until: <strong>${expiryDate}</strong></p>
+
+        <div style="margin: 16px 0 0; padding-top: 16px; border-top: 1px dashed #D97706;">
+          <p style="color: #78350F; font-size: 13px; margin: 0;">5 Days / 4 Nights &bull; All-Inclusive &bull; 2 Guests</p>
+          <p style="color: #92400E; font-size: 12px; margin: 4px 0 0;">Cancun &bull; Cabo San Lucas &bull; Riviera Maya &bull; Puerto Vallarta</p>
+        </div>
+      </div>
+
+      <div style="background: #1E40AF; border-radius: 12px; padding: 24px; text-align: center; margin: 20px 0;">
+        <p style="color: #93C5FD; font-size: 13px; margin: 0 0 4px;">To Book Your Vacation, Call</p>
+        <p style="color: white; font-size: 32px; font-weight: bold; margin: 0; font-family: Georgia, serif;"><a href="tel:888-602-2424" style="color: white; text-decoration: none;">888-602-2424</a></p>
+        <p style="color: #93C5FD; font-size: 12px; margin: 8px 0 0;">Have your certificate number ready: <strong style="color: white;">${certificateNumber}</strong></p>
+      </div>
+
+      ${btn('View in Dashboard', `${APP_URL}/dashboard/certificate`)}
+    `),
+  })
+}
+
+// ─── Ebook Download Confirmation ──────────────────────────
+
+export async function sendEbookEmail(email: string, name?: string) {
+  return sendMail({
+    to: email,
+    subject: 'Your Free Guide: Budget Luxury Travel in Mexico',
+    html: wrap(`
+      <h2 style="color: #1a1a2e; margin: 0 0 8px;">Your Free Guide is Ready!</h2>
+      <p style="color: #666; line-height: 1.6;">Hi${name ? ` ${name}` : ''}, thanks for downloading our Budget Luxury Travel guide. If your download didn't start, use the link below.</p>
+
+      ${btn('Download Guide (PDF)', `${APP_URL}/ebooks/budget-luxury-travel.pdf`, '#16A34A')}
+
+      <div style="background: #FFF7ED; border: 1px solid #FDBA74; border-radius: 8px; padding: 20px; margin: 20px 0; text-align: center;">
+        <p style="color: #C2410C; font-weight: bold; font-size: 16px; margin: 0 0 8px;">Special Offer: $29/month</p>
+        <p style="color: #9A3412; font-size: 14px; margin: 0 0 4px;">5 Days / 4 Nights All-Inclusive Mexico Vacation</p>
+        <p style="color: #9A3412; font-size: 13px; margin: 0;">100% money-back guarantee. Book immediately after first payment.</p>
+        ${btn('Claim Your Vacation Certificate', APP_URL)}
+      </div>
+    `),
+  })
+}
+
+// ─── Internal Admin Notification ──────────────────────────
+
+const ADMIN_NOTIFY = process.env.ADMIN_NOTIFY_EMAIL || 'nick@724care.net'
+
+/** Notify the team of a new lead / signup. Fire-and-forget; never blocks the user. */
+export async function sendAdminNotify(subject: string, fields: Record<string, string | null | undefined>) {
+  const rows = Object.entries(fields)
+    .filter(([, v]) => v != null && String(v).trim() !== '')
+    .map(([k, v]) => `<tr><td style="padding:4px 10px;color:#666;">${k}</td><td style="padding:4px 10px;font-weight:bold;color:#1a1a2e;">${v}</td></tr>`)
+    .join('')
+  return sendMail({
+    to: ADMIN_NOTIFY,
+    subject,
+    html: wrap(`
+      <h2 style="color:#1a1a2e;margin:0 0 12px;">${subject}</h2>
+      <table style="width:100%;font-size:14px;border-collapse:collapse;">${rows}</table>
+    `),
+  })
+}
+
+// ─── Free Guide — Double Opt-in Verification ──────────────
+
+export async function sendVerifyEmail(email: string, name: string | undefined, verifyUrl: string) {
+  return sendMail({
+    to: email,
+    subject: 'Confirm your email to get your free Mexico travel guide',
+    html: wrap(`
+      <h2 style="color: #1a1a2e; margin: 0 0 8px;">One quick step, ${name || 'traveler'}!</h2>
+      <p style="color: #666; line-height: 1.6;">Confirm your email and we'll unlock your free <strong>Budget Luxury Travel in Mexico</strong> guide right away.</p>
+
+      ${btn('Confirm &amp; Get My Free Guide', verifyUrl, '#16A34A')}
+
+      <p style="color: #999; font-size: 13px; text-align: center;">If you didn't request this, you can ignore this email.</p>
+
+      <div style="background: #f8f9fa; border-radius: 8px; padding: 12px; margin-top: 20px;">
+        <p style="color: #999; font-size: 12px; margin: 0;">If the button doesn't work, copy this link:</p>
+        <p style="color: #E8651A; font-size: 12px; word-break: break-all; margin: 4px 0 0;">${verifyUrl}</p>
+      </div>
+
+      <div style="background: #FFF7ED; border: 1px solid #FDBA74; border-radius: 8px; padding: 20px; margin: 24px 0 0; text-align: center;">
+        <p style="color: #C2410C; font-weight: bold; font-size: 16px; margin: 0 0 4px;">Ready now? Start from just $29/month</p>
+        <p style="color: #9A3412; font-size: 13px; margin: 0;">5 days / 4 nights all-inclusive Mexico. 100% money-back guarantee.</p>
+        ${btn('See the $29/mo Offer', APP_URL)}
+      </div>
+    `),
+  })
+}
+
+// ─── Drip Follow-ups ──────────────────────────────────────
+
+const PHONE_TEL = 'tel:+18886022424'
+
+function callBlock() {
+  return `<div style="background:#EFF6FF;border:1px solid #BFDBFE;border-radius:8px;padding:16px;text-align:center;margin:16px 0;">
+    <p style="color:#1E40AF;font-size:13px;margin:0 0 4px;">Questions? Talk to a real person:</p>
+    <p style="margin:0;"><a href="${PHONE_TEL}" style="color:#1E40AF;font-size:22px;font-weight:bold;text-decoration:none;">(888) 602-2424</a></p>
+  </div>`
+}
+
+// Leads who entered an email but never confirmed / never bought.
+const LEAD_STEPS = [
+  {
+    subject: 'Your Mexico getaway is still available',
+    body: () => `
+      <h2 style="color:#1a1a2e;margin:0 0 8px;">Ready when you are</h2>
+      <p style="color:#666;line-height:1.6;">5 days / 4 nights all-inclusive in Mexico from just <strong>$29/mo</strong>, kids free. Pick up right where you left off.</p>
+      ${btn('See My Deal', `${APP_URL}/#checkout`)}`,
+  },
+  {
+    subject: '$29/mo, kids free — still thinking about Mexico?',
+    body: () => `
+      <h2 style="color:#1a1a2e;margin:0 0 8px;">No pressure, just the facts</h2>
+      <p style="color:#666;line-height:1.6;">One honest ~60-minute resort presentation, a polite &quot;no&quot; is always fine, and a 100% refund within 30 days. Travel anytime in the next 18 months.</p>
+      ${btn('Get My Certificate', `${APP_URL}/#checkout`)}
+      ${callBlock()}`,
+  },
+  {
+    subject: 'Last call on your Mexico getaway',
+    body: () => `
+      <h2 style="color:#1a1a2e;margin:0 0 8px;">We&apos;ll stop here</h2>
+      <p style="color:#666;line-height:1.6;">Last reminder about your 5-day all-inclusive Mexico deal. If it&apos;s still on your list, lock it in below or give us a call.</p>
+      ${btn('Claim My Deal', `${APP_URL}/#checkout`)}
+      ${callBlock()}`,
+  },
+]
+
+export async function sendLeadFollowup(email: string, step: number) {
+  const s = LEAD_STEPS[step]
+  if (!s) return null
+  return sendMail({ to: email, subject: s.subject, html: wrap(s.body()) })
+}
+
+// People who started checkout but did not complete payment.
+const ABANDONED_STEPS = [
+  {
+    subject: "You're one step from paradise",
+    body: () => `
+      <h2 style="color:#1a1a2e;margin:0 0 8px;">Almost there!</h2>
+      <p style="color:#666;line-height:1.6;">You started booking your 5-day all-inclusive Mexico getaway but didn&apos;t finish. Your spot is still here, from just <strong>$29/mo</strong>, with a 100% money-back guarantee.</p>
+      ${btn('Finish My Booking', `${APP_URL}/#checkout`)}
+      ${callBlock()}`,
+  },
+  {
+    subject: 'Still thinking about Mexico?',
+    body: () => `
+      <h2 style="color:#1a1a2e;margin:0 0 8px;">No pressure, just honest info</h2>
+      <p style="color:#666;line-height:1.6;">The deal is simple: a real all-inclusive vacation, one ~60-minute resort presentation, and a polite &quot;no&quot; is always fine. 30-day full refund if you change your mind. Prefer to book by phone? We&apos;re happy to help.</p>
+      ${btn('Complete My Booking', `${APP_URL}/#checkout`)}
+      ${callBlock()}`,
+  },
+]
+
+export async function sendAbandonedFollowup(email: string, step: number) {
+  const s = ABANDONED_STEPS[step]
+  if (!s) return null
+  return sendMail({ to: email, subject: s.subject, html: wrap(s.body()) })
+}
+
+// Paid customers who may not have booked their travel dates yet.
+export async function sendBookingReminder(email: string, name: string) {
+  return sendMail({
+    to: email,
+    subject: 'Have you booked your Mexico trip yet?',
+    html: wrap(`
+      <h2 style="color:#1a1a2e;margin:0 0 8px;">Ready when you are, ${name || 'traveler'}!</h2>
+      <p style="color:#666;line-height:1.6;">Your vacation certificate is active. The last step is picking your dates, our team books it for you over the phone.</p>
+      ${callBlock()}
+      <p style="color:#999;font-size:13px;text-align:center;">Have your certificate number handy when you call.</p>`),
+  })
+}
+
+// ─── Affiliate Welcome ────────────────────────────────────
+
+export async function sendAffiliateWelcomeEmail(email: string, name: string, referralCode: string) {
+  return sendMail({
+    to: email,
+    subject: 'Welcome to the Affiliate Program — Mexico Paradise Vacations',
+    html: wrap(`
+      <h2 style="color: #1a1a2e; margin: 0 0 8px;">Welcome, ${name}!</h2>
+      <p style="color: #666; line-height: 1.6;">You're now part of the Mexico Paradise Vacations affiliate program. Start sharing your unique referral link and earn commission on every sale.</p>
+
+      <div style="background: #F0FDF4; border: 2px solid #86EFAC; border-radius: 12px; padding: 20px; margin: 20px 0; text-align: center;">
+        <p style="color: #166534; font-size: 12px; text-transform: uppercase; letter-spacing: 2px; margin: 0 0 8px;">Your Referral Code</p>
+        <p style="color: #15803D; font-size: 28px; font-weight: bold; font-family: monospace; letter-spacing: 3px; margin: 0;">${referralCode}</p>
+      </div>
+
+      <div style="background: #f8f9fa; border-radius: 8px; padding: 16px; margin: 16px 0;">
+        <p style="margin: 0 0 4px; color: #333; font-size: 13px;"><strong>Your Referral Link:</strong></p>
+        <p style="color: #E8651A; font-size: 13px; word-break: break-all; margin: 0;">${APP_URL}/lp/golden-hour?ref=${referralCode}</p>
+      </div>
+
+      <h3 style="color: #1a1a2e; margin: 20px 0 8px;">How It Works</h3>
+      <ol style="color: #666; line-height: 1.8; padding-left: 20px; font-size: 14px;">
+        <li>Share your referral link on social media, email, or your website</li>
+        <li>When someone purchases through your link, you earn 20% commission</li>
+        <li>Track your earnings in your affiliate dashboard</li>
+        <li>Get paid monthly via PayPal, bank transfer, or check</li>
+      </ol>
+
+      ${btn('Go to Affiliate Dashboard', `${APP_URL}/affiliate`, '#0D9488')}
+    `),
+  })
+}
diff --git a/src/lib/maverick.ts b/src/lib/maverick.ts
index 190dfe8..e61d071 100644
--- a/src/lib/maverick.ts
+++ b/src/lib/maverick.ts
@@ -1,152 +1,376 @@
-export interface MaverickPaymentRequest {
-  amount: number
-  currency: string
+/**
+ * Maverick Payments API Integration
+ *
+ * Flow for vacation certificate purchase:
+ * 1. Create customer in Customer Vault
+ * 2. Add card to customer vault (tokenized)
+ * 3. Process first $39 sale
+ * 4. Set up recurring payment ($39/mo × 9 remaining months)
+ *
+ * API Docs: https://developers.maverickpayments.com
+ * Dashboard: https://dashboard.maverickpayments.com
+ */
+
+const GATEWAY_URL = process.env.MAVERICK_GATEWAY_URL || 'https://gateway.maverickpayments.com'
+const DASHBOARD_URL = process.env.MAVERICK_DASHBOARD_URL || 'https://dashboard.maverickpayments.com'
+const API_TOKEN = process.env.MAVERICK_API_TOKEN || ''
+const TERMINAL_ID = parseInt(process.env.MAVERICK_TERMINAL_ID || '0', 10)
+const DBA_ID = parseInt(process.env.MAVERICK_DBA_ID || '0', 10)
+const BILLING_ID = parseInt(process.env.MAVERICK_BILLING_ID || '0', 10)
+
+function headers() {
+  return {
+    'Authorization': `Bearer ${API_TOKEN}`,
+    'Content-Type': 'application/json',
+  }
+}
+
+// ─── Customer Vault ────────────────────────────────────────
+
+export interface CreateCustomerRequest {
+  firstName: string
+  lastName: string
   email: string
-  fullName: string
+  phone: string
+}
+
+export interface CustomerResponse {
+  id: number
+  token: string
+  firstName: string
+  lastName: string
+  email: string
+}
+
+export async function createCustomer(req: CreateCustomerRequest): Promise<CustomerResponse> {
+  const res = await fetch(`${DASHBOARD_URL}/api/customer-vault`, {
+    method: 'POST',
+    headers: headers(),
+    body: JSON.stringify({
+      dba: { id: DBA_ID },
+      firstName: req.firstName,
+      lastName: req.lastName,
+      email: req.email,
+      phone: req.phone,
+      description: 'Mexico Paradise Vacations - Certificate Purchase',
+    }),
+  })
+
+  if (!res.ok) {
+    const err = await res.text()
+    throw new Error(`Failed to create customer: ${err}`)
+  }
+
+  return res.json()
+}
+
+// ─── Add Card to Vault ─────────────────────────────────────
+
+export interface AddCardRequest {
+  customerId: number
+  cardNumber: string
+  exp: string       // MM/YY format
+  cvv: string
+  holderName: string
+}
+
+export interface CardResponse {
+  id: number
+  number: number    // last 4 digits
+  token: string
+  exp: string
+  status: string
+}
+
+export async function addCardToVault(req: AddCardRequest): Promise<CardResponse> {
+  const res = await fetch(`${DASHBOARD_URL}/api/customer-vault/${req.customerId}/card`, {
+    method: 'POST',
+    headers: headers(),
+    body: JSON.stringify({
+      billing: { id: BILLING_ID },
+      terminal: { id: TERMINAL_ID },
+      holderName: req.holderName,
+      number: req.cardNumber,
+      exp: req.exp,
+      cvv: req.cvv,
+    }),
+  })
+
+  if (!res.ok) {
+    const err = await res.text()
+    throw new Error(`Failed to add card: ${err}`)
+  }
+
+  return res.json()
+}
+
+// ─── Process Sale ──────────────────────────────────────────
+
+export interface SaleRequest {
+  amount: number      // in dollars (e.g., 39.00)
+  cardToken: string
   description?: string
-  returnUrl?: string
-  cancelUrl?: string
 }
 
-export interface MaverickPaymentResponse {
-  success: boolean
-  paymentId?: string
-  checkoutUrl?: string
-  error?: string
+export interface SaleResponse {
+  id: string
+  status: string
+  amount: string
+  card: {
+    token: string
+    number: number
+  }
 }
 
-export interface MaverickRefundRequest {
-  paymentId: string
-  amount?: number
-  reason?: string
+export async function processSale(req: SaleRequest): Promise<SaleResponse> {
+  const res = await fetch(`${GATEWAY_URL}/payment/sale`, {
+    method: 'POST',
+    headers: headers(),
+    body: JSON.stringify({
+      terminal: { id: TERMINAL_ID },
+      amount: req.amount.toFixed(2),
+      source: 'Internet',
+      level: 1,
+      card: {
+        token: req.cardToken,
+      },
+    }),
+  })
+
+  if (!res.ok) {
+    const err = await res.text()
+    throw new Error(`Sale failed: ${err}`)
+  }
+
+  return res.json()
 }
 
-export interface MaverickRefundResponse {
-  success: boolean
-  refundId?: string
-  error?: string
+// ─── Tokenize Card (without charging) ──────────────────────
+
+export interface TokenizeRequest {
+  cardName: string
+  cardNumber: string
+  exp: string       // MM/YY
+  cvv: string
+}
+
+export interface TokenizeResponse {
+  token: string
+  card: {
+    number: number
+    brand: string
+  }
 }
 
-export class MaverickPaymentAPI {
-  private baseUrl: string
-  private apiKey: string
+export async function tokenizeCard(req: TokenizeRequest): Promise<TokenizeResponse> {
+  const res = await fetch(`${GATEWAY_URL}/payment/generate-token`, {
+    method: 'POST',
+    headers: headers(),
+    body: JSON.stringify({
+      terminal: { id: TERMINAL_ID },
+      source: 'Internet',
+      card: {
+        name: req.cardName,
+        number: req.cardNumber,
+        exp: req.exp,
+        cvv: req.cvv,
+      },
+    }),
+  })
 
-  constructor(baseUrl: string, apiKey: string) {
-    this.baseUrl = baseUrl
-    this.apiKey = apiKey
+  if (!res.ok) {
+    const err = await res.text()
+    throw new Error(`Tokenization failed: ${err}`)
   }
 
-  async createPayment(request: MaverickPaymentRequest): Promise<MaverickPaymentResponse> {
-    try {
-      const response = await fetch(`${this.baseUrl}/payments`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'Authorization': `Bearer ${this.apiKey}`,
-        },
-        body: JSON.stringify({
-          amount: request.amount,
-          currency: request.currency,
-          customer: {
-            email: request.email,
-            name: request.fullName,
-          },
-          description: request.description || 'Service Payment',
-          return_url: request.returnUrl,
-          cancel_url: request.cancelUrl,
-        }),
-      })
+  return res.json()
+}
 
-      const data = await response.json()
-
-      if (response.ok) {
-        return {
-          success: true,
-          paymentId: data.id,
-          checkoutUrl: data.checkout_url,
-        }
-      } else {
-        return {
-          success: false,
-          error: data.error || 'Payment creation failed',
-        }
-      }
-    } catch (error) {
-      return {
-        success: false,
-        error: error instanceof Error ? error.message : 'Network error',
-      }
-    }
+// ─── Create Recurring Payment ──────────────────────────────
+
+export interface RecurringPaymentRequest {
+  customerId: number
+  cardId: number
+  amount: number
+  name: string
+  description: string
+  maxPayments: number   // e.g., 9 (remaining after first charge)
+  startDate: string     // YYYY-MM-DD (next month)
+}
+
+export interface RecurringPaymentResponse {
+  id: string
+  name: string
+  amount: string
+  execute: {
+    frequency: number
+    period: string
+  }
+  payment: {
+    next: string
+    max: number
   }
+  status: string | null
+}
 
-  async getPaymentStatus(paymentId: string): Promise<{ success: boolean; status?: string; error?: string }> {
-    try {
-      const response = await fetch(`${this.baseUrl}/payments/${paymentId}`, {
-        headers: {
-          'Authorization': `Bearer ${this.apiKey}`,
-        },
-      })
+export async function createRecurringPayment(req: RecurringPaymentRequest): Promise<RecurringPaymentResponse> {
+  // Calculate end date (maxPayments months from start)
+  const start = new Date(req.startDate)
+  const end = new Date(start)
+  end.setMonth(end.getMonth() + req.maxPayments)
 
-      const data = await response.json()
-
-      if (response.ok) {
-        return {
-          success: true,
-          status: data.status,
-        }
-      } else {
-        return {
-          success: false,
-          error: data.error || 'Failed to get payment status',
-        }
-      }
-    } catch (error) {
-      return {
-        success: false,
-        error: error instanceof Error ? error.message : 'Network error',
-      }
-    }
+  const res = await fetch(`${DASHBOARD_URL}/api/customer-vault/${req.customerId}/recurring-payment`, {
+    method: 'POST',
+    headers: headers(),
+    body: JSON.stringify({
+      name: req.name,
+      description: req.description,
+      amount: req.amount,
+      execute: {
+        frequency: 1,
+        period: 'month',
+      },
+      valid: {
+        from: req.startDate,
+        to: end.toISOString().split('T')[0],
+      },
+      payment: {
+        max: req.maxPayments,
+      },
+      terminal: { id: TERMINAL_ID },
+      customer: {
+        id: req.customerId,
+        card: { id: req.cardId },
+      },
+      dba: { id: DBA_ID },
+    }),
+  })
+
+  if (!res.ok) {
+    const err = await res.text()
+    throw new Error(`Recurring payment setup failed: ${err}`)
   }
 
-  async createRefund(request: MaverickRefundRequest): Promise<MaverickRefundResponse> {
-    try {
-      const response = await fetch(`${this.baseUrl}/refunds`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'Authorization': `Bearer ${this.apiKey}`,
-        },
-        body: JSON.stringify({
-          payment_id: request.paymentId,
-          amount: request.amount,
-          reason: request.reason || 'Customer refund',
-        }),
+  return res.json()
+}
+
+// ─── Refund ────────────────────────────────────────────────
+
+export interface RefundRequest {
+  transactionId: string
+  amount?: number
+}
+
+export interface RefundResponse {
+  id: string
+  status: string
+  amount: string
+}
+
+export async function processRefund(req: RefundRequest): Promise<RefundResponse> {
+  const res = await fetch(`${GATEWAY_URL}/payment/refund`, {
+    method: 'POST',
+    headers: headers(),
+    body: JSON.stringify({
+      terminal: { id: TERMINAL_ID },
+      transactionId: req.transactionId,
+      ...(req.amount && { amount: req.amount.toFixed(2) }),
+    }),
+  })
+
+  if (!res.ok) {
+    const err = await res.text()
+    throw new Error(`Refund failed: ${err}`)
+  }
+
+  return res.json()
+}
+
+// ─── Full Purchase Flow ────────────────────────────────────
+// This is the main function used by the payment API route
+
+export interface PurchaseRequest {
+  firstName: string
+  lastName: string
+  email: string
+  phone: string
+  cardNumber: string
+  cardExp: string     // MM/YY
+  cardCvv: string
+  cardName: string
+  paymentType: 'monthly' | 'one-time'
+}
+
+export interface PurchaseResult {
+  success: boolean
+  customerId?: number
+  cardId?: number
+  transactionId?: string
+  recurringPaymentId?: string
+  error?: string
+}
+
+export async function processFullPurchase(req: PurchaseRequest): Promise<PurchaseResult> {
+  try {
+    // Step 1: Create customer in vault
+    const customer = await createCustomer({
+      firstName: req.firstName,
+      lastName: req.lastName,
+      email: req.email,
+      phone: req.phone,
+    })
+
+    // Step 2: Add card to customer vault
+    const card = await addCardToVault({
+      customerId: customer.id,
+      cardNumber: req.cardNumber,
+      exp: req.cardExp,
+      cvv: req.cardCvv,
+      holderName: req.cardName,
+    })
+
+    // Step 3: Process first payment
+    const amount = req.paymentType === 'monthly' ? 39.00 : 399.00
+    const sale = await processSale({
+      amount,
+      cardToken: card.token,
+      description: req.paymentType === 'monthly'
+        ? 'Mexico Paradise Vacation Certificate - Payment 1 of 10'
+        : 'Mexico Paradise Vacation Certificate - Full Payment',
+    })
+
+    // Step 4: If monthly, set up recurring for remaining 9 payments
+    let recurringPaymentId: string | undefined
+    if (req.paymentType === 'monthly') {
+      const nextMonth = new Date()
+      nextMonth.setMonth(nextMonth.getMonth() + 1)
+      const startDate = nextMonth.toISOString().split('T')[0]
+
+      const recurring = await createRecurringPayment({
+        customerId: customer.id,
+        cardId: card.id,
+        amount: 39.00,
+        name: 'Mexico Paradise Vacation - Monthly Payment',
+        description: 'Vacation certificate payment plan - $39/month',
+        maxPayments: 9,
+        startDate,
       })
 
-      const data = await response.json()
-
-      if (response.ok) {
-        return {
-          success: true,
-          refundId: data.id,
-        }
-      } else {
-        return {
-          success: false,
-          error: data.error || 'Refund creation failed',
-        }
-      }
-    } catch (error) {
-      return {
-        success: false,
-        error: error instanceof Error ? error.message : 'Network error',
-      }
+      recurringPaymentId = recurring.id
+    }
+
+    return {
+      success: true,
+      customerId: customer.id,
+      cardId: card.id,
+      transactionId: sale.id,
+      recurringPaymentId,
+    }
+  } catch (error) {
+    console.error('Purchase flow error:', error)
+    return {
+      success: false,
+      error: error instanceof Error ? error.message : 'Payment processing failed',
     }
   }
 }
-
-// Initialize with environment variables or defaults
-export const maverickAPI = new MaverickPaymentAPI(
-  process.env.MAVERICK_API_URL || 'https://api.maverickpayments.com/v1',
-  process.env.MAVERICK_API_KEY || 'your-api-key-here'
-)
\ No newline at end of file
diff --git a/src/lib/nmi.ts b/src/lib/nmi.ts
new file mode 100644
index 0000000..cf5885f
--- /dev/null
+++ b/src/lib/nmi.ts
@@ -0,0 +1,292 @@
+/**
+ * NMI Payment Gateway Integration
+ * API: https://secure.nmi.com/api/transact.php
+ * Docs: https://docs.nmi.com
+ */
+
+const NMI_API_URL = process.env.NMI_API_URL || 'https://secure.nmi.com/api/transact.php'
+const SECURITY_KEY = process.env.NMI_SECURITY_KEY || ''
+
+interface NMIResponse {
+  response: string        // '1' = approved, '2' = declined, '3' = error
+  responsetext: string
+  authcode?: string
+  transactionid?: string
+  customer_vault_id?: string
+  subscription_id?: string
+  response_code?: string
+}
+
+async function nmiRequest(params: Record<string, string>): Promise<NMIResponse> {
+  params.security_key = SECURITY_KEY
+
+  const body = new URLSearchParams(params).toString()
+  const res = await fetch(NMI_API_URL, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+    body,
+  })
+
+  const text = await res.text()
+  const parsed: Record<string, string> = {}
+  text.split('&').forEach(pair => {
+    const [key, ...vals] = pair.split('=')
+    parsed[decodeURIComponent(key)] = decodeURIComponent(vals.join('='))
+  })
+
+  return parsed as unknown as NMIResponse
+}
+
+// ─── Process Sale ──────────────────────────────────────────
+
+export async function processSale(params: {
+  amount: number
+  firstName: string
+  lastName: string
+  email: string
+  phone?: string
+  zip?: string
+  orderDescription?: string
+  // Either token OR card details
+  paymentToken?: string
+  cardNumber?: string
+  cardExp?: string
+  cardCvv?: string
+}): Promise<NMIResponse> {
+  const data: Record<string, string> = {
+    type: 'sale',
+    amount: params.amount.toFixed(2),
+    first_name: params.firstName,
+    last_name: params.lastName,
+    email: params.email,
+    phone: params.phone || '',
+    order_description: params.orderDescription || 'Mexico Paradise Vacation Certificate',
+    orderid: `HI2B-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+  }
+  if (params.zip) data.zip = params.zip  // AVS
+
+  if (params.paymentToken) {
+    data.payment_token = params.paymentToken
+  } else if (params.cardNumber) {
+    data.ccnumber = params.cardNumber
+    data.ccexp = (params.cardExp || '').replace('/', '')
+    data.cvv = params.cardCvv || ''
+  }
+
+  return nmiRequest(data)
+}
+
+// ─── Add Customer to Vault ─────────────────────────────────
+
+export async function addToVault(params: {
+  firstName: string
+  lastName: string
+  email: string
+  phone?: string
+  zip?: string
+  paymentToken?: string
+  cardNumber?: string
+  cardExp?: string
+  cardCvv?: string
+}): Promise<NMIResponse> {
+  const data: Record<string, string> = {
+    customer_vault: 'add_customer',
+    first_name: params.firstName,
+    last_name: params.lastName,
+    email: params.email,
+    phone: params.phone || '',
+  }
+  if (params.zip) data.zip = params.zip  // AVS
+
+  if (params.paymentToken) {
+    data.payment_token = params.paymentToken
+  } else if (params.cardNumber) {
+    data.ccnumber = params.cardNumber
+    data.ccexp = (params.cardExp || '').replace('/', '')
+    data.cvv = params.cardCvv || ''
+  }
+
+  return nmiRequest(data)
+}
+
+// ─── Create Recurring Subscription ─────────────────────────
+// Accepts EITHER a customer_vault_id OR card details directly. Live merchant
+// accounts without Customer Vault enabled can still bill recurring by passing
+// ccnumber/ccexp directly to add_subscription.
+
+export async function createSubscription(params: {
+  customerVaultId?: string
+  paymentToken?: string
+  cardNumber?: string
+  cardExp?: string
+  cardCvv?: string
+  planPayments: number
+  planAmount: number
+  monthFrequency?: number
+  dayOfMonth?: number
+  startDate?: string
+  firstName: string
+  lastName: string
+  email: string
+  phone?: string
+}): Promise<NMIResponse> {
+  const now = new Date()
+  const nextMonth = new Date(now.getFullYear(), now.getMonth() + 1, now.getDate())
+  const defaultStartDate = nextMonth.toISOString().slice(0, 10).replace(/-/g, '')
+
+  const data: Record<string, string> = {
+    recurring: 'add_subscription',
+    plan_payments: params.planPayments.toString(),
+    plan_amount: params.planAmount.toFixed(2),
+    month_frequency: (params.monthFrequency || 1).toString(),
+    day_of_month: (params.dayOfMonth || now.getDate()).toString(),
+    start_date: params.startDate || defaultStartDate,
+    first_name: params.firstName,
+    last_name: params.lastName,
+    email: params.email,
+    phone: params.phone || '',
+  }
+
+  if (params.customerVaultId) {
+    data.customer_vault_id = params.customerVaultId
+  } else if (params.paymentToken) {
+    data.payment_token = params.paymentToken
+  } else if (params.cardNumber) {
+    data.ccnumber = params.cardNumber
+    data.ccexp = (params.cardExp || '').replace('/', '')
+    if (params.cardCvv) data.cvv = params.cardCvv
+  }
+
+  return nmiRequest(data)
+}
+
+// ─── Refund ────────────────────────────────────────────────
+
+export async function processRefund(params: {
+  transactionId: string
+  amount?: number
+}): Promise<NMIResponse> {
+  const data: Record<string, string> = {
+    type: 'refund',
+    transactionid: params.transactionId,
+  }
+  if (params.amount) data.amount = params.amount.toFixed(2)
+  return nmiRequest(data)
+}
+
+// ─── Full Purchase Flow ────────────────────────────────────
+
+export interface PurchaseRequest {
+  firstName: string
+  lastName: string
+  email: string
+  phone: string
+  zip?: string
+  paymentType: 'monthly' | 'one-time'
+  paymentToken?: string
+  cardNumber?: string
+  cardExp?: string
+  cardCvv?: string
+}
+
+export interface PurchaseResult {
+  success: boolean
+  transactionId?: string
+  customerVaultId?: string
+  subscriptionId?: string
+  error?: string
+}
+
+export async function processFullPurchase(req: PurchaseRequest): Promise<PurchaseResult> {
+  try {
+    const amount = req.paymentType === 'monthly' ? 29.00 : 249.00
+
+    // Step 1: Process initial sale
+    const sale = await processSale({
+      amount,
+      firstName: req.firstName,
+      lastName: req.lastName,
+      email: req.email,
+      phone: req.phone,
+      zip: req.zip,
+      paymentToken: req.paymentToken,
+      cardNumber: req.cardNumber,
+      cardExp: req.cardExp,
+      cardCvv: req.cardCvv,
+      orderDescription: req.paymentType === 'monthly'
+        ? 'Mexico Paradise Vacation Certificate - Payment 1 of 10'
+        : 'Mexico Paradise Vacation Certificate - Full Payment',
+    })
+
+    if (sale.response !== '1') {
+      return {
+        success: false,
+        error: sale.responsetext || 'Payment declined',
+      }
+    }
+
+    let customerVaultId: string | undefined
+    let subscriptionId: string | undefined
+
+    // Step 2: If monthly, create the recurring subscription for the remaining
+    // 9 payments. Try Customer Vault first (cleanest record-keeping); if the
+    // merchant account doesn't have Vault enabled, fall back to passing card
+    // details straight to add_subscription — NMI accepts both flows.
+    if (req.paymentType === 'monthly') {
+      const vault = await addToVault({
+        firstName: req.firstName,
+        lastName: req.lastName,
+        email: req.email,
+        phone: req.phone,
+        zip: req.zip,
+        paymentToken: req.paymentToken,
+        cardNumber: req.cardNumber,
+        cardExp: req.cardExp,
+        cardCvv: req.cardCvv,
+      })
+
+      if (vault.response === '1') {
+        customerVaultId = vault.customer_vault_id
+      } else {
+        console.warn('Vault unavailable, creating subscription with card data directly:', vault.responsetext)
+      }
+
+      const subscription = await createSubscription({
+        ...(customerVaultId
+          ? { customerVaultId }
+          : {
+              paymentToken: req.paymentToken,
+              cardNumber: req.cardNumber,
+              cardExp: req.cardExp,
+              cardCvv: req.cardCvv,
+            }),
+        planPayments: 9,
+        planAmount: 29.00,
+        monthFrequency: 1,
+        firstName: req.firstName,
+        lastName: req.lastName,
+        email: req.email,
+        phone: req.phone,
+      })
+
+      if (subscription.response === '1') {
+        subscriptionId = subscription.subscription_id
+      } else {
+        console.error('Subscription failed:', subscription.responsetext)
+      }
+    }
+
+    return {
+      success: true,
+      transactionId: sale.transactionid,
+      customerVaultId,
+      subscriptionId,
+    }
+  } catch (error) {
+    console.error('Purchase error:', error)
+    return {
+      success: false,
+      error: error instanceof Error ? error.message : 'Payment processing failed',
+    }
+  }
+}
diff --git a/src/lib/openrouter.ts b/src/lib/openrouter.ts
new file mode 100644
index 0000000..ff80756
--- /dev/null
+++ b/src/lib/openrouter.ts
@@ -0,0 +1,57 @@
+// OpenRouter LLM client — routes to the best available FREE model, with an
+// automatic fallback because free models get rate-limited upstream.
+// Key lives in .env (OPENROUTER_API_KEY); never hard-code it.
+
+const OPENROUTER_URL = 'https://openrouter.ai/api/v1/chat/completions'
+const KEY = process.env.OPENROUTER_API_KEY
+
+// Strongest working free general model first; openrouter/free auto-routes as fallback.
+const DEFAULT_MODELS = [
+  'nvidia/nemotron-3-ultra-550b-a55b:free',
+  'openrouter/free',
+]
+
+export interface LLMMessage {
+  role: 'system' | 'user' | 'assistant'
+  content: string
+}
+
+export interface LLMOptions {
+  model?: string          // override the default free model
+  maxTokens?: number
+  temperature?: number
+}
+
+/** Call OpenRouter and return the assistant's text. Throws on total failure. */
+export async function llm(messages: LLMMessage[], opts: LLMOptions = {}): Promise<string> {
+  if (!KEY) throw new Error('OPENROUTER_API_KEY not set in .env')
+  const models = opts.model ? [opts.model] : DEFAULT_MODELS
+
+  let lastErr = 'unknown error'
+  for (const model of models) {
+    try {
+      const res = await fetch(OPENROUTER_URL, {
+        method: 'POST',
+        headers: {
+          Authorization: `Bearer ${KEY}`,
+          'Content-Type': 'application/json',
+          'HTTP-Referer': 'https://hi2b.com',
+          'X-Title': 'hi2b',
+        },
+        body: JSON.stringify({
+          model,
+          messages,
+          max_tokens: opts.maxTokens ?? 1024,
+          temperature: opts.temperature ?? 0.7,
+        }),
+      })
+      const data = await res.json().catch(() => ({}))
+      const content: string | undefined = data?.choices?.[0]?.message?.content
+      if (res.ok && content) return content
+      lastErr = data?.error?.message || `HTTP ${res.status}`
+    } catch (e) {
+      lastErr = e instanceof Error ? e.message : 'network error'
+    }
+  }
+  throw new Error(`OpenRouter failed (all models): ${lastErr}`)
+}
diff --git a/src/lib/verify-token.ts b/src/lib/verify-token.ts
new file mode 100644
index 0000000..382c006
--- /dev/null
+++ b/src/lib/verify-token.ts
@@ -0,0 +1,17 @@
+import crypto from 'crypto'
+
+// Stateless email-verification token (double opt-in). No DB column needed:
+// the token is an HMAC of the lowercased email, so /api/verify can validate it
+// without storing anything. Low-stakes (free-guide opt-in), so no expiry.
+
+const SECRET = process.env.VERIFY_SECRET || process.env.MAIL_API_KEY || 'hi2b-dev-secret'
+
+export function makeVerifyToken(email: string): string {
+  return crypto.createHmac('sha256', SECRET).update(email.trim().toLowerCase()).digest('hex').slice(0, 32)
+}
+
+export function checkVerifyToken(email: string, token: string): boolean {
+  const expected = makeVerifyToken(email)
+  if (token.length !== expected.length) return false
+  return crypto.timingSafeEqual(Buffer.from(token), Buffer.from(expected))
+}