Files
apps/index.html
T
carlosmintfan 2e599c9c9c new landingpage
2026-04-02 07:37:00 -03:00

392 lines
27 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ODOO4projects | Odoo Extensions for n8n &amp; AI Automation</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
'brand': '#714B67',
'brand-dark': '#4a3c5a',
'accent': '#FF6D5A',
'dark': '#1f1f2e',
},
fontFamily: {
'sans': ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
}
}
}
}
</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
.gradient-hero { background: linear-gradient(135deg, #1f1f2e 0%, #2d1f3d 100%); }
.module-card { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.module-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
.btn-brand { background: linear-gradient(135deg, #714B67 0%, #5a3d52 100%); transition: all 0.25s ease; }
.btn-brand:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(113,75,103,0.3); }
.btn-accent { background: linear-gradient(135deg, #FF6D5A 0%, #ff5242 100%); transition: all 0.25s ease; }
.btn-accent:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(255,109,90,0.3); }
</style>
</head>
<body class="bg-white text-gray-800 font-sans">
<!-- Navigation -->
<nav class="bg-white shadow-sm sticky top-0 z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex items-center">
<span class="text-2xl font-bold text-brand">ODOO4<span class="text-accent">projects</span></span>
</div>
<div class="hidden md:flex items-center space-x-8">
<a href="#modules" class="text-gray-600 hover:text-brand transition-colors text-sm font-medium">Modules</a>
<a href="#how-it-works" class="text-gray-600 hover:text-brand transition-colors text-sm font-medium">How it works</a>
<a href="#hosting" class="text-gray-600 hover:text-brand transition-colors text-sm font-medium">Hosting</a>
<a href="https://odoo4projects.com" class="text-gray-600 hover:text-brand transition-colors text-sm font-medium">Main Site</a>
<a href="#trial" class="btn-accent text-white px-5 py-2 rounded-lg text-sm font-semibold">Try Free</a>
</div>
<div class="md:hidden flex items-center">
<button id="mobile-menu-button" class="text-gray-600 hover:text-brand">
<i class="fas fa-bars text-xl"></i>
</button>
</div>
</div>
</div>
<div id="mobile-menu" class="hidden md:hidden bg-white border-t px-4 py-3 space-y-3">
<a href="#modules" class="block text-gray-600 hover:text-brand text-sm">Modules</a>
<a href="#how-it-works" class="block text-gray-600 hover:text-brand text-sm">How it works</a>
<a href="#hosting" class="block text-gray-600 hover:text-brand text-sm">Hosting</a>
<a href="https://odoo4projects.com" class="block text-gray-600 hover:text-brand text-sm">Main Site</a>
<a href="#trial" class="btn-accent text-white px-5 py-2 rounded-lg text-sm font-semibold inline-block">Try Free</a>
</div>
</nav>
<!-- Hero -->
<section class="gradient-hero text-white py-24 md:py-36">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="max-w-3xl mx-auto text-center">
<div class="text-sm font-semibold tracking-widest uppercase text-purple-300 mb-4">Odoo 19+ Extensions</div>
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6">
Connect Odoo to <span class="text-accent">n8n</span> &amp; AI — without the custom code
</h1>
<p class="text-xl text-gray-300 mb-10 leading-relaxed">
Five production-ready modules that add REST APIs, automation hooks and workflow tools to Odoo. One-time purchase, no subscriptions.
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a href="#modules" class="btn-accent text-white px-8 py-4 rounded-xl font-semibold text-lg text-center">
See the Modules
</a>
<a href="#trial" class="bg-white/10 hover:bg-white/20 text-white px-8 py-4 rounded-xl font-semibold text-lg text-center transition-colors border border-white/20">
Try Free on Our Hosting
</a>
</div>
</div>
</div>
</section>
<!-- Value props -->
<section class="py-16 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-white rounded-2xl p-8 shadow-sm">
<div class="w-12 h-12 bg-brand/10 rounded-xl flex items-center justify-center text-brand text-xl mb-5">
<i class="fas fa-plug"></i>
</div>
<h3 class="text-lg font-semibold text-dark mb-2">Zero-session REST APIs</h3>
<p class="text-gray-500 text-sm leading-relaxed">Call Odoo from n8n, scripts or dashboards using API keys or per-query tokens — no browser session required.</p>
</div>
<div class="bg-white rounded-2xl p-8 shadow-sm">
<div class="w-12 h-12 bg-accent/10 rounded-xl flex items-center justify-center text-accent text-xl mb-5">
<i class="fas fa-robot"></i>
</div>
<h3 class="text-lg font-semibold text-dark mb-2">n8n-ready out of the box</h3>
<p class="text-gray-500 text-sm leading-relaxed">Every endpoint is designed to drop straight into an n8n HTTP Request node. No wrapper code, no custom nodes.</p>
</div>
<div class="bg-white rounded-2xl p-8 shadow-sm">
<div class="w-12 h-12 bg-green-500/10 rounded-xl flex items-center justify-center text-green-600 text-xl mb-5">
<i class="fas fa-shield-alt"></i>
</div>
<h3 class="text-lg font-semibold text-dark mb-2">$20 each, yours forever</h3>
<p class="text-gray-500 text-sm leading-relaxed">One-time purchase, no subscription. From $49. Includes DE &amp; ES translations and future updates for that Odoo version.</p>
</div>
</div>
</div>
</section>
<!-- Modules -->
<section id="modules" class="py-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-14">
<h2 class="text-3xl md:text-4xl font-bold text-dark mb-4">The Modules</h2>
<p class="text-lg text-gray-500 max-w-2xl mx-auto">Each module solves one specific problem. Buy only what you need.</p>
</div>
<!-- BI Queries -->
<div class="module-card bg-white rounded-2xl shadow-md overflow-hidden mb-10 border border-gray-100">
<div class="md:flex">
<div class="md:w-64 bg-dark p-8 text-white flex-shrink-0 flex flex-col justify-between">
<div>
<div class="text-4xl mb-5"><i class="fas fa-database"></i></div>
<h3 class="text-xl font-bold mb-1">BI Queries</h3>
<p class="text-gray-400 text-sm">o4p_n8n_bi · v19.0.1</p>
</div>
<div class="mt-6">
<span class="bg-purple-600 text-white text-sm font-bold px-4 py-1.5 rounded-full">$390 one-time</span>
</div>
</div>
<div class="p-8 flex-1">
<h4 class="text-lg font-semibold text-dark mb-3">Expose SQL queries as secure JSON endpoints</h4>
<p class="text-gray-500 text-sm leading-relaxed mb-5">Store named PostgreSQL queries in Odoo, each protected by a per-query Bearer token. Call them from any BI tool, dashboard or n8n workflow — no Odoo session needed.</p>
<div class="grid sm:grid-cols-2 gap-3">
<div class="flex items-start gap-2 text-sm text-gray-600"><i class="fas fa-check text-green-500 mt-0.5"></i> Per-query Bearer token auth</div>
<div class="flex items-start gap-2 text-sm text-gray-600"><i class="fas fa-check text-green-500 mt-0.5"></i> Masked token UI with copy button</div>
<div class="flex items-start gap-2 text-sm text-gray-600"><i class="fas fa-check text-green-500 mt-0.5"></i> Direct PostgreSQL execution</div>
<div class="flex items-start gap-2 text-sm text-gray-600"><i class="fas fa-check text-green-500 mt-0.5"></i> Structured JSON response</div>
</div>
<div class="mt-5 bg-gray-900 rounded-lg px-4 py-3 font-mono text-xs text-gray-300">
GET /bi_query/&lt;id&gt;?db=&lt;dbname&gt; &nbsp; Authorization: Bearer &lt;token&gt;
</div>
</div>
</div>
</div>
<!-- Payment Link API -->
<div class="module-card bg-white rounded-2xl shadow-md overflow-hidden mb-10 border border-gray-100">
<div class="md:flex">
<div class="md:w-64 bg-dark p-8 text-white flex-shrink-0 flex flex-col justify-between">
<div>
<div class="text-4xl mb-5"><i class="fas fa-link"></i></div>
<h3 class="text-xl font-bold mb-1">Payment Link API</h3>
<p class="text-gray-400 text-sm">o4p_n8n_payment_link_api · v19.0.2</p>
</div>
<div class="mt-6">
<span class="bg-purple-600 text-white text-sm font-bold px-4 py-1.5 rounded-full">$249 one-time</span>
</div>
</div>
<div class="p-8 flex-1">
<h4 class="text-lg font-semibold text-dark mb-3">Generate payment links for invoices &amp; sales orders</h4>
<p class="text-gray-500 text-sm leading-relaxed mb-5">One REST endpoint returns a signed Odoo portal link for any invoice or sales order. Send it via WhatsApp, SMS or email directly from n8n — the customer pays without logging in.</p>
<div class="grid sm:grid-cols-2 gap-3">
<div class="flex items-start gap-2 text-sm text-gray-600"><i class="fas fa-check text-green-500 mt-0.5"></i> Works for invoices &amp; sales orders</div>
<div class="flex items-start gap-2 text-sm text-gray-600"><i class="fas fa-check text-green-500 mt-0.5"></i> Odoo API key authentication</div>
<div class="flex items-start gap-2 text-sm text-gray-600"><i class="fas fa-check text-green-500 mt-0.5"></i> Signed portal links, no login needed</div>
<div class="flex items-start gap-2 text-sm text-gray-600"><i class="fas fa-check text-green-500 mt-0.5"></i> Single JSON response with link</div>
</div>
<div class="mt-5 bg-gray-900 rounded-lg px-4 py-3 font-mono text-xs text-gray-300">
POST /api/payment-link &nbsp; Authorization: Bearer &lt;api-key&gt;
</div>
</div>
</div>
</div>
<!-- Website Webhook -->
<div class="module-card bg-white rounded-2xl shadow-md overflow-hidden mb-10 border border-gray-100">
<div class="md:flex">
<div class="md:w-64 bg-dark p-8 text-white flex-shrink-0 flex flex-col justify-between">
<div>
<div class="text-4xl mb-5"><i class="fas fa-globe"></i></div>
<h3 class="text-xl font-bold mb-1">Website Form Webhook</h3>
<p class="text-gray-400 text-sm">o4p_n8n_website_webhook · v19.0.1</p>
</div>
<div class="mt-6">
<span class="bg-purple-600 text-white text-sm font-bold px-4 py-1.5 rounded-full">$119 one-time</span>
</div>
</div>
<div class="p-8 flex-1">
<h4 class="text-lg font-semibold text-dark mb-3">POST website form submissions to n8n in real time</h4>
<p class="text-gray-500 text-sm leading-relaxed mb-5">Intercepts every Odoo website form submission and sends the payload to a configurable n8n webhook URL instantly — enabling AI spam filtering, lead enrichment, custom routing and more.</p>
<div class="grid sm:grid-cols-2 gap-3">
<div class="flex items-start gap-2 text-sm text-gray-600"><i class="fas fa-check text-green-500 mt-0.5"></i> Real-time delivery, no polling</div>
<div class="flex items-start gap-2 text-sm text-gray-600"><i class="fas fa-check text-green-500 mt-0.5"></i> Works with all Odoo website forms</div>
<div class="flex items-start gap-2 text-sm text-gray-600"><i class="fas fa-check text-green-500 mt-0.5"></i> Optional auth header support</div>
<div class="flex items-start gap-2 text-sm text-gray-600"><i class="fas fa-check text-green-500 mt-0.5"></i> Zero-code setup via system params</div>
</div>
</div>
</div>
</div>
<!-- Invoice Address Edit -->
<div class="module-card bg-white rounded-2xl shadow-md overflow-hidden mb-10 border border-gray-100">
<div class="md:flex">
<div class="md:w-64 bg-dark p-8 text-white flex-shrink-0 flex flex-col justify-between">
<div>
<div class="text-4xl mb-5"><i class="fas fa-edit"></i></div>
<h3 class="text-xl font-bold mb-1">Invoice Address Edit</h3>
<p class="text-gray-400 text-sm">o4p_n8n_edit_invoice_address · v19.0.2</p>
</div>
<div class="mt-6">
<span class="bg-purple-600 text-white text-sm font-bold px-4 py-1.5 rounded-full">$49 one-time</span>
</div>
</div>
<div class="p-8 flex-1">
<h4 class="text-lg font-semibold text-dark mb-3">Let customers fix their billing address at checkout</h4>
<p class="text-gray-500 text-sm leading-relaxed mb-5">Adds an "Edit Invoice Address" button to the portal payment page. Customers can correct name, street, city, ZIP and country in one step — no support ticket, no back-office involvement.</p>
<div class="grid sm:grid-cols-2 gap-3">
<div class="flex items-start gap-2 text-sm text-gray-600"><i class="fas fa-check text-green-500 mt-0.5"></i> Inline edit on payment page</div>
<div class="flex items-start gap-2 text-sm text-gray-600"><i class="fas fa-check text-green-500 mt-0.5"></i> Secure — portal auth required</div>
<div class="flex items-start gap-2 text-sm text-gray-600"><i class="fas fa-check text-green-500 mt-0.5"></i> Saves immediately to partner record</div>
<div class="flex items-start gap-2 text-sm text-gray-600"><i class="fas fa-check text-green-500 mt-0.5"></i> Zero configuration</div>
</div>
</div>
</div>
</div>
<!-- Risk Management -->
<div class="module-card bg-white rounded-2xl shadow-md overflow-hidden mb-10 border border-gray-100">
<div class="md:flex">
<div class="md:w-64 bg-dark p-8 text-white flex-shrink-0 flex flex-col justify-between">
<div>
<div class="text-4xl mb-5"><i class="fas fa-shield-alt"></i></div>
<h3 class="text-xl font-bold mb-1">Risk Management</h3>
<p class="text-gray-400 text-sm">o4p_risk_management · v19.0.1</p>
</div>
<div class="mt-6">
<span class="bg-purple-600 text-white text-sm font-bold px-4 py-1.5 rounded-full">$590 one-time</span>
</div>
</div>
<div class="p-8 flex-1">
<h4 class="text-lg font-semibold text-dark mb-3">Risk register with scoring, workflow and Kanban</h4>
<p class="text-gray-500 text-sm leading-relaxed mb-5">A full organisational risk register inside Odoo. Risks move through Identified → Understood → Mitigated → Closed with automatic score-based classification (Low / Medium / High / Critical).</p>
<div class="grid sm:grid-cols-2 gap-3">
<div class="flex items-start gap-2 text-sm text-gray-600"><i class="fas fa-check text-green-500 mt-0.5"></i> Auto-score: (Severity × Impact) / 100</div>
<div class="flex items-start gap-2 text-sm text-gray-600"><i class="fas fa-check text-green-500 mt-0.5"></i> Four-stage workflow with audit log</div>
<div class="flex items-start gap-2 text-sm text-gray-600"><i class="fas fa-check text-green-500 mt-0.5"></i> Mitigation actions sub-list per risk</div>
<div class="flex items-start gap-2 text-sm text-gray-600"><i class="fas fa-check text-green-500 mt-0.5"></i> List, Kanban, Pivot &amp; Graph views</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- How it works -->
<section id="how-it-works" class="py-20 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-14">
<h2 class="text-3xl md:text-4xl font-bold text-dark mb-4">Complete Sales Automation Example</h2>
<p class="text-lg text-gray-500 max-w-2xl mx-auto">Use all five modules together for a fully automated lead-to-payment flow.</p>
</div>
<div class="max-w-3xl mx-auto space-y-5">
<div class="flex items-start gap-5">
<div class="bg-brand text-white rounded-full w-9 h-9 flex items-center justify-center text-sm font-bold flex-shrink-0 mt-0.5">1</div>
<div><h4 class="font-semibold text-dark">Lead capture</h4><p class="text-gray-500 text-sm mt-1">Website form → n8n webhook. AI validates and de-duplicates the lead before it reaches Odoo CRM.</p></div>
</div>
<div class="flex items-start gap-5">
<div class="bg-brand text-white rounded-full w-9 h-9 flex items-center justify-center text-sm font-bold flex-shrink-0 mt-0.5">2</div>
<div><h4 class="font-semibold text-dark">Data enrichment</h4><p class="text-gray-500 text-sm mt-1">n8n checks against Odoo data via the BI Query API — existing customer? open invoices? risk score?</p></div>
</div>
<div class="flex items-start gap-5">
<div class="bg-brand text-white rounded-full w-9 h-9 flex items-center justify-center text-sm font-bold flex-shrink-0 mt-0.5">3</div>
<div><h4 class="font-semibold text-dark">Quotation created</h4><p class="text-gray-500 text-sm mt-1">n8n creates a sale order in Odoo via the standard JSON-RPC API.</p></div>
</div>
<div class="flex items-start gap-5">
<div class="bg-brand text-white rounded-full w-9 h-9 flex items-center justify-center text-sm font-bold flex-shrink-0 mt-0.5">4</div>
<div><h4 class="font-semibold text-dark">Payment link sent</h4><p class="text-gray-500 text-sm mt-1">n8n calls the Payment Link API and sends the signed URL via WhatsApp or email — customer pays without logging in.</p></div>
</div>
<div class="flex items-start gap-5">
<div class="bg-brand text-white rounded-full w-9 h-9 flex items-center justify-center text-sm font-bold flex-shrink-0 mt-0.5">5</div>
<div><h4 class="font-semibold text-dark">Address corrected</h4><p class="text-gray-500 text-sm mt-1">Customer notices a wrong billing address — fixes it directly on the portal payment page, no support needed.</p></div>
</div>
</div>
</div>
</section>
<!-- Hosting / Free Trial -->
<section id="hosting" class="py-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-14">
<h2 class="text-3xl md:text-4xl font-bold text-dark mb-4">Want to try before you buy?</h2>
<p class="text-lg text-gray-500 max-w-2xl mx-auto">We host Odoo for businesses of all sizes. Every hosting plan includes <strong>all modules at no extra cost</strong> — and you can start with a free 4-week trial, no credit card required.</p>
</div>
<div class="bg-gradient-to-br from-dark to-brand-dark rounded-3xl p-10 md:p-14 text-white text-center max-w-3xl mx-auto">
<div class="text-5xl mb-6"><i class="fas fa-rocket"></i></div>
<h3 class="text-2xl font-bold mb-3">4-Week Free Trial</h3>
<p class="text-gray-300 text-lg mb-2">Full Odoo hosting — all modules included — no credit card.</p>
<p class="text-gray-400 text-sm mb-8">After the trial, hosting plans start at $214/year. Cancel any time.</p>
<a href="#trial" class="btn-accent text-white px-10 py-4 rounded-xl font-semibold text-lg inline-block">
Start Free Trial
</a>
<p class="text-gray-400 text-xs mt-5">Includes: Odoo CE hosting · Module installation · SSL · Backups</p>
</div>
</div>
</section>
<!-- Signup Widget -->
<section id="trial" class="py-20 bg-gray-50">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="bg-white rounded-2xl shadow-lg overflow-hidden">
<div class="p-8 md:p-12">
<div class="text-center mb-8">
<h2 class="text-3xl font-bold text-dark mb-3">Get Started Today</h2>
<p class="text-gray-500 text-lg">Sign up for hosting and get all modules included — free for 4 weeks.</p>
</div>
<div id="my-signup-widget"></div>
<script src="https://od8n.com/widget-signup/widget.js" data-affiliate="od8n"></script>
<div class="mt-8 text-center">
<p class="text-gray-500 text-sm">
Already have an account?
<a href="https://odoo4projects.com/contactus" class="text-brand font-medium hover:underline">Contact us</a>
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-dark text-white py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid md:grid-cols-4 gap-8">
<div>
<h3 class="text-xl font-bold mb-4">ODOO4<span class="text-accent">projects</span></h3>
<p class="text-gray-400 text-sm mb-4 leading-relaxed">Smart, scalable Odoo solutions combining ERP stability with n8n automation and AI.</p>
<div class="flex space-x-4">
<a href="https://odoo4projects.com/website/social/linkedin" class="text-gray-400 hover:text-white transition-colors"><i class="fab fa-linkedin text-xl"></i></a>
<a href="https://odoo4projects.com/website/social/youtube" class="text-gray-400 hover:text-white transition-colors"><i class="fab fa-youtube text-xl"></i></a>
</div>
</div>
<div>
<h4 class="font-semibold mb-4 text-sm uppercase tracking-wider text-gray-400">Links</h4>
<ul class="space-y-2 text-sm">
<li><a href="https://odoo4projects.com" class="text-gray-400 hover:text-white transition-colors">Home</a></li>
<li><a href="https://odoo4projects.com/support" class="text-gray-400 hover:text-white transition-colors">Support</a></li>
<li><a href="https://odoo4projects.com/legal" class="text-gray-400 hover:text-white transition-colors">Legal</a></li>
<li><a href="https://odoo4projects.com/contactus" class="text-gray-400 hover:text-white transition-colors">Contact</a></li>
</ul>
</div>
<div>
<h4 class="font-semibold mb-4 text-sm uppercase tracking-wider text-gray-400">Services</h4>
<ul class="space-y-2 text-sm">
<li><a href="https://odoo4projects.com/workshops" class="text-gray-400 hover:text-white transition-colors">Workshops</a></li>
<li><a href="https://odoo4projects.com/affiliates" class="text-gray-400 hover:text-white transition-colors">Affiliates</a></li>
<li><a href="https://OD8N.com" class="text-gray-400 hover:text-white transition-colors">OD8N Partner</a></li>
</ul>
</div>
<div>
<h4 class="font-semibold mb-4 text-sm uppercase tracking-wider text-gray-400">Contact</h4>
<ul class="space-y-2 text-sm">
<li><a href="https://odoo4projects.com/contactus" class="text-gray-400 hover:text-white transition-colors">Contact Form</a></li>
<li><span class="text-gray-400">ODOO4projects LLC</span></li>
</ul>
</div>
</div>
<div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-500 text-sm">
<p>&copy; 2026 ODOO4projects LLC. All rights reserved.</p>
</div>
</div>
</footer>
<script>
const btn = document.getElementById('mobile-menu-button');
const menu = document.getElementById('mobile-menu');
btn.addEventListener('click', () => menu.classList.toggle('hidden'));
menu.querySelectorAll('a').forEach(a => a.addEventListener('click', () => menu.classList.add('hidden')));
</script>
</body>
</html>