Landing Page

The Landing Page is a public-facing website designed for lead generation and customer support, seamlessly integrated with Odoo CRM and Helpdesk modules.

---

Features Overview

Feature	Description
Estimate Form	Lead capture form that creates CRM opportunities in Odoo
Helpdesk Form	Support request form that creates helpdesk tickets
Theme System	Multiple themes configurable via environment variable
Custom Branding	Logo support for header (logo.svg) and footer (logo-white.svg)
reCAPTCHA v3	Invisible spam protection for all forms
Responsive Design	Mobile-first, fully responsive layout
SEO Optimized	Meta tags and structured data support

---

Architecture

flowchart TB
    subgraph "Public Internet"
        Visitor[Website Visitor]
    end

    subgraph "Nginx Proxy"
        SSL[SSL Termination]
    end

    subgraph "Landing Page Container"
        Flask[Flask App<br/>:8001]
        Gunicorn[Gunicorn WSGI]
        Templates[Jinja2 Templates]
        Static[Static Assets<br/>Tailwind CSS]
    end

    subgraph "Backend Services"
        Odoo[Odoo 15 ERP]
        reCAPTCHA[Google reCAPTCHA v3]
    end

    subgraph "Odoo Data"
        CRM[CRM Leads]
        Helpdesk[Helpdesk Tickets]
        Partners[res.partner]
    end

    Visitor --> SSL
    SSL -->|www.domain| Gunicorn
    Gunicorn --> Flask
    Flask --> Templates
    Flask --> Static
    Flask -->|REST API| Odoo
    Flask -->|Verify Token| reCAPTCHA
    Odoo --> CRM
    Odoo --> Helpdesk
    Odoo --> Partners

---

Technology Stack

Component	Technology	Version
Backend	Flask	3.0+
WSGI Server	Gunicorn	21.0+
CSS Framework	Tailwind CSS	3.x
JavaScript	Alpine.js	3.x
Templating	Jinja2	3.x
Spam Protection	Google reCAPTCHA	v3
API Integration	Odoo REST API	-

---

Domain Structure

Domain	Service	Description
example.com	Landing Page	Main public website
erp.example.com	Odoo ERP	Back-office operations
field.example.com	Field PWA	Mobile app for technicians
docs.example.com	Documentation	This documentation portal

---

Environment Access

Test EnvironmentProduction Environment

Service	URL
Landing Page	http://localhost
Direct Port	http://localhost:8001

Service	URL
Landing Page	https://example.com

---

Configuration

Key environment variables in .env:

# Landing Page Configuration
LANDING_SECRET_KEY=your-secret-key
LANDING_THEME=blue              # blue, slate, or earth

# Odoo API Connection
ODOO_BASE_URL=http://odoo:8069
ODOO_API_KEY=your-api-key

# reCAPTCHA v3
RECAPTCHA_SITE_KEY=your-site-key
RECAPTCHA_SECRET_KEY=your-secret-key

# Company Information
COMPANY_NAME=Your Company Name
COMPANY_PHONE=(555) 123-4567
COMPANY_EMAIL=info@example.com
COMPANY_ADDRESS=City, State
COMPANY_SHOWROOM_ADDRESS=Full address here
COMPANY_HOURS=Mon-Fri: 9AM-6PM, Sat: 10AM-4PM

# SEO Meta Tags
META_TITLE=Your Company - Tagline
META_DESCRIPTION=Your company description for search engines

See Configuration Guide for complete documentation.

---

Project Structure

landing-page/
├── app/
│   ├── __init__.py           # Flask app factory
│   ├── config.py             # Environment configuration
│   ├── routes/
│   │   ├── main.py           # Page routes (/, /services, /about)
│   │   ├── estimate.py       # Estimate form handling
│   │   └── helpdesk.py       # Helpdesk form handling
│   ├── services/
│   │   ├── recaptcha.py      # reCAPTCHA verification
│   │   └── odoo_api.py       # Odoo REST API client
│   ├── templates/            # Jinja2 templates
│   │   ├── base.html
│   │   ├── index.html
│   │   └── components/
│   └── static/
│       ├── css/
│       │   ├── style.css     # Compiled Tailwind
│       │   └── themes/       # Theme CSS files
│       ├── images/
│       │   ├── logo.svg      # Header logo (light bg)
│       │   └── logo-white.svg # Footer logo (dark bg)
│       └── js/
│           └── main.js
├── src/
│   └── input.css             # Tailwind source
├── tailwind.config.js
├── package.json
├── Dockerfile
└── requirements.txt

---

Form Integration

Estimate Form → CRM Lead

When a visitor submits the estimate form:

1. reCAPTCHA token is verified
2. res.partner is created/found in Odoo
3. crm.lead is created with form data
4. Lead is assigned to first pipeline stage

Helpdesk Form → Support Ticket

When a visitor submits a support request:

1. reCAPTCHA token is verified
2. res.partner is created/found in Odoo
3. helpdesk.ticket is created with form data
4. Ticket is assigned to configured team

See Forms & API for detailed integration documentation.

---

Theming

Three built-in themes are available:

Theme	Primary Color	Best For
blue	Indigo/Blue	Professional services
slate	Gray/Slate	Modern, minimal
earth	Brown/Tan	Home improvement, natural

Set theme via environment variable:

LANDING_THEME=slate

See Theming Guide for customization instructions.

---

Development

Rebuild Landing Page

# Rebuild container with latest changes
./production_deploy.sh rebuild-landing

# Or manually
docker compose build --no-cache landing
docker compose up -d landing

Build Tailwind CSS

cd landing-page

# Install dependencies
npm install

# Build CSS (production)
npm run build

# Watch mode (development)
npm run watch

---

Section Guides

Guide	Description
Architecture	Technical architecture and data flow
Configuration	Environment variables and theme settings
Forms & API	Form handling and Odoo integration
Theming	Theme customization and CSS variables

---

Health Check

# Check landing page health
curl http://localhost:8001/health

Expected response:

{
  "status": "ok",
  "odoo": "connected"
}