{"id":1026,"date":"2025-02-18T07:20:27","date_gmt":"2025-02-18T07:20:27","guid":{"rendered":"https:\/\/b-on-social.invictus-lead-generation.com\/?page_id=1026"},"modified":"2025-09-08T11:39:58","modified_gmt":"2025-09-08T11:39:58","slug":"b-on","status":"publish","type":"page","link":"https:\/\/b-on-social.invictus-lead-generation.com\/en\/","title":{"rendered":"b.on"},"content":{"rendered":"\n<div class=\"wp-block-group b_group is-layout-flow wp-container-core-group-is-layout-fd6309fb wp-block-group-is-layout-flow\" style=\"margin-top:0px;margin-bottom:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px\">\n<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n       <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\n\t<style>\n      body {\n        background-color: #22577A;\n        overflow-x: hidden;\n      }\n\n      \/* Ueberfluesgiges Logo\n      .logo {\n        position: absolute;\n        top: 24px;\n        left: 48px;\n        width: 96px;\n        height: 40px;\n        background: url('\/wp-content\/uploads\/2025\/02\/b-on-logo.png') no-repeat center;\n        background-size: contain;\n      }\n      *\/\n\n      \/* \u00dcberschrift *\/\n      h1 {\n        position: relative;\n        font-size: 36px;\n        color: #ffffff;\n        text-align: center;\n        z-index: 1;\n        font-weight: bold;\n        text-transform: none !important;\n      }\n\n      \/* Textbereich unterhalb der Ueberschrift *\/\n      .header-content {\n        position: relative;\n        display: block; \/* Kein flex! *\/\n        padding: 0 20px;\n        text-align: center;\n        font-size: 18px;\n        color: #ffffff;\n      } \n\n      .header-content > div:first-child {\n        margin-bottom: 1vh;\n      }\n\n      \/* Container f\u00fcr die Cards *\/\n      .container {\n        position: relative;\n        display: flex;\n        justify-content: center;\n        \/*align-items: flex-start;*\/\n        \/*align-items: center;*\/ \/* Zentriert die Cards vertikal *\/\n        align-items: stretch; \/* Das erzwingt gleiche H\u00f6he *\/\n        flex-wrap: wrap; \/* Cards umbrechen *\/\n        gap: 16px; \/* Abstand zwischen den Cards *\/\n        margin: 2vh auto 0;\n        padding: 0 20px;\n        max-height: 100%; \/* Dynamische H\u00f6he f\u00fcr die Cards *\/\n        max-width: 1400px;\n        box-sizing: border-box;\n      }\n\n\t\/* Cards *\/\n\n      .card {\n        background: #FFFFFF;\n        box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.15);\n        border-radius: 12px;\n        text-align: center;\n        padding: 20px;\n        width: 90%; \/* Cards nehmen 90% der Breite ein *\/\n        max-width: 40%;\n        min-height: 50vh; \/* Cards wachsen proportional mit der Browser-H\u00f6he *\/\n        display: flex;\n        flex-direction: column;\n        justify-content: flex-start;\n        box-sizing: border-box;\n        transition: all 0.3s ease; \/* Sanfte Animation bei Gr\u00f6\u00dfen\u00e4nderung *\/\n      }\n\t\n      .card-inner {\n        display: flex;\n        flex-direction: column;\n        flex-grow: 1;\n      }\n\t\n      .card-top {\n        flex-grow: 1;\n        display: contents;\n        flex-direction: column;\n        justify-content: flex-start;\n        align-items: center;\n        padding-bottom: 20px;\n      }\n\n      .card-bottom {\n        padding: 20px;\n        box-sizing: border-box;\n        text-align: left;\n        justify-content: flex-start;\n      }\n\n      \/* Mittlere Card gr\u00f6\u00dfer *\/\n      .card.center {\n        transform: scale(1.05);\n        z-index: 2;\n      }\n\n      \/* Titel der Cards *\/\n\t.card h2 {\n        font-size: 24px;\n        margin-bottom: 8px;\n      }\n\n      .card h5 {\n        display: block;\n        width: 100%;\n        text-align: justify;\n        padding: 0 20px;\n        margin: 0 0 20px;\n        line-height: 1.5;\n        box-sizing: border-box;\n      }\n\n      \/* Preis *\/\n      .card .price {\n        font-size: 72px;\n        font-weight: bold;\n        margin: 0;\n        color: #333333;\n      }\n\n      \/* Untertitel *\/\n      .card .subtitle {\n        font-size: 14px;\n        color: #777777;\n        margin: 8px 0 24px;\n      }\n\n      \/* Features *\/\n      .card ul {\n        list-style-type: disc;\n        list-style-position: outside;\n        padding-left: 3rem;\n        margin: 0 0 24px;\n        width: 100%;\n        box-sizing: border-box;\n      }\n\n      .card ul li {\n        \/* margin-bottom: 8px; *\/\n        text-align: left;\n        line-height: 1.5;\n      }\n\n      \/* Button *\/\n      .button {\n        display: inline-block;\n        background-color: #305677;\n        color: #FFFFFF;\n        text-decoration: none;\n        padding: 10px 20px;\n        border-radius: 8px;\n        font-size: 16px;\n        font-weight: bold;\n      }\n\n      .button:hover {\n        background-color: #38A3A5;\n      }\n\n      \/* Tabs Container *\/\n      .tabs {\n        display: flex;\n        justify-content: center;\n        gap: 20px;\n        margin-top: 2%;\n        position: relative;\n        z-index: 1;\n        flex-wrap: wrap; \/* Tabs umbrechen bei wenig Platz *\/\n      }\n\n      \/* Einzelner Tab *\/\n      .tab {\n        font-size: 16px;\n        cursor: pointer;\n        position: relative;\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        color: #FFFFFF;\n      }\n\t\n      .tab:hover {\n        background-color: #38A3A5;\n      }\n\n      .tab.active {\n        border-bottom: 2px solid #57CC99;\n        color: #57CC99;\n      }\n\n      \/* Icons *\/\n      .tab i {\n        display: inline-block;\n        width: 20px;\n        height: 20px;\n        background-size: contain;\n      }\n\n      \/* Textbereich unterhalb der Tabs *\/\n      .tab-content {\n        text-align: center;\n        margin-top: 20px;\n        font-size: 18px;\n        color: #FFFFFF;\n        max-width: 800px;\n        margin-left: auto;\n        margin-right: auto;\n      }\n\n      \/* Symbole *\/\n      .icon-clock { background: url('icon-clock.png') no-repeat center; }\n      .icon-user { background: url('icon-user.png') no-repeat center; }\n      .icon-automation { background: url('icon-automation.png') no-repeat center; }\n      .icon-analysis { background: url('icon-analysis.png') no-repeat center; }\n\t\n      \/* Media Query f\u00fcr Smartphones *\/\n      @media (max-width: 768px) {\n        .container {\n          flex-direction: column; \/* Cards untereinander anordnen *\/\n          gap: 12px;\n        }\n\n        .card {\n          width: 90%; \/* Cards nehmen 90% der Breite ein *\/\n          margin: 10px auto;\n          padding: 16px;\n          max-width: 90%;\n        }\n\n        h1 {\n          font-size: 24px; \/* Kleinere \u00dcberschrift *\/\n        }\n\n        .card h2 {\n          font-size: 20px; \/* Kleinere Titel *\/\n        }\n\n        .card .price {\n          font-size: 28px; \/* Kleinere Schrift f\u00fcr Preis *\/\n        }\n\n        .tabs-container {\n          flex-direction: column; \/* Tabs untereinander anordnen *\/\n          align-items: center;\n          gap: 10px; \/* Geringerer Abstand zwischen den Tabs *\/\n        }\n\n        .tab {\n          width: 90%; \/* Tabs nehmen 90% der Breite ein *\/\n          justify-content: center; \/* Zentrierter Inhalt *\/\n          font-size: 14px; \/* Kleinere Schrift *\/\n          padding: 8px 10px; \/* Weniger Padding *\/\n        }\n\n        .tab i {\n          font-size: 16px; \/* Kleinere Icons *\/\n        }\n      }\n\n      .no-bullet {\n        list-style-type: none;\n      }\n\n      .hero-slider {\n        text-align: center;\n        padding: 0.5vh 20px 0;\n        max-width: 1000px;\n        margin: 0 auto;\n      }\n\n      .hero-slider h1 {\n        font-size: 2.5rem;\n        margin-bottom: 2rem;\n        color: #ffffff;\n      }\n\n      .hero-slides {\n        position: relative;\n        height: 60px;\n        overflow: hidden;\n        display: flex;\n        align-items: center; \/* vertikal zentrieren *\/\n        justify-content: center; \/* optional, wenn du es willst *\/\n      }\n\n      .slide {\n        position: absolute;\n        opacity: 0;\n\t\ttransform: scale(0.98);\n        transition: opacity 0.8s ease, transform 0.8s ease;\n        font-size: 1.4rem;\n        color: #ffffff;\n        width: 100%;\n        top: 0;\n        left: 0;\n        line-height: 1.4;\n      }\n\n      .slide.active {\n        opacity: 1;\n\t\ttransform: scale(1);\n      }\n\n      .hero-dots {\n        display: flex;\n        justify-content: center;\n        gap: 10px;\n        margin-top: 2vh;\n        margin-bottom: 3vh;\n      }\n\n      .hero-dots .dot {\n        width: 12px;\n        height: 12px;\n        background-color: rgba(255, 255, 255, 0.5);\n        border-radius: 50%;\n        cursor: pointer;\n        transition: background-color 0.3s ease;\n      }\n\n      .hero-dots .dot.active {\n        background-color: #ffffff;\n      }\n\n      .hero-slides i {\n        margin-right: 10px;\n        color: #ffffff;\n        font-size: 1.4rem;\n        vertical-align: middle;\n      }\n    <\/style>\n  <\/head>\n\n  <body>\n\n    <!-- Skalierbarer Container f\u00fcr Ellipsen -->\n    <div class=\"ellipse-container\">\n      <div class=\"ellipse-left\"\/>\n      <div class=\"ellipse-right\"\/>\n    <\/div>\n\n    <!-- Logo -->\n    <div class=\"logo\"\/>\n\n    <!-- Header Slider -->\n    <div class=\"hero-slider\">\n      <h1 class=\"h1\">b.on. Wachse organisch. Automatisiere smart.<\/h1>\n      <div class=\"hero-slides\">\n        <div class=\"slide active\"><i class=\"fa-solid fa-bullhorn\"><\/i> You want more reach, real visibility and meaningful engagement without spending hours in front of your social media account?<\/div>\n        <div class=\"slide\"><i class=\"fa-regular fa-lightbulb\"><\/i> Then <b>b.on<\/b> is the right <b>social media management tool<\/b> for you.<\/div>\n        <div class=\"slide\"><i class=\"fa-solid fa-arrows-rotate\"><\/i> With smart <b>AI<\/b> and modern <b>marketing automation<\/b>, b.on takes over your daily tasks.<\/div>\n        <div class=\"slide\"><i class=\"fa-solid fa-comments\"><\/i> It likes, comments, follows and posts as if you were doing it yourself.<\/div>\n        <div class=\"slide\"><i class=\"fa-solid fa-robot\"><\/i> <b>No bot feeling, no fake followers. No empty promises.<\/b><\/div>\n      <\/div>\n      <div class=\"hero-dots\">\n        <span class=\"dot active\" data-index=\"0\"><\/span>\n        <span class=\"dot\" data-index=\"1\"><\/span>\n        <span class=\"dot\" data-index=\"2\"><\/span>\n        <span class=\"dot\" data-index=\"3\"><\/span>\n        <span class=\"dot\" data-index=\"4\"><\/span>\n      <\/div>\n    <\/div>\n    <!-- Container f\u00fcr die Cards -->\n    <div class=\"container\">\n      <!-- Linke Card -->\n      <div class=\"card\">\n        <div class=\"card-inner\">\n          <div class=\"card-top\">\n            <h2>Business.<\/h2>\n            <p>The smart start to your automated growth.<\/p>\n            <p class=\"price\">99 \u20ac<\/p>\n            <p class=\"subtitle\">per Month<\/p>\n          <\/div>\n          <div class=\"card-bottom\">\n            <h5>The Business version of b.on offers you all the core functions for effective and automated social media management. Ideal for beginners, creators, freelancers and small teams.<\/h5>\n            <ul>\n              <li>Human-like <b>networking<\/b> with AI<\/li>\n              <li>Niche-based and target group-driven <b>social media automation<\/b>.<\/li>\n              <li>AI-supported <b>comment function<\/b><\/li>\n              <li>Intuitive social media content planning with <b>drag-and-drop calendar<\/b>.<\/li>\n              <li>Support for <b>various<\/b> social media platforms<\/li>\n              <li>Real-time analytics<\/li>\n            <\/ul>\n          <\/div>\n        <\/div>\n        <a href=\"https:\/\/b-on-social.invictus-lead-generation.com\/cart\/?add-to-cart=1354\" class=\"button\">Subscribe<\/a>\n      <\/div>\n\n      <!-- Mittlere (gr\u00f6\u00dfere) Card -->\n      <!-- \n      <div class=\"card center\">\n\t    <div class=\"card-inner\">\n          <div class=\"card-top\">\n            <h2>Enterprise<\/h2>\n            <p class=\"price\">299 \u20ac<\/p>\n            <p class=\"subtitle\">per Month<\/p>\n          <\/div>\n          <div class=\"card-bottom\">\n            <h4>The following features are included in the Enterprise plan:<\/h4>\n            <ul>\n              <li>All features of the Professional plan<\/li>\n              <li>Additional accounts<\/li>\n              <li>Feature D<\/li>\n            <\/ul>\n          <\/div>\n        <\/div>\n        <a href=\"https:\/\/b-on-social.invictus-lead-generation.com\/cart\/?add-to-cart=1356\" class=\"button\">Subscribe<\/a>\n      <\/div>\n      -->\n\n      <!-- Rechte Card -->\n      <div class=\"coming-soon card\">\n        <div class=\"card-inner\">\n          <div class=\"card-top\">\n            <h2>Professional.<\/h2>\n            <p>The future of b.on is even more intelligent and individual.<\/p>\n            <p class=\"price\">199 \u20ac<\/p>\n            <p class=\"subtitle\">per Month<\/p>\n          <\/div>\n          <div class=\"card-bottom\">\n            <h5>The professional version brings even more AI power, flexibility and automation. It is tailor-made for agencies, teams and anyone who wants to grow professionally.<\/h5>\n            <ul>\n              <li>Even more evaluation options<\/li>\n              <li>Multi-client capability for agencies and teams<\/li>\n              <li>Advanced filter settings<\/li>\n            <\/ul>\n          <\/div>\n        <\/div>\n        <a href=\"https:\/\/b-on-social.invictus-lead-generation.com\/cart\/?add-to-cart=1355\" class=\"button\">Subscribe<\/a>\n      <\/div>\n    <\/div>\n\n    <!-- Tabs -->\n<!--\n    <div class=\"tabs\" id=\"tabs\">\n      <div class=\"tab active\" data-index=\"0\">\n        Real-time monitoring <i class=\"fa-regular fa-clock\"><\/i>\n      <\/div>\n      <div class=\"tab\" data-index=\"1\">\n        Individual monitoring <i class=\"fa-regular fa-user\"><\/i>\n      <\/div>\n      <div class=\"tab\" data-index=\"2\">\n        Automated interactions <i class=\"fa-solid fa-wave-square\"><\/i>\n      <\/div>\n      <div class=\"tab\" data-index=\"3\">\n        Detailed analyses <i class=\"fa-solid fa-arrow-trend-up\"><\/i>\n      <\/div>\n    <\/div>\n-->\n    <!-- Dynamischer Textbereich -->\n<!--\n    <div class=\"tab-content\" id=\"tabContent\">\n      Keep an eye on all the important key figures and activities of your social media accounts.\n      Monitor likes, retweets, comments and private messages carried out by the automation in the background.\n    <\/div>\n-->\n    <script>\n      \/\/ JavaScript f\u00fcr automatischen Tab-Wechsel\n      const tabs = document.querySelectorAll('.tab');\n      const tabContent = document.getElementById('tabContent');\n\n      const texts = [\n        \"Keep an eye on all the important key figures and activities of your social media accounts. Monitor likes, retweets, comments and private messages carried out by the automation in the background.\",\n        \"Individual monitoring of your accounts enables targeted analyses and user-defined settings for optimal results.\",\n        \"Automated interactions improve your reach and save time by scheduling and publishing content.\",\n        \"Detailed analyses provide valuable insights into your performance and interactions on all your channels.\"\n      ];\n\n      let currentIndex = 0;\n\n      function switchTab(index) {\n        tabs.forEach((tab, i) => {\n          tab.classList.toggle('active', i === index);\n        });\n        tabContent.textContent = texts[index];\n      }\n\n      setInterval(() => {\n        currentIndex = (currentIndex + 1) % tabs.length;\n        switchTab(currentIndex);\n      }, 5000); \/\/ Wechsel alle 5 Sekunden\n\n      tabs.forEach((tab, index) => {\n        tab.addEventListener('click', () => {\n            currentIndex = index;\n            switchTab(index);\n        });\n      });\n\n      const heroSlides = document.querySelectorAll('.hero-slides .slide');\n      const dots = document.querySelectorAll('.hero-dots .dot');\n      let heroIndex = 0;\n      let interval;\n\t  let standardDuration = 4000;\n\t  let selectedDuration = 10000;\n\n      function showSlide(index) {\n        heroSlides.forEach(slide => slide.classList.remove('active'));\n        dots.forEach(dot => dot.classList.remove('active'));\n\n        heroSlides[index].classList.add('active');\n        dots[index].classList.add('active');\n      }\n\n      function nextSlide() {\n        heroIndex = (heroIndex + 1) % heroSlides.length;\n        showSlide(heroIndex);\n      }\n\n      function startInterval(duration = standardDuration) {\n        clearInterval(interval);\n        interval = setInterval(nextSlide, duration);\n      }\n\n      \/\/ Start mit normalem 4 Sekunden Intervall\n      startInterval();\n\n      \/\/ Klick auf Dots\n      dots.forEach(dot => {\n        dot.addEventListener('click', () => {\n          heroIndex = parseInt(dot.dataset.index);\n          showSlide(heroIndex);\n          clearInterval(interval); \/\/ Sicherstellen, dass nichts doppelt l\u00e4uft\n          \/\/ Starte nach Klick einmalig 10 Sekunden, danach wieder 4s\n          interval = setInterval(() => {\n            nextSlide();\n            startInterval(); \/\/ Nach dem ersten 10s wieder normal\n          }, selectedDuration);\n        });\n      });\n\n    <\/script>\n  <\/body>\n<\/html>\n<\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>b.on. Wachse organisch. Automatisiere smart. You want more reach, real visibility and meaningful engagement without spending hours in front of your social media account? Then b.on is the right social media management tool for you. With smart AI and modern marketing automation, b.on takes over your daily tasks. It likes, comments, follows and posts as [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"b-on-tamplate","meta":{"footnotes":""},"class_list":["post-1026","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/b-on-social.invictus-lead-generation.com\/en\/wp-json\/wp\/v2\/pages\/1026","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/b-on-social.invictus-lead-generation.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/b-on-social.invictus-lead-generation.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/b-on-social.invictus-lead-generation.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/b-on-social.invictus-lead-generation.com\/en\/wp-json\/wp\/v2\/comments?post=1026"}],"version-history":[{"count":88,"href":"https:\/\/b-on-social.invictus-lead-generation.com\/en\/wp-json\/wp\/v2\/pages\/1026\/revisions"}],"predecessor-version":[{"id":1730,"href":"https:\/\/b-on-social.invictus-lead-generation.com\/en\/wp-json\/wp\/v2\/pages\/1026\/revisions\/1730"}],"wp:attachment":[{"href":"https:\/\/b-on-social.invictus-lead-generation.com\/en\/wp-json\/wp\/v2\/media?parent=1026"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}