new landingpage
This commit is contained in:
carlosmintfan
+356
-51
@@ -3,84 +3,389 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Odoo Apps & AI-Powered Development</title>
|
||||
<title>ODOO4projects | Odoo Extensions for n8n & AI Automation</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap">
|
||||
<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>
|
||||
body { font-family: 'Inter', sans-serif; }
|
||||
.hero-bg { background: linear-gradient(90deg, #5A67D8 0%, #B794F4 100%); }
|
||||
@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-gray-50">
|
||||
<body class="bg-white text-gray-800 font-sans">
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="hero-bg text-white py-24">
|
||||
<div class="container mx-auto text-center px-6">
|
||||
<h1 class="text-4xl md:text-6xl font-bold mb-4">Odoo Apps Developed by Experts</h1>
|
||||
<p class="text-xl md:text-2xl mb-8">We create custom Odoo apps powered by AI to streamline your business processes efficiently.</p>
|
||||
<a href="#signup" class="bg-white text-indigo-600 font-semibold px-8 py-4 rounded-lg shadow hover:bg-gray-100 transition">Get Started</a>
|
||||
<!-- 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> & 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>
|
||||
|
||||
<!-- Odoo Hosting Signup Form -->
|
||||
<section id="signup" class="py-20 bg-white">
|
||||
<div class="container mx-auto max-w-xl px-6">
|
||||
<h2 class="text-3xl font-bold text-center mb-6">Start Your Odoo Project Today</h2>
|
||||
<form action="https://your-odoo-hosting-link.com/signup" method="POST" class="bg-gray-50 p-8 rounded-lg shadow-md">
|
||||
<div class="mb-4">
|
||||
<label class="block text-gray-700 mb-2">Full Name</label>
|
||||
<input type="text" name="name" required class="w-full p-3 rounded border border-gray-300 focus:ring-indigo-500 focus:border-indigo-500">
|
||||
<!-- 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>
|
||||
<div class="mb-4">
|
||||
<label class="block text-gray-700 mb-2">Email Address</label>
|
||||
<input type="email" name="email" required class="w-full p-3 rounded border border-gray-300 focus:ring-indigo-500 focus:border-indigo-500">
|
||||
<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 & ES translations and future updates for that Odoo version.</p>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label class="block text-gray-700 mb-2">Company</label>
|
||||
<input type="text" name="company" class="w-full p-3 rounded border border-gray-300 focus:ring-indigo-500 focus:border-indigo-500">
|
||||
</div>
|
||||
<button type="submit" class="w-full bg-indigo-600 text-white py-3 font-semibold rounded hover:bg-indigo-700 transition">Sign Up</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Call to Action Section -->
|
||||
<section class="py-20 bg-indigo-50">
|
||||
<div class="container mx-auto text-center px-6">
|
||||
<h2 class="text-3xl font-bold mb-4">Schedule a Meeting with Our Development Team</h2>
|
||||
<p class="text-lg mb-6">Discuss your ideas and get expert guidance from our experienced developers.</p>
|
||||
<a href="https://calendar.google.com/calendar/u/0/appointments/schedules/AcZssZ3DDbaiHFlhNhWySszAQoPXE_H73QLqYT3w7H9IYWC76RA" target="_blank" class="bg-indigo-600 text-white px-8 py-4 rounded-lg font-semibold hover:bg-indigo-700 transition">Book a Meeting</a>
|
||||
<!-- 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/<id>?db=<dbname> Authorization: Bearer <token>
|
||||
</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 & 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 & 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 Authorization: Bearer <api-key>
|
||||
</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 & Graph views</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- N8N Modules Teaser Section -->
|
||||
<section class="py-20 bg-white">
|
||||
<div class="container mx-auto text-center px-6">
|
||||
<h2 class="text-3xl font-bold mb-4">Explore Our Upcoming N8N Modules</h2>
|
||||
<p class="text-lg mb-6">Automate your workflows seamlessly with our custom-built N8N integrations. Coming soon!</p>
|
||||
<div class="grid md:grid-cols-3 gap-6 mt-8">
|
||||
<div class="bg-gray-50 p-6 rounded shadow hover:shadow-lg transition">
|
||||
<h3 class="text-xl font-semibold mb-2">Module 1</h3>
|
||||
<p>Integrate Odoo CRM with N8N for smart automation and lead management.</p>
|
||||
<!-- 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="bg-gray-50 p-6 rounded shadow hover:shadow-lg transition">
|
||||
<h3 class="text-xl font-semibold mb-2">Module 2</h3>
|
||||
<p>Automate accounting and invoicing with N8N workflows and Odoo apps.</p>
|
||||
<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 class="bg-gray-50 p-6 rounded shadow hover:shadow-lg transition">
|
||||
<h3 class="text-xl font-semibold mb-2">Module 3</h3>
|
||||
<p>Connect your marketing tools to Odoo through N8N for efficient campaigns.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-gray-800 text-white py-8">
|
||||
<div class="container mx-auto text-center">
|
||||
<p>© 2026 Odoo Apps & AI-Powered Development. All rights reserved.</p>
|
||||
<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>© 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>
|
||||
|
||||
Reference in New Issue
Block a user