From 64c6ba4b22ae7619e8d566b2067dc5164d87a866 Mon Sep 17 00:00:00 2001 From: Oliver Date: Thu, 7 Aug 2025 15:27:30 -0300 Subject: [PATCH] new design --- public/app.js | 109 +++- public/icons/logo-white.svg | 6 + public/index.html | 321 +++++++--- public/index.html.design | 701 +++++++++++++++++++++ public/index.html.template | 128 ++-- public/style.css | 1085 +++++++++++++++++++++++++-------- public/widget/custom/od8n.css | 3 + serve | 4 +- 8 files changed, 1955 insertions(+), 402 deletions(-) create mode 100644 public/icons/logo-white.svg create mode 100644 public/index.html.design diff --git a/public/app.js b/public/app.js index f356a88..99e5759 100644 --- a/public/app.js +++ b/public/app.js @@ -1,21 +1,82 @@ +/** + * Function to handle the scroll behavior of the navigation bar + */ + +let header = document.querySelector('.navbar-main'); +let buttonMobile = document.getElementById('Burger-menu'); +let nav = document.querySelector('nav'); +let links = document.querySelectorAll('nav ul li a'); + +const scrollFunction = () => { + if ( + document.body.scrollTop > 100 || + document.documentElement.scrollTop > 100 + ) { + header.classList.add("bg"); + } else { + header.classList.remove("bg"); + } +}; + +window.addEventListener('scroll', scrollFunction); +window.addEventListener('load', scrollFunction); + +/** + * Function to handle the accordion behavior + * for the FAQ section + */ + const accTitles = document.querySelectorAll('.accordion-title'); +function closeAllAccordions(exceptThis = null) { + accTitles.forEach(title => { + if (title !== exceptThis) { + title.classList.remove('active'); + const content = title.nextElementSibling; + content.style.maxHeight = null; + } + }); +} + +function openAccordion(title) { + const content = title.nextElementSibling; + requestAnimationFrame(() => { + content.style.maxHeight = content.scrollHeight + 'px'; + }); + title.classList.add('active'); +} + accTitles.forEach(title => { title.addEventListener('click', () => { - accTitles.forEach(otherTitle => { - if (otherTitle !== title) { - otherTitle.classList.remove('active'); - otherTitle.nextElementSibling.style.display = 'none'; - } - }); - const content = title.nextElementSibling; - const isOpen = content.style.display === 'block'; - title.classList.toggle('active'); - content.style.display = isOpen ? 'none' : 'block'; + const isOpen = title.classList.contains('active'); + + if (isOpen) { + // Close current + title.classList.remove('active'); + content.style.maxHeight = null; + } else { + // Close others, open this + closeAllAccordions(title); + openAccordion(title); + } }); }); +// Adjust height on resize (especially for images inside content) +window.addEventListener('resize', () => { + accTitles.forEach(title => { + if (title.classList.contains('active')) { + const content = title.nextElementSibling; + content.style.maxHeight = content.scrollHeight + 'px'; + } + }); +}); + +/** + * Function to handle team section slider + */ + const slides = document.querySelectorAll('.slide'); let currentIndex = 0; @@ -32,16 +93,40 @@ if (slides.length > 0) { setInterval(nextSlide, 10000); } +/** + * Function to handle the blog teaser toggle + * for showing full content + */ function toggleContent(button) { const teaser = button.parentElement; const fullContent = teaser.querySelector('.blog-full-content'); if (fullContent.style.display === 'none') { fullContent.style.display = 'block'; - button.textContent = 'Read Less'; + button.innerHTML = 'Read Less '; + button.classList.add('read-less-btn'); } else { fullContent.style.display = 'none'; - button.textContent = 'Read More'; + button.innerHTML = 'Read More '; } } +/** + * Function to handle the mobile menu toggle + */ + +const mobMenu = () => { + for (let i = 0; i < links.length; i++) { + links[i].addEventListener('click', mobMenu) + } + if (nav.classList.contains('responsive')) { + nav.classList.remove('responsive'); + document.body.style.overflow = ''; + + } else { + nav.classList.add('responsive'); + document.body.style.overflow = 'hidden'; + } +} + +buttonMobile.addEventListener('click', mobMenu); \ No newline at end of file diff --git a/public/icons/logo-white.svg b/public/icons/logo-white.svg new file mode 100644 index 0000000..6f33803 --- /dev/null +++ b/public/icons/logo-white.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/index.html b/public/index.html index fa04e75..af8769e 100644 --- a/public/index.html +++ b/public/index.html @@ -140,26 +140,45 @@ -
-
-

OD8N - Odoo & n8n Automation Experts

+
+
+ + +
+
+

Odoo & n8n Automation Experts

We charge upfront — this lets us skip the sales talk and give serious clients immediate access to our best engineers.

    -
  • One-hour get-to-know session included — not satisfied? Full refund, no questions asked
    • -
  • Experts in Odoo and n8n — no outsourcing, no fluff
    • -
  • Hosting solutions for Odoo & n8n available
    • -
  • Custom development tailored to your workflows
    • +
  • One-hour get-to-know session included — not satisfied? Full refund, no questions asked
    • +
  • Experts in Odoo and n8n — no outsourcing, no fluff
    • +
  • Hosting solutions for Odoo & n8n available
    • +
  • Custom development tailored to your workflows
- -
+ +
-

Our OD8N Service Packs for Odoo & n8n Automation

-
+

Service Packs

+
-

3 Hours

+

3 Hours*

Quick fixes and small automation improvements.

$450
-

5 Hours

+
Most popular
+

5 Hours*

Ideal for mid-level integrations and custom workflows.

$675 -
-

10 Hours

+

10 Hours*

Perfect for large projects and advanced automation.

$1.200
@@ -205,14 +225,14 @@
-

All hour packs include 1 Free Consulting Hour for first clients — with a 100% refund if you’re not satisfied!

+

* All hour packs include 1 Free Consulting Hour for first clients — with a 100% refund if you’re not satisfied!

-
+
+

Meet Our Team

- -
+
Oliver Arnold, Odoo & System Design Expert at OD8N @@ -231,7 +251,7 @@
-
+
Mark Gutmann, AI and Process Consulting Expert at OD8N @@ -252,9 +272,48 @@
-
- -
+
+

Latest Blog Posts

+
+ + + + + + + + + + + + + + +
+

From Chat to Checkout: Building a Dynamic Chat Widget with PayPal and n8n

+ 30.07.2025 +
+ So you've wired up a chat with your AI agent and it responds nicely — but what if your chat could guide users through an entire procurement flow and end with a PayPal payment button, ready to go? +
+ +
@@ -383,7 +564,7 @@ Here’s a full video walkthrough of the dynamic chat widget in action: -

N8N: The Agile Integrator for the AI Era

+

N8N: The Agile Integrator for the AI Era

But the world is changing. Fast. AI tools are evolving weekly. APIs are everywhere. Customers demand speed and personalization like never before.

@@ -399,12 +580,12 @@ Here’s a full video walkthrough of the dynamic chat widget in action:

While ODOO keeps your core business running like a well-oiled machine, N8N lets us bolt on new AI-driven capabilities almost instantly—without waiting for the next ERP update cycle.

-

Together: The Future of Digital Operations

+

Together: The Future of Digital Operations

By combining ODOO and N8N, we create a powerful synergy. One gives you reliable structure. The other, unmatched flexibility. This strategy enables us to build systems that are not only stable—but also smart, adaptive, and future-ready.

- 💡 Smart Strategy = ODOO as the backbone + N8N as the nervous system. + 💡 Smart Strategy = ODOO as the backbone + N8N as the nervous system.
@@ -413,93 +594,93 @@ Here’s a full video walkthrough of the dynamic chat widget in action:
- +
- +
-
-

OD8N Success Stories in Automation

-
+
+

Success Stories in Automation

+
- +
-
-

The Challenge: No API, No Problem.

-

+

+

The Challenge: No API, No Problem.

+

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.

-

+

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.

-

+

The Result: 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.

- +
-
-

The Challenge: Global Scale, Local Management

-

+

+

The Challenge: Global Scale, Local Management

+

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.

-

+

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.

-

+

The Result: A fully automated, scalable, and reliable system for Odoo instance management, all running on our cost-effective n8n community instance.

- +
-
-

The Challenge: Unlocking the Power of Conversational AI

-

+

+

The Challenge: Unlocking the Power of Conversational AI

+

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.

-

+

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.

-

+

The Result: A truly intelligent conversational AI that streamlines employee onboarding, provides instant knowledge access, and can be embedded on any website.

- +
-
-

The Challenge: Reinventing the Sales Funnel

-

+

+

The Challenge: Reinventing the Sales Funnel

+

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.

-

+

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.

-

+

The Result: A groundbreaking, conversational commerce solution that redefines the client interaction and digital selling. Ready to see it in action?

diff --git a/public/index.html.design b/public/index.html.design new file mode 100644 index 0000000..af8769e --- /dev/null +++ b/public/index.html.design @@ -0,0 +1,701 @@ + + + + + + + + + + OD8N - Odoo & n8n Automation Experts + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + +
+
+

Odoo & n8n Automation Experts

+

We charge upfront — this lets us skip the sales talk and give serious clients immediate access to our best engineers.

+
    +
  • One-hour get-to-know session included — not satisfied? Full refund, no questions asked
    • +
  • Experts in Odoo and n8n — no outsourcing, no fluff
    • +
  • Hosting solutions for Odoo & n8n available
    • +
  • Custom development tailored to your workflows
    • +
+ +
+
+ + +
+

Service Packs

+
+
+

3 Hours*

+

Quick fixes and small automation improvements.

+ $450 + + +
+
+
Most popular
+

5 Hours*

+

Ideal for mid-level integrations and custom workflows.

+ $675 + + + +
+
+

10 Hours*

+

Perfect for large projects and advanced automation.

+ $1.200 + +
+ + + + +
+

N8N Installation and Maintainance*

+

We install N8N on your Container and maintain it for one year.

+ $75/Year + +
+ + + + + + + +
+

* All hour packs include 1 Free Consulting Hour for first clients — with a 100% refund if you’re not satisfied!

+
+ + +
+

Meet Our Team

+ +
+
+
+ Oliver Arnold, Odoo & System Design Expert at OD8N +
+
+

Oliver Arnold

+

Expert in Odoo & System Design

+

I am an expert in Odoo and system design with years of experience in consulting.

+
    +
  • Odoo functional consulting & development
    • +
  • N8N workflow design & custom nodes
    • +
  • System integration & architecture design
    • +
+
+
+
+ + +
+
+
+ Mark Gutmann, AI and Process Consulting Expert at OD8N +
+
+

Mark Gutmann

+

Expert in AI and Process Consulting

+

I am an expert in Odoo and system design with years of experience in consulting.

+
    +
  • Odoo functional consulting & development
    • +
  • N8N workflow design & custom nodes
    • +
  • System integration & architecture design
    • +
+
+
+
+ + +
+ +
+

Latest Blog Posts

+
+ + + + + + + + + + + + + + +
+

From Chat to Checkout: Building a Dynamic Chat Widget with PayPal and n8n

+ 30.07.2025 +
+ So you've wired up a chat with your AI agent and it responds nicely — but what if your chat could guide users through an entire procurement flow and end with a PayPal payment button, ready to go? +
+ + +
+ +
+

ODOO & N8N: Our Strategy

+ 31.07.2025 +
+

At the heart of every modern enterprise lies the need to balance two forces: stability and agility. Our approach harnesses the best of both worlds—leveraging the proven foundation of ODOO while embracing the innovation engine of N8N.

+
+ + +
+
+
+ + + +
+

Success Stories in Automation

+
+
+ +
+
+

The Challenge: No API, No Problem.

+

+ 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. +

+

+ 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. +

+

+ The Result: 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. +

+ +
+
+
+
+ +
+
+

The Challenge: Global Scale, Local Management

+

+ 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. +

+

+ 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. +

+

+ The Result: A fully automated, scalable, and reliable system for Odoo instance management, all running on our cost-effective n8n community instance. +

+ +
+
+
+
+ +
+
+

The Challenge: Unlocking the Power of Conversational AI

+

+ 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. +

+

+ 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. +

+

+ The Result: A truly intelligent conversational AI that streamlines employee onboarding, provides instant knowledge access, and can be embedded on any website. +

+ +
+
+
+ +
+ +
+
+

The Challenge: Reinventing the Sales Funnel

+

+ 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. +

+

+ 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. +

+

+ The Result: A groundbreaking, conversational commerce solution that redefines the client interaction and digital selling. Ready to see it in action? +

+ +
+
+
+
+
+ +
+

For ODOO and N8N tips and tricks and news follow us on + +

+

© 2025 OD8N. All Rights Reserved. Service provided by ASC Consultatores Paraguay

+
+ + + + + diff --git a/public/index.html.template b/public/index.html.template index 6a4d1ae..4173df7 100644 --- a/public/index.html.template +++ b/public/index.html.template @@ -140,26 +140,45 @@ -
-
-

OD8N - Odoo & n8n Automation Experts

+
+
+ + +
+
+

Odoo & n8n Automation Experts

We charge upfront — this lets us skip the sales talk and give serious clients immediate access to our best engineers.

    -
  • One-hour get-to-know session included — not satisfied? Full refund, no questions asked
    • -
  • Experts in Odoo and n8n — no outsourcing, no fluff
    • -
  • Hosting solutions for Odoo & n8n available
    • -
  • Custom development tailored to your workflows
    • +
  • One-hour get-to-know session included — not satisfied? Full refund, no questions asked
    • +
  • Experts in Odoo and n8n — no outsourcing, no fluff
    • +
  • Hosting solutions for Odoo & n8n available
    • +
  • Custom development tailored to your workflows
- -
+ +
-

Our OD8N Service Packs for Odoo & n8n Automation

-
+

Service Packs

+
-

3 Hours

+

3 Hours*

Quick fixes and small automation improvements.

$450
-

5 Hours

+
Most popular
+

5 Hours*

Ideal for mid-level integrations and custom workflows.

$675 -
-

10 Hours

+

10 Hours*

Perfect for large projects and advanced automation.

$1.200
@@ -205,14 +225,14 @@
-

All hour packs include 1 Free Consulting Hour for first clients — with a 100% refund if you’re not satisfied!

+

* All hour packs include 1 Free Consulting Hour for first clients — with a 100% refund if you’re not satisfied!

-
+
+

Meet Our Team

- -
+
Oliver Arnold, Odoo & System Design Expert at OD8N @@ -231,7 +251,7 @@
-
+
Mark Gutmann, AI and Process Consulting Expert at OD8N @@ -258,86 +278,86 @@ -
-

OD8N Success Stories in Automation

-
+
+

Success Stories in Automation

+
- +
-
-

The Challenge: No API, No Problem.

-

+

+

The Challenge: No API, No Problem.

+

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.

-

+

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.

-

+

The Result: 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.

- +
-
-

The Challenge: Global Scale, Local Management

-

+

+

The Challenge: Global Scale, Local Management

+

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.

-

+

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.

-

+

The Result: A fully automated, scalable, and reliable system for Odoo instance management, all running on our cost-effective n8n community instance.

- +
-
-

The Challenge: Unlocking the Power of Conversational AI

-

+

+

The Challenge: Unlocking the Power of Conversational AI

+

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.

-

+

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.

-

+

The Result: A truly intelligent conversational AI that streamlines employee onboarding, provides instant knowledge access, and can be embedded on any website.

- +
-
-

The Challenge: Reinventing the Sales Funnel

-

+

+

The Challenge: Reinventing the Sales Funnel

+

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.

-

+

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.

-

+

The Result: A groundbreaking, conversational commerce solution that redefines the client interaction and digital selling. Ready to see it in action?

diff --git a/public/style.css b/public/style.css index a3258a9..665f013 100644 --- a/public/style.css +++ b/public/style.css @@ -1,3 +1,40 @@ +/* Variables */ + +:root { + /* Color Palette */ + --color-primary: #4a90e2; + --color-primary-dark: #0070c0; + --color-blue: #1D4ED8; + --color-accent: #FACC15; + --color-bg: #f9f9f9; + --color-text: #111827; + --color-muted: #6B7280; + --color-white: #ffffff; + + /* Typography */ + --font-family: Arial, Helvetica, sans-serif; + --font-size-hero: 48px; + --font-size-title: 32px; + --font-size-subtitle: 24px; + --font-size-body: 18px; + --font-size-small: 14px; + + /* Spacing */ + --spacing-xs: 8px; + --spacing-sm: 16px; + --spacing-md: 24px; + --spacing-lg: 32px; + --spacing-xl: 48px; + --spacing-section: 80px; + + /* Buttons */ + --button-radius: 12px; + --button-padding: 16px 32px; + --button-font-size: 16px; +} + +/* General */ + * { margin: 0; padding: 0; @@ -6,21 +43,85 @@ body { font-family: 'Arial', sans-serif; - color: #333; + color: var(--color-text); line-height: 1.6; - background: #f9f9f9; +} + +html { + scroll-behavior: smooth; +} + +/* Global common */ + +.container { + max-width: 80%; + margin: 0 auto; + padding: 80px 0; +} + +.section-header { + font-size: var(--font-size-title); + text-align: center; + padding-top: 100px; +} + +/* Navigation */ + +header .navbar-main { + min-height: 50px; + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem 5rem; + width: 100%; + position: fixed; + top: 0; + z-index: 3; + box-shadow: 0 0 15px rgba(var(--color-primary-dark), 0.479); +} + +header .logo img { + width: 100px; +} + +#Burger-menu { + display: none; +} + +header nav ul { + list-style-type: none; +} + +header nav ul li { + display: inline-block; + padding: 0 1rem; +} + +header a { + text-decoration: none; + color: var(--color-bg); +} + +.bg { + background: linear-gradient(to left, var(--color-primary), var(--color-primary-dark)); + box-shadow: 0 0 15px rgba(var(--color-blue), 0.479); } /* Hero Section */ -.hero { - background: linear-gradient(to right, #4a90e2, #0070c0); - color: #fff; - text-align: center; - padding: 80px 20px; +header.hero { + background: linear-gradient(to right, var(--color-primary), var(--color-primary-dark)); + color: var(--color-white); } -.hero h1 { - font-size: 2.5rem; +.hero-content { + max-width: 80%; + margin: 0 auto; + padding-top: 200px; + padding-bottom: 150px; +} + +header.hero h1 { + font-size: 3rem; margin-bottom: 20px; } @@ -29,275 +130,305 @@ body { margin-bottom: 30px; } -.btn-primary { - background: #fff; - color: #0070c0; - padding: 12px 24px; - text-decoration: none; - border-radius: 25px; - font-weight: bold; - transition: background 0.3s; -} - -.btn-primary:hover { - background: #e0e0e0; -} - -/* Packages */ -.packages { - text-align: center; - padding: 60px 20px; - background: #fff; -} - -.packages h2 { - font-size: 2rem; - margin-bottom: 40px; -} - -.package-list { - display: flex; - justify-content: center; - flex-wrap: wrap; - gap: 20px; -} - -.package { - background: #f5f5f5; - padding: 20px; - border-radius: 12px; - width: 250px; - transition: transform 0.3s; -} - -.package:hover { - transform: translateY(-5px); -} - -.package.featured { - border: 2px solid #0070c0; - background: #eaf4ff; -} - -.price { - font-size: 1.5rem; - color: #0070c0; - display: block; - margin: 15px 0; -} - -.btn-secondary { - background: #0070c0; - color: #fff; - padding: 10px 20px; - text-decoration: none; - border-radius: 20px; - transition: background 0.3s; -} - -.btn-secondary:hover { - background: #005a9e; -} - -.free-offer { - margin-top: 20px; - font-style: italic; -} - -.slider-section { - position: relative; - height: 500px; /* Adjust as needed */ - overflow: hidden; -} - -.slider { - position: relative; - height: 400px; /* Or auto if content is static height */ - overflow: hidden; -} - - .slide { - top: 0; - left: 0; - display: flex; - justify-content: center; - align-items: center; - padding: 40px; - background: linear-gradient(135deg, #f0f4f8, #d9e4f5); - border-radius: 16px; - opacity: 0; - position: absolute; - transition: opacity 1s ease-in-out; - width: 100%; - box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); - z-index: 1; - } - - .slide-content { - display: flex; - flex-wrap: wrap; - max-width: 1000px; - align-items: center; - gap: 40px; - } - - .slide-image img { - max-width: 300px; - border-radius: 16px; - box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); - } - - .slide-text { - flex: 1; - min-width: 250px; - } - - .slide-text h2 { - font-size: 2rem; - margin-bottom: 8px; - color: #222; - } - - .slide-text h4 { - font-size: 1.2rem; - color: #666; - margin-bottom: 16px; - } - - .slide-text p { - font-size: 1rem; - color: #444; - margin-bottom: 20px; - line-height: 1.5; - } - - .slide-text ul { - list-style-type: disc; - padding-left: 20px; - color: #333; - } - - .slide-text ul li { - margin-bottom: 8px; - font-size: 1rem; - } - - @media (max-width: 768px) { - .slide-content { - flex-direction: column; - text-align: center; - } - - .slide-image img { - max-width: 80%; - } - } - - - .slide.active { - opacity: 1; - z-index: 2; - } - - - - -/* Accordion */ -.accordion-section { - padding: 60px 20px; - background: #fff; -} - -.accordion-item { - margin-bottom: 10px; -} - -.accordion-title { - background: #0070c0; - color: #fff; - padding: 15px; - border: none; - width: 100%; - text-align: left; - font-size: 1rem; - cursor: pointer; - border-radius: 8px; -} - -.accordion-title.active { - background: #005a9e; -} - -.accordion-content { - display: none; - padding: 15px; - background: #f1f1f1; - border-radius: 0 0 8px 8px; -} - -/* Footer */ -footer { - text-align: center; - padding: 20px; - background: #333; - color: #fff; - font-size: 0.9rem; -} - -footer a { - color: #fff; - margin: 0 5px; - font-size: 1.2rem; - text-decoration: none; -} - -footer a:hover { - color: #0070c0; -} - .hero-list { list-style: none; text-align: left; - max-width: 600px; - margin: 30px auto 0; padding: 0; font-size: 1.1rem; } .hero-list li { margin-bottom: 12px; - padding-left: 28px; position: relative; } -.hero-list li::before { - content: "✔"; - position: absolute; - left: 0; - color: #fff; - background: #0070c0; - border-radius: 50%; - width: 20px; - height: 20px; - text-align: center; - line-height: 20px; - font-size: 0.9rem; +span.icon { + padding-right: 10px; + font-size: 1rem; } +/* Packages */ +.packages { + text-align: center; +} + +.package-list { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + gap: 15px; +} + +.package { + background: var(--color-white); + border: 1px solid #e5e7eb; + border-radius: 8px; + padding: var(--spacing-lg) var(--spacing-md); + position: relative; + display: flex; + flex-direction: column; + justify-content: space-between; + width: 20%; + box-shadow: 0 2px 6px rgba(var(--color-text), 0.05); + transition: transform 0.3s; + margin-bottom: 10px; +} + +.package:hover { + transform: translateY(-5px); + box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px; +} + +.package h3 { + font-size: 1.25rem; + margin-bottom: var(--spacing-sm); +} + +h3 span.asteric-icon { + color: var(--color-muted); + font-weight: normal; + padding-left: 0.5rem; +} + +.package p { + color: var(--color-muted); + font-size: 0.95rem; + margin-bottom: var(--spacing-md); + line-height: 1.5; +} + +.package .price { + font-size: 1.5rem; + font-weight: bold; + margin-bottom: var(--spacing-md); + color: var(--color-primary-dark); +} + +.package.featured { + border: 1px solid var(--color-primary-dark); + background-color: #eff6ff; +} + +.featured .badge { + position: absolute; + top: -12px; + left: 16px; + background-color: var(--color-primary); + color: var(--color-white); + padding: 4px 12px; + font-size: 0.75rem; + font-weight: 600; + border-radius: 12px; +} + +.free-offer { + font-size: 1rem; + color: var(--color-muted); + margin-bottom: 80px; + line-height: 1.5; +} + +/* Team */ + +#team { + background: var(--color-bg); + margin-bottom: 20px; +} + +.slider-section { + position: relative; + height: 550px; + overflow: hidden; + background: var(--color-bg); +} + +.slider { + position: relative; + height: 400px; + overflow: hidden; +} + +.slide { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + opacity: 0; + transition: opacity 1s ease-in-out; + display: flex; + justify-content: center; + align-items: center; + width: 100%; + margin-top: 80px; + z-index: 1; +} + +.slide-content { + display: flex; + flex-wrap: wrap; + max-width: 1000px; + align-items: center; + gap: 40px; +} + +.slide-image img { + min-width: 200px; + max-width: 300px; + border-radius: 16px; + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); +} + +.slide-text { + flex: 1; + min-width: 250px; +} + +.slide-text h2 { + font-size: 2rem; + margin-bottom: 8px; + color: #222; +} + +.slide-text h4 { + font-size: 1.2rem; + color: #666; + margin-bottom: 16px; +} + +.slide-text p { + font-size: 1rem; + color: #444; + margin-bottom: 20px; + line-height: 1.5; +} + +.slide-text ul { + list-style-type: disc; + padding-left: 20px; + color: #333; +} + +.slide-text ul li { + margin-bottom: 8px; + font-size: 1rem; +} + +@media (max-width: 768px) { + .slide-content { + flex-direction: column; + text-align: center; + } + + .slide-image img { + max-width: 80%; + } +} + +.slide.active { + opacity: 1; + z-index: 2; +} + +/* Accordion */ +.accordion-section { + padding: 60px 20px; + background: var(--color-white); +} + +.accordion-item { + margin-bottom: 1rem; + border-radius: 8px; + overflow: hidden; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04); +} + +.accordion-title { + background: var(--color-white); + color: var(--color-primary-dark); + padding: 1rem 1.25rem; + border: none; + width: 100%; + text-align: left; + font-size: 1rem; + font-weight: 500; + cursor: pointer; + display: flex; + justify-content: space-between; + align-items: center; + border-radius: 8px; + transition: background-color 0.3s ease; +} + +.accordion-title:hover { + background-color: var(--color-primary-dark); + color: var(--color-white); +} + +.accordion-title.active { + font-weight: 600; + background: var(--color-primary-dark); + color: var(--color-white); + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +.accordion-title.active .panel-bar-title i { + transform: rotate(180deg); +} + +.panel-bar-title i { + transition: transform 0.3s ease; + font-size: 1rem; +} + +.accordion-content { + max-height: 0; + overflow: hidden; + background: #f1f1f1; + padding: 0 1.25rem; + border-radius: 0 0 8px 8px; + transition: max-height 0.4s ease, padding 0.3s ease; +} + +.accordion-title.active + .accordion-content { + padding: 1rem 1.25rem; +} + +/* Blog */ +.blog-section { + padding: 0; +} + +.blog-list { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + gap: 0.5rem; + padding-right: 0; + padding-left: 0; +} .blog-teaser { - border: 1px solid #ddd; + background: var(--color-white); + border: 1px solid #e5e7eb; + border-radius: 8px; padding: 1rem; margin-bottom: 1.5rem; - border-radius: 8px; - background: #fff; - max-width: 600px; + max-width: 48%; + box-shadow: 0 2px 6px rgba(var(--color-text), 0.05); + transition: transform 0.3s ease; +} + +.blog-teaser:hover { + transform: translateY(-6px); + box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px; } .blog-title { margin: 0 0 0.3rem 0; font-weight: 700; - color: #222; + color: var(--color-primary); + font-size: 1.5rem; } .blog-date { @@ -310,25 +441,453 @@ footer a:hover { .blog-snippet { font-size: 1rem; line-height: 1.4; - color: #444; + color: var(--color-muted); margin-bottom: 1rem; } .blog-full-content p { margin: 0.5rem 0; - color: #333; + color: var(--color-muted); +} + +.blog-full-content p a { + color: var(--color-primary-dark); +} + +.blog-full-content ul { + padding-left: 1.5rem; + margin: 0.5rem 0; + color: var(--color-muted); +} + +.blog-full-content .blog-video-description { + font-size: 1rem; + color: var(--color-muted); +} + +.blog-full-content .ytvideo { + width: 100%; + height: 315px; + margin: 20px 0; +} + +.blog-full-content img { + width: 100%; + height: auto; +} + +.blog-full-content div.cta { + margin: 20px 0; + color: var(--color-muted); +} + +h2.blog-content-section-title { + font-size: 1.3rem; + color: var(--color-text); + margin: 20px 0; +} + +.blog-content-section-highlight { + font-size: 1rem; + color: var(--color-text); + margin: 20px 0; +} + +/* Stories */ + +.success-stories { + background: var(--color-bg); + padding: 0; +} + +.panel-bar-content { + font-family: var(--font-family); + background: var(--color-bg); + padding: 2rem; + border-radius: 8px; + max-width: 100%; + margin: 1rem auto; + box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; +} + +.panel-bar-content-title { + font-size: 1.5rem; + font-weight: 400; + margin-bottom: 0.5em; + color: var(--color-primary-dark); +} + +.panel-bar-content-text { + font-size: 1rem; + line-height: 1.5; + margin-top: 1.5em; + color: var(--color-muted); +} + +/* Footer */ +footer { + text-align: center; + padding: 20px; + background: #333; + color: var(--color-white); + font-size: 1rem; +} + +footer a { + color: var(--color-white); + margin: 0 5px; + font-size: 1.2rem; + text-decoration: none; +} + +footer a:hover { + color: var(--color-primary); +} + +/* buttons */ +.btn-primary { + background: var(--color-primary-dark); + color: var(--color-white); + font-size: 1rem; + padding: 12px 24px; + text-decoration: none; + border: 1px solid var(--color-primary-dark); + border-radius: 25px; + font-weight: bold; + transition: background 0.3s; +} + +.btn-primary:hover { + background: var(--color-primary); + color: var(--color-white); + border: 1px solid var(--color-primary); + cursor: pointer; +} + +.btn-secondary { + background: var(--color-white); + color: var(--color-primary-dark); + font-size: 1rem; + padding: 12px 24px; + text-decoration: none; + border: 1px solid var(--color-muted); + border-radius: 25px; + font-weight: bold; + transition: background 0.3s; + box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; +} + +.btn-secondary:hover { + background: var(--color-primary-dark); + color: var(--color-white); + border: 1px solid var(--color-primary-dark); + cursor: pointer; +} + +.btn-featured { + background: var(--color-primary-dark); + color: var(--color-white); + font-size: 1rem; + padding: 12px 24px; + text-decoration: none; + border: 1px solid var(--color-primary-dark); + border-radius: 25px; + font-weight: bold; + transition: background 0.3s; + box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; +} + +.btn-featured:hover { + background: var(--color-primary); + color: var(--color-white); + border: 1px solid var(--color-primary-dark); + cursor: pointer; +} + +.btn-primary-white { + background: var(--color-white); + color: var(--color-primary-dark); + padding: 12px 24px; + text-decoration: none; + border: 1px solid var(--color-white); + border-radius: 25px; + font-size: 1rem; + font-weight: bold; + transition: background 0.3s; + box-shadow: 0 2px 6px rgba(var(--color-text), 0.05); +} + +.btn-primary-white:hover { + color: var(--color-white); + background: var(--color-primary-dark); + box-shadow: 0 2px 6px rgba(var(--color-text), 0.05); + cursor: pointer; +} + +.hero-button-cta { + background: var(--color-white); + color: var(--color-primary-dark); + padding: 12px 24px; + text-decoration: none; + border: 1px solid var(--color-white); + border-radius: 25px; + font-size: 1rem; + font-weight: bold; + transition: background 0.3s; + box-shadow: 0 2px 6px rgba(var(--color-text), 0.05); + margin-top: 20px; +} + +.hero-button-cta:hover { + color: var(--color-white); + background: var(--color-primary-dark); + box-shadow: 0 2px 6px rgba(var(--color-text), 0.05); + cursor: pointer; +} + +.btn-text { + display: inline-flex; + align-items: center; + gap: 8px; + color: var(--color-primary-dark); + background: transparent; + font-size: 1rem; + font-weight: bold; + border: none; + cursor: pointer; + transition: background-color 0.3s ease; +} + +.btn-text:hover { + transform: translateY(-2px); } .read-more-btn { - background: #007bff; + display: inline-flex; + align-items: center; + gap: 8px; + color: var(--color-primary-dark); + background: transparent; + font-size: 1rem; + font-weight: bold; border: none; - color: white; - padding: 0.4rem 1rem; - border-radius: 5px; cursor: pointer; - font-size: 0.9rem; + transition: background-color 0.3s ease; } .read-more-btn:hover { - background: #0056b3; + transform: translateY(-2px); } + +.read-more-btn-icon i { + transition: transform 0.3s ease; + color: var(--color-primary-dark); +} + +.read-more-btn:hover .read-more-btn-icon i { + transform: rotate(90deg); +} + +.read-more-btn-icon { + display: flex; + align-items: center; + transition: transform 0.3s ease; +} + +/* Responsive Design */ + +/* Small desktop Support */ + +@media (max-width: 1279px) { + .package { + min-width: 40%; + margin-right: 5px; + margin-bottom: 20px; + } +} + +/* Tablet Support */ +@media (max-width: 960px) { + + #Burger-menu { + display: block; + background-color: transparent; + color: var(--color-white); + border: none; + cursor: pointer; + } + + #Burger-menu i { + font-size: 2rem; + } + + nav ul { + display: none; + } + + nav.responsive ul { + display: block; + background-color: var(--color-primary-dark); + position: absolute; + width: 100%; + left: 0; + top: 70px; + padding: 50px; + text-align: center; + } + + nav.responsive ul li { + display: block; + font-size: 1.2rem; + } + + nav.responsive ul li a { + display: block; + padding: 1rem 2rem; + } + + .package { + min-width: 40%; + margin-right: 5px; + margin-bottom: 20px; + } + + .free-offer { + width: 100%; + padding: 0 20px; + text-align: center; + } +} + +/* Phone Support */ +@media (max-width: 767px) { + + header.hero h1 { + line-height: 1.2; + } + + .hero p { + margin-bottom: 20px; + } + + .package { + min-width: 100%; + margin-bottom: 20px; + } + + .slider-section { + height: 800px; + } + + .slide-text ul li { + list-style: none; + } + + .blog-teaser { + max-width: 100%; + width: 100%; + } +} + +/** + * How to use blog post badges based on categories: + + * There are totally 6 different badges with 6 different colors (such as blue, green, yellow, red, indigo, gray). + * Each badge has a specific color and a hover effect that changes the border color. + * To use a badge, after the class 'blog-teaser' add the class with this format `blog-teaser-` (e.g., `blog-badge-blue`, `blog-badge-green`, etc.) to the blog teaser element. + * Each badge has a specific tag class with this format 'blog-badge--tag' (e.g., `blog-badge-blue-tag`, `blog-badge-green-tag`, etc.) that should be used inside the blog teaser to display the badge. + * example usage for a blue badge in blog teaser: + + *
+ *
CategoryName
+ *

Blog Title

+ * 01.01.2023 + *
This is a short snippet of the blog post.
+ * + *
+ * + * NOTE: If the above mentioned classes are not used, the blog teaser will have it's own style without any badge. + */ + +/* Base tag badge style */ +.blog-teaser > [class*="-tag"] { + display: inline-block; + padding: 4px 10px 2px 10px; + font-size: 0.75rem; + font-weight: 600; + border-radius: 999px; + margin-bottom: 0.75rem; + text-transform: uppercase; + letter-spacing: 0.03em; +} + +/* Blue badge */ +.blog-badge-blue .blog-badge-blue-tag { + background-color: #DBEAFE; + color: #1E40AF; +} + +/* Blue badge - lighter blue border */ +.blog-teaser.blog-badge-blue:hover { + border-color: #60A5FA; +} + +/* Green badge */ +.blog-badge-green .blog-badge-green-tag { + background-color: #DCFCE7; + color: #166534; +} + +/* Green badge - lighter green border */ +.blog-teaser.blog-badge-green:hover { + border-color: #6EE7B7; +} + +/* Yellow badge */ +.blog-badge-yellow .blog-badge-yellow-tag { + background-color: #FEF9C3; + color: #92400E; +} + +/* Yellow badge - lighter amber border */ +.blog-teaser.blog-badge-yellow:hover { + border-color: #FCD34D; +} + +/* Red badge */ +.blog-badge-red .blog-badge-red-tag { + background-color: #FECACA; + color: #991B1B; +} + +/* Red badge - lighter red border */ +.blog-teaser.blog-badge-red:hover { + border-color: #F87171; +} + +/* Indigo badge */ +.blog-badge-indigo .blog-badge-indigo-tag { + background-color: #E0E7FF; + color: #3730A3; +} + +/* Indigo badge - lighter indigo border */ +.blog-teaser.blog-badge-indigo:hover { + border-color: #A5B4FC; +} + +/* Gray badge */ +.blog-badge-gray .blog-badge-gray-tag { + background-color: #F3F4F6; + color: #374151; +} + +/* Gray badge - lighter gray border */ +.blog-teaser.blog-badge-gray:hover { + border-color: #D1D5DB; +} + +/* Hover effect for card badges */ +.blog-teaser > [class*="-tag"]:hover { + opacity: 0.9; +} \ No newline at end of file diff --git a/public/widget/custom/od8n.css b/public/widget/custom/od8n.css index 8019424..efc38a5 100644 --- a/public/widget/custom/od8n.css +++ b/public/widget/custom/od8n.css @@ -18,6 +18,9 @@ border: none; user-select: none; transition: background-color 0.3s ease; + width: 100px; + height: 50px; + box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px; } #cw-chatToggle:hover { transform: translateY(-5px); diff --git a/serve b/serve index 84a3dac..f67b8cf 100755 --- a/serve +++ b/serve @@ -1,6 +1,4 @@ #!/bin/bash -cd public pip install livereload -python ../serve.py -cd .. +python ../serve.py public/