Oliver/od8n_homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new design

Browse Source
This commit is contained in:
Oliver
2025-08-07 15:27:30 -03:00
parent d57a28d7a6
commit 64c6ba4b22
8 changed files with 1955 additions and 402 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
public/index.html.template
View File

@@ -140,26 +140,45 @@
<body>
<!-- Header Section -->
<header class="hero">
<div class="hero-content">
<h1>OD8N - Odoo & n8n Automation Experts</h1>
<header class="hero" id="home">
<div class="navbar-main">
<div class="logo">
<a href="/" class="logo-link" aria-label="Go to homepage">
<img src="./icons/logo-white.svg" alt="OD8N Logo" class="logo-icon">
</a>
</div>
<nav>
<button id="Burger-menu">
<i class="fa-solid fa-bars"></i>
</button>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#packages">packages</a></li>
<li><a href="#team">Team</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#story">Story</a></li>
</ul>
</nav>
</div>
<section class="hero-content">
<h1>Odoo & n8n Automation Experts</h1>
<p>We charge upfront — this lets us skip the sales talk and give serious clients immediate access to our best engineers.</p>
<ul class="hero-list">
<li>One-hour get-to-know session included — not satisfied? Full refund, no questions asked</li>
<li>Experts in Odoo and n8n — no outsourcing, no fluff</li>
<li>Hosting solutions for Odoo & n8n available</li>
<li>Custom development tailored to your workflows</li>
<li><span class="icon"><i class="fa-solid fa-circle-check"></i></span><span>One-hour get-to-know session included — not satisfied? Full refund, no questions asked</span></li>
<li><span class="icon"><i class="fa-solid fa-circle-check"></i></span><span>Experts in Odoo and n8n — no outsourcing, no fluff</span></li>
<li><span class="icon"><i class="fa-solid fa-circle-check"></i></span><span>Hosting solutions for Odoo & n8n available</span></li>
<li><span class="icon"><i class="fa-solid fa-circle-check"></i></span><span>Custom development tailored to your workflows</span></li>
</ul>
</div>
<button class="hero-button-cta plausible-event-name=ExplorePackages" onclick="location.href='#packages'">Explore packages</button>
</section>
</header>
<!-- Product Packages -->
<section id="packages" class="packages">
<h2>Our OD8N Service Packs for Odoo & n8n Automation</h2>
<div class="package-list">
<h2 class="section-header">Service Packs</h2>
<div class="package-list container">
<div class="package">
<h3>3 Hours</h3>
<h3>3 Hours<span class="asteric-icon">*</span></h3>
<p>Quick fixes and small automation improvements.</p>
<span class="price">$450</span>
<button class="btn-secondary plausible-event-name=ChoosePlan" onclick="sendMessageToBot('I want to buy 3 Hours of service for $450')">
@@ -168,17 +187,18 @@
</div>
<div class="package featured">
<h3>5 Hours</h3>
<div class="badge">Most popular</div>
<h3>5 Hours<span class="asteric-icon">*</span></h3>
<p>Ideal for mid-level integrations and custom workflows.</p>
<span class="price">$675</span>
<button class="btn-secondary" onclick="sendMessageToBot('I want to buy 5 hours of service for $675')">
<button class="btn-secondary btn-featured" onclick="sendMessageToBot('I want to buy 5 hours of service for $675')">
Choose Plan
</button>
</div>
<div class="package">
<h3>10 Hours</h3>
<h3>10 Hours<span class="asteric-icon">*</span></h3>
<p>Perfect for large projects and advanced automation.</p>
<span class="price">$1.200</span>
<button class="btn-secondary plausible-event-name=ChoosePlan" onclick="sendMessageToBot('I want to buy 10 hours of service for $1.200')">
@@ -190,11 +210,11 @@
<div class="package">
<h3>N8N Installation and Maintainance</h3>
<h3>N8N Installation and Maintainance<span class="asteric-icon">*</span></h3>
<p>We install N8N on your Container and maintain it for one year.</p>
<span class="price">$75 per Year</span>
<span class="price">$75/Year</span>
<button class="btn-secondary plausible-event-name=ChoosePlan" onclick="sendMessageToBot('I want you to install N8N on my container and maintain it.')">
Choose Plan
Subscribe
</button>
</div>
@@ -205,14 +225,14 @@
</div>
<p class="free-offer">All hour packs include <strong>1 Free Consulting Hour for first clients</strong> — with a 100% refund if you’re not satisfied!</p>
<p class="free-offer"><span class="asteric-icon">*</span> All hour packs include <strong>1 Free Consulting Hour for first clients</strong> — with a 100% refund if you’re not satisfied!</p>
</section>
<!-- Image Slider -->
<section class="slider-section">
<section id="team" class="slider-section">
<h2 class="section-header">Meet Our Team</h2>
<div class="slide">
<div class="slide container">
<div class="slide-content">
<div class="slide-image">
<img src="oliver.webp" alt="Oliver Arnold, Odoo & System Design Expert at OD8N">
@@ -231,7 +251,7 @@
</div>
<div class="slide">
<div class="slide container">
<div class="slide-content">
<div class="slide-image">
<img src="mark.webp" alt="Mark Gutmann, AI and Process Consulting Expert at OD8N">
@@ -258,86 +278,86 @@
<!-- Success Stories Accordion -->
<section class="accordion-section">
<h2>OD8N Success Stories in Automation</h2>
<div class="accordion">
<section id="story" class="accordion-section success-stories">
<h2 class="section-header">Success Stories in Automation</h2>
<div class="accordion container">
<div class="accordion-item">
<button class="accordion-title">From Manual Tracking to Automated Precision: A Retailer's Story</button>
<button class="accordion-title">From Manual Tracking to Automated Precision: A Retailer's Story <span class="panel-bar-title"><i class="fa-solid fa-chevron-down"></i></span></button>
<div class="accordion-content">
<section style="font-family: Arial, sans-serif; background: #f9f9f9; padding: 2rem; border-radius: 12px; max-width: 800px; margin: 2rem auto; box-shadow: 0 0 10px rgba(0,0,0,0.1);">
<h2 style="font-size: 2em; margin-bottom: 0.5em;">The Challenge: No API, No Problem.</h2>
<p style="font-size: 1.1em; line-height: 1.6;">
<section class="panel-bar-content">
<h2 class="panel-bar-content-title">The Challenge: No API, No Problem.</h2>
<p class="panel-bar-content-text">
A growing retail client was struggling with a major operational bottleneck: their shipping provider offered no API for tracking. This meant hours of manual data entry, a high risk of errors, and no real-time visibility into their 800+ daily shipments.
</p>
<p style="font-size: 1.1em; line-height: 1.6; margin-top: 1.2em;">
<p class="panel-bar-content-text">
We engineered a robust solution using n8n and Puppeteer to create a custom web scraper. This automated system intelligently mimics human interaction to extract shipment statuses twice daily, ensuring near real-time accuracy.
</p>
<p style="font-size: 1.1em; line-height: 1.6; margin-top: 1.2em;">
<p class="panel-bar-content-text">
<strong>The Result:</strong> Complete automation, zero manual entry, and a system that provides flawless, up-to-the-minute tracking data. All running seamlessly on our n8n community instance.
</p>
<div style="margin-top: 2em;">
<a href="#packages" class="btn-secondary">Automate Your Repetitive Tasks</a>
<a href="#packages" class="btn-text">Automate Your Repetitive Tasks <span class="btn-text-icon"><i class="fa-solid fa-angle-right"></i></span></a>
</div>
</section>
</div>
</div>
<div class="accordion-item">
<button class="accordion-title">Scaling on Demand: Automated Odoo Instance Management</button>
<button class="accordion-title">Scaling on Demand: Automated Odoo Instance Management <span class="panel-bar-title"><i class="fa-solid fa-chevron-down"></i></span></button>
<div class="accordion-content">
<section style="font-family: Arial, sans-serif; background: #f9f9f9; padding: 2rem; border-radius: 12px; max-width: 800px; margin: 2rem auto; box-shadow: 0 0 10px rgba(0,0,0,0.1);">
<h2 style="font-size: 2em; margin-bottom: 0.5em;">The Challenge: Global Scale, Local Management</h2>
<p style="font-size: 1.1em; line-height: 1.6;">
<section class="panel-bar-content">
<h2 class="panel-bar-content-title">The Challenge: Global Scale, Local Management</h2>
<p class="panel-bar-content-text">
ODOO4projects needed to instantly deploy new Odoo instances for clients worldwide, a process that was manual, time-consuming, and prone to configuration errors. They required a system that could scale globally and provide centralized oversight.
</p>
<p style="font-size: 1.1em; line-height: 1.6; margin-top: 1.2em;">
<p class="panel-bar-content-text">
We built a smart agent powered by an n8n workflow that completely automates the provisioning of Odoo instances. The system also generates a weekly server status report, providing a clear, consolidated view of their entire infrastructure.
</p>
<p style="font-size: 1.1em; line-height: 1.6; margin-top: 1.2em;">
<p class="panel-bar-content-text">
<strong>The Result:</strong> A fully automated, scalable, and reliable system for Odoo instance management, all running on our cost-effective n8n community instance.
</p>
<div style="margin-top: 2em;">
<a href="#packages" class="btn-secondary">Scale Your Operations with Automation</a>
<a href="#packages" class="btn-text">Scale Your Operations with Automation <span class="btn-text-icon"><i class="fa-solid fa-angle-right"></i></span></a>
</div>
</section>
</div>
</div>
<div class="accordion-item">
<button class="accordion-title">From Simple Chatbot to Intelligent Odoo-Powered Agent</button>
<button class="accordion-title">From Simple Chatbot to Intelligent Odoo-Powered Agent <span class="panel-bar-title"><i class="fa-solid fa-chevron-down"></i></span></button>
<div class="accordion-content">
<section style="font-family: Arial, sans-serif; background: #f9f9f9; padding: 2rem; border-radius: 12px; max-width: 800px; margin: 2rem auto; box-shadow: 0 0 10px rgba(0,0,0,0.1);">
<h2 style="font-size: 2em; margin-bottom: 0.5em;">The Challenge: Unlocking the Power of Conversational AI</h2>
<p style="font-size: 1.1em; line-height: 1.6;">
<section class="panel-bar-content">
<h2 class="panel-bar-content-title">The Challenge: Unlocking the Power of Conversational AI</h2>
<p class="panel-bar-content-text">
A client wanted to move beyond a basic FAQ chatbot. They needed an intelligent agent that could handle complex internal tasks, provide instant knowledge base access, and integrate seamlessly with their Odoo chatter.
</p>
<p style="font-size: 1.1em; line-height: 1.6; margin-top: 1.2em;">
<p class="panel-bar-content-text">
Leveraging powerful OCA modules and an n8n-powered backend, we built a sophisticated AI agent. This solution connects to LLMs, agents, and RAG pipelines, transforming their Odoo chatter into a powerful, intelligent hub for communication and task management.
</p>
<p style="font-size: 1.1em; line-height: 1.6; margin-top: 1.2em;">
<p class="panel-bar-content-text">
<strong>The Result:</strong> A truly intelligent conversational AI that streamlines employee onboarding, provides instant knowledge access, and can be embedded on any website.
</p>
<div style="margin-top: 2em;">
<a href="#packages" class="btn-secondary">Integrate AI into Your Workflows</a>
<a href="#packages" class="btn-text">Integrate AI into Your Workflows <span class="btn-text-icon"><i class="fa-solid fa-angle-right"></i></span></a>
</div>
</section>
</div>
</div>
<div class="accordion-item">
<button class="accordion-title">The Future of Sales: A Checkout Process Inside a Chatbox</button>
<button class="accordion-title">The Future of Sales: A Checkout Process Inside a Chatbox <span class="panel-bar-title"><i class="fa-solid fa-chevron-down"></i></span></button>
<div class="accordion-content">
<section style="font-family: Arial, sans-serif; background: #f9f9f9; padding: 2rem; border-radius: 12px; max-width: 800px; margin: auto; box-shadow: 0 0 10px rgba(0,0,0,0.1);">
<h2 style="font-size: 2em; margin-bottom: 0.5em;">The Challenge: Reinventing the Sales Funnel</h2>
<p style="font-size: 1.1em; line-height: 1.6;">
<section class="panel-bar-content">
<h2 class="panel-bar-content-title">The Challenge: Reinventing the Sales Funnel</h2>
<p class="panel-bar-content-text">
We asked ourselves: could we transform a simple conversation into a complete sales transaction? The goal was to create a frictionless procurement workflow that eliminates the need for emails, forms, and spreadsheets.
</p>
<p style="font-size: 1.1em; line-height: 1.6; margin-top: 1.5em;">
<p class="panel-bar-content-text">
Using only n8n and PayPal, we built a revolutionary checkout process that lives entirely within a chatbox. This allows for a seamless, conversational sales experience, from initial inquiry to final purchase.
</p>
<p style="font-size: 1.1em; line-height: 1.6; margin-top: 1.5em;">
<p class="panel-bar-content-text">
<strong>The Result:</strong> A groundbreaking, conversational commerce solution that redefines the client interaction and digital selling. Ready to see it in action?
</p>
<div style="margin-top: 2em;">
<a href="#packages" class="btn-secondary">Experience the Future of Sales</a>
<a href="#packages" class="btn-text">Experience the Future of Sales <span class="btn-text-icon"><i class="fa-solid fa-angle-right"></i></span></a>
</div>
</section>
</div>