From d77340e9163d2c83732db5eb6d7d47acb205b9a4 Mon Sep 17 00:00:00 2001 From: Davide Faconti Date: Wed, 13 Dec 2023 10:49:40 +0100 Subject: [PATCH 01/80] new forms --- package.json | 1 + src/components/ContactFormModal/index.js | 188 ++++++++++++++++++ .../ContactFormModal/styles.module.css | 127 ++++++++++++ src/pages/groot.js | 186 ++++++++++------- src/pages/index.js | 1 - static/img/done.png | Bin 0 -> 18493 bytes 6 files changed, 431 insertions(+), 72 deletions(-) create mode 100644 src/components/ContactFormModal/index.js create mode 100644 src/components/ContactFormModal/styles.module.css create mode 100644 static/img/done.png diff --git a/package.json b/package.json index 406cf0e..35a11d6 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "@docusaurus/core": "^2.4.1", "@docusaurus/plugin-ideal-image": "^2.4.1", "@docusaurus/preset-classic": "^2.4.1", + "@emailjs/browser": "^3.11.0", "@mdx-js/react": "^1.6.22", "autoprefixer": "^10.4.13", "bootstrap": "^5.2.3", diff --git a/src/components/ContactFormModal/index.js b/src/components/ContactFormModal/index.js new file mode 100644 index 0000000..5fa2f0b --- /dev/null +++ b/src/components/ContactFormModal/index.js @@ -0,0 +1,188 @@ +import React, { useState } from "react"; +import styles from "./styles.module.css"; +import emailjs from "@emailjs/browser"; +import useBaseUrl from "@docusaurus/useBaseUrl"; + +const emailjs_service = "service_groot2"; +const emailjs_template = "template_groot2"; +const emailjs_serviceKey = "v20XNx8VMAULCQ7H3"; +const emailjs_toName = "Groot2 team" + +const ContactFormModal = ({ handleClose }) => { + const [loading, setLoading] = useState(false); + const [submitted, setSubmitted] = useState(false); + const [value, setValue] = useState({ + name: "", + companyName: "", + email: "", + message: "", + }); + const [errors, setErrors] = useState({ + name: "", + email: "", + message: "", + }); + + const handleChange = (e) => { + const { name, value } = e.target; + + setErrors((prevErrors) => ({ + ...prevErrors, + [name]: "", + })); + + setValue((prevValues) => ({ + ...prevValues, + [name]: value, + })); + }; + + const validateFields = () => { + const newErrors = {}; + + if (!value.name.trim()) { + newErrors.name = "Name is required"; + } + + if (!value.email.trim()) { + newErrors.email = "Email is required"; + } else if ( + !/^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/.test(value.email) + ) { + newErrors.email = "Invalid email format"; + } + + if (!value.message.trim()) { + newErrors.message = "Message is required"; + } + + setErrors(newErrors); + + return Object.keys(newErrors).length === 0; + }; + + const handleSubmit = (e) => { + e.preventDefault(); + + if (!validateFields()) { + return; + } + setLoading(true); + + const templateParams = { + from_name: value.name, + message: value.message, + company_name: value.companyName, + from_email: value.email, + to_name: emailjs_toName, + }; + + emailjs + .send( + emailjs_service, + emailjs_template, + templateParams, + emailjs_serviceKey + ) + .then( + (response) => { + console.log("SUCCESS!", response.status, response.text); + setSubmitted(true); + setLoading(false); + }, + (err) => { + console.log("FAILED...", err); + } + ) + .finally(() => { + setLoading(false); + }); + }; + + const imageUrl = useBaseUrl("img/done.png"); + return ( +
+
+
+ icon +
+
+
+ {submitted ? ( +
+ icon + +

Thank you for contact us!

+

Our team member will contact you soon.

+
+ ) : ( +
+

Contact Us

+

Tell us more about your needs

+
+ + + {errors.name} +
+
+ + +
+
+ + + {errors.email} +
+
+ + + {errors.message} +
+
+ +
+
+ )} +
+
+
+
+ ); +}; + +export default ContactFormModal; diff --git a/src/components/ContactFormModal/styles.module.css b/src/components/ContactFormModal/styles.module.css new file mode 100644 index 0000000..26aef0b --- /dev/null +++ b/src/components/ContactFormModal/styles.module.css @@ -0,0 +1,127 @@ +.modal { + display: block; + position: fixed; + z-index: 99999; + inset: 0; + width: 100%; + background-color: rgb(0, 0, 0); + background-color: rgba(0, 0, 0, 0.4); + display: flex; + overflow: auto; + justify-content: center; + align-items: center; +} + +.modalContent { + background-color: hsl(0, 0%, 100%); + width: 30%; + padding: 30px; + border-radius: 10px; +} + +.close { + color: #aaa; + float: right; + font-size: 28px; + font-weight: bold; +} + +.close:hover, +.close:focus { + color: black; + text-decoration: none; + cursor: pointer; +} + +.scroll::-webkit-scrollbar { + width: 4px !important; + height: 4px !important; +} + +.scroll::-webkit-scrollbar-thumb { + background-color: #999; + border-radius: 6px; +} + +.scroll::-webkit-scrollbar-track { + background-color: #f1f1f1; +} + +.formContainer { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; +} + +.closeBtn { + position: absolute; + right: 10px; + top: 10px; +} + +.error{ + color: red; +} + +form { + width: 100%; +} + +form div { + display: flex; + flex-direction: column; + justify-content: space-between; + width: 100%; + padding: 10px; +} + +form div input { + width: 100%; + padding: 8px 5px; + border-radius: 6px; + border: none; + border: 1px solid lightgray; + outline: none; +} + +form div textarea { + width: 100%; + padding: 10px; + border-radius: 6px; + border: none; + border: 1px solid lightgray; +} + +form div label { + font-weight: 600; +} + +form div button { + cursor: pointer; + padding: 10px 8px; + background-color: #0dbb5b; + color: white; + border: none; + font-weight: 600; + font-size: 16px; + border-radius: 6px; +} + +form div button:hover { + background-color: #359962; +} +.optional{ + color: gray; + font-size: 10px; +} +.required{ + color: red; +} + +@media only screen and (max-width: 768px) { + .modalContent { + width: 90%; + } +} diff --git a/src/pages/groot.js b/src/pages/groot.js index ab314bb..dc92477 100644 --- a/src/pages/groot.js +++ b/src/pages/groot.js @@ -1,4 +1,4 @@ -import React, { useEffect } from "react"; +import React, { useEffect,useState } from "react"; import Layout from "@theme/Layout"; import Link from "@docusaurus/Link"; import useBaseUrl from "@docusaurus/useBaseUrl"; @@ -11,6 +11,7 @@ import clsx from "clsx"; import EditorVideo from "@site/static/img/groot2_editor.mp4"; import MonitorVideo from "@site/static/img/groot2_monitor.mp4"; import LogVideo from "@site/static/img/groot2_log.mp4"; +import ContactFormModal from "../components/ContactFormModal"; function Check(props) { return yes; @@ -18,22 +19,47 @@ function Check(props) { function Cross(props) { return no; } + export default function Groot() { + const [chargebeeInitialized, setChargebeeInitialized] = useState(false); + const [open, setOpen] = useState(false); + + useEffect(() => { + if (!chargebeeInitialized) { + const chargeBeeScript = document.getElementById("chargebeeScript"); + + if (!chargeBeeScript) { + const el = document.createElement("script"); + el.onload = () => { + Chargebee?.init({ + site: "aurynrobotics", + }); + Chargebee?.registerAgain(); + setChargebeeInitialized(true); + }; + el.setAttribute("src", "https://js.chargebee.com/v2/chargebee.js"); + el.setAttribute("id", "chargebeeScript"); + document.body?.appendChild(el); + } else { + Chargebee.init({ + site: "aurynrobotics", + }); + Chargebee?.registerAgain(); + setChargebeeInitialized(true); + } + } + }, [chargebeeInitialized]); + const handleClickBasic = () => { console.log('free') scrollToSection('sectionDownload') } - const handleClickContact = () => { - console.log('Contact') - window.location.href = 'mailto:license@aurynrobotics.com' - } - - const handleClickCheckout = () => { - console.log('Checkout') - window.location.href = "javascript:void(0)" - } - + const handleClickPro = () => { + console.log('Pro') + setOpen(true) + // window.location.href = 'mailto:license@aurynrobotics.com' + }; const obj = [ { name: "Basic", @@ -56,31 +82,23 @@ export default function Groot() { "Interactive real-time debugger", "Technical support", ], - btn: "Checkout", - onclick: () => handleClickCheckout() + btn: "Buy License", + onclick: () => handleClickPro() }, { name: "PRO (source code)", - price: "Contact us", + price: "Inquiry", durance: "", points: [ "All the features in PRO", "Access to the source code", "Site license with unlimited number of seats.", ], - btn: "Contact", - onclick:() => handleClickContact() + btn: "Contact us", + onclick:() => handleClickPro() }, ]; console.log(obj); - // useEffect(() => { - // openPopup(); - // window.plausible = - // window.plausible || - // function () { - // (window.plausible.q = window.plausible.q || []).push(arguments); - // }; - // }, []); const renderTooltip = (message, props) => { return ( @@ -131,10 +149,24 @@ export default function Groot() { section.scrollIntoView({ behavior: "smooth" }); } }; - return ( - - {/* groot intro */} + + useEffect(() => { + if(open){ + document.body.style.overflow = "hidden" + }else{ + document.body.style.overflow = "auto" + } + },[open]) + + + return ( + <> + + {/* groot intro */} + { + open && setOpen(false)}/> + }
@@ -146,12 +178,6 @@ export default function Groot() { The most advanced IDE
to create and debug Behavior Trees.

- {/* */}
Pricing
-
- {obj?.map((item) => ( -
-
-
{item.name}
-
-
{item.price}
-
{item.durance}
-
- -
    - {item.points.map((p) => ( -
  • - {p} -
  • - ))} -
-
- + {obj?.map((item, index) => ( +
+
+
{item.name}
+
+
{item.price}
+
{item.durance}
+
+
    + {item.points.map((p) => ( +
  • + {p} +
  • + ))} +
+
+ {index == 1 ? ( + + {item.btn} + + ) : index == 2 ? ( + + ) : ( + + )} +
-
- ))} -
+ ))} +
@@ -314,8 +357,8 @@ export default function Groot() { for one month, activating your trial in "Preferences".
  • - Discounts: are you considering buying multiple licenses? - We can offer you a discount and a solution tailored for your company. + Discounts: a price discount is automatically applied + when purchasing multiple licenses (3+ or 5+).
  • Free for academia: if you are a student or researcher, @@ -386,5 +429,6 @@ export default function Groot() {
  • + ); } diff --git a/src/pages/index.js b/src/pages/index.js index c16918a..604c112 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -35,7 +35,6 @@ function Home() { src="https://cdn.stat-track.com/statics/moosend-tracking.min.js" data-website-id="419144d798774876bcfcd1e1f0b6a2ad" > -
    diff --git a/static/img/done.png b/static/img/done.png new file mode 100644 index 0000000000000000000000000000000000000000..e0576da3024cf69eadd13d981e0f109c15e337d4 GIT binary patch literal 18493 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%0AnF#usbFr$PN`-OG-{cK;t9RR!_8 z^T^#DphsaX)_A@*cRPA-{$gSGc>PWmk7%?m^eKH3G^ z347$BKfq!}Q)i-Nd1J?V4vDMEHCfT)Cpy3OnY;tix4)`ly%(v%=f3~vMWhP@>rEHv z#OAkWssM9JeY8?Evw|GWD&%lUK=VNvJ#{9Hd*icx#h25dwd>|@JN51A=QOCMRE%jN>A zWbeVtl-J3OWE=ETE@%TZ>xpDJK`SbxR_uWEz1%Pa4SHd5n*-i#J6huQ6= zU`=Hr=r_Krx8h1qb-53G5e3Fx9)$GT8U<@WXN19DWH{@~&~#W3kNShg9PA%V)0E(K zCt&grc)!Og_So2oE6(iD{AZx##Z4Kr4rZ|?)=gNHdn4b5EuQ=`>(|ibJQWsO7oOWk zjczfdtlYQQ9>XI~gK$&HdQ|D}~tV zkmaCk#bwmV)pC#^R+K4h`e29$PK_j`s zeK1xu?OBkb6CAG;537Qjf(Z}|N*;*3HU+fD21Py?2fELH`v@&##qD1ChsbTVPqj#% zjhVt`3m{ZmxGmBJdp&mSd(0#^h$VM*0Q3r+>jVvNzd%KMnPO{TeH7M&W?v#| zXk%vWAJ6sPS;CLS^HH@R{ugK~yEh?n<gsJw+h#j%Q>Y0@Fv}>CHp;*jFR7LqMxWXJG4w(^FCfu)d3U&b z;%KwdhBmli^bjKtB{xU>uP+tb!xCJzgNl5ya*d+#k_qU~y16pr2)EAXvSVxOtT~5( z&DuyEq~Q-!Y#x*>r*B9Vb<8RjSh3d4DH!YSrTe-p$dh3a<=&qrOtDPd*0bF{!(FwC z1)!fP(*BYC{OZPObNn5kCzT5m}ZXY?K^G6O*A!cfgUaG%oXn!E#1q>#~V#N?q$9(T_Kf&Y2>)wuB;;_9X& zX%jNC#+9WYd*m(`u4Jd!i4RFr~M2l{)J>g<#71H9yEV}bD#5120Qx8NMG`!=#70hJS@QlCAdG5GP zJkp^(Fl+ZciezP1ARAj%ZJ0Ur7(AC@EgBVlZsGd%6fBPE{q)e3j|BOhNTIENob;UD zQ1-)EUjV+MkSJ0WXZZ6AJ&Fm(p>GD=l=TX$@vjIyPy5{99>6VM6!00|SqLCi(;h^B@H+|B%JpDm+D4I59haRiSVtWjVvT%Xe@(SLSMm z%X|(eWxOQI77YiND2FK^Bx7T>vC>{`rq6bz&_O~=?zb$8I;cl71U>1tC-}Fw3byuy zpOte2FW7USyK;-HaadNvr?y>`4n_^CKuI7dTDg5=W9~>v*)D11ByjlW=y?Y~n?T-} z@Xf==OwSC;T*j>a`S@{{Z_5EUp*A22l4IW zkiRzwlt5Cm_Jdbg;&kwsyc14+On0_SL6%_&D=9Z=;uYKJEwfH|RBzjn&oLd0x*@L_ zwMPWnHNT-EY&WX@pPb95ub5A0cnENp=h#Se5;UJVUdDfudjT4Ih}9q+1K$hDF9)&| z04j|@J^~gR#yQHDFC{~j4%d*X>o0viG07c|m5S2&B2b(<>roP@6uu>1$(`qY?>LlV zz-F`yqbaG8^+Of#Tc^ZseeuwD83`-Mg3ab9pW;7qSEj1s4Z^2y|JVc>m{Ne-W=X@Q zNUA7IE+~5aQlIk+h8%cw4Pn-}h8|$w7$lJ>q{>s<&K?2Z145iTWppy-_;s)U0Shfb AivR!s literal 0 HcmV?d00001 From c1bce51a4e4b737857c3aed58db53594716549f8 Mon Sep 17 00:00:00 2001 From: Davide Faconti Date: Wed, 13 Dec 2023 17:20:47 +0100 Subject: [PATCH 02/80] fixed --- .../ContactFormModal/styles.module.css | 19 +++++----- src/pages/groot.js | 37 ++++++++++--------- 2 files changed, 29 insertions(+), 27 deletions(-) diff --git a/src/components/ContactFormModal/styles.module.css b/src/components/ContactFormModal/styles.module.css index 26aef0b..1889ab5 100644 --- a/src/components/ContactFormModal/styles.module.css +++ b/src/components/ContactFormModal/styles.module.css @@ -17,19 +17,10 @@ width: 30%; padding: 30px; border-radius: 10px; + position: relative; } .close { - color: #aaa; - float: right; - font-size: 28px; - font-weight: bold; -} - -.close:hover, -.close:focus { - color: black; - text-decoration: none; cursor: pointer; } @@ -63,6 +54,8 @@ .error{ color: red; + font-size: 12px; + margin-top: 4px; } form { @@ -120,6 +113,12 @@ form div button:hover { color: red; } +.success{ + text-align: center; + padding-top: 20px; + padding-bottom: 20px; +} + @media only screen and (max-width: 768px) { .modalContent { width: 90%; diff --git a/src/pages/groot.js b/src/pages/groot.js index dc92477..ebcbee6 100644 --- a/src/pages/groot.js +++ b/src/pages/groot.js @@ -11,7 +11,7 @@ import clsx from "clsx"; import EditorVideo from "@site/static/img/groot2_editor.mp4"; import MonitorVideo from "@site/static/img/groot2_monitor.mp4"; import LogVideo from "@site/static/img/groot2_log.mp4"; -import ContactFormModal from "../components/ContactFormModal"; +import ContactUSFormModal from "../components/ContactFormModal"; function Check(props) { return yes; @@ -23,7 +23,7 @@ function Cross(props) { export default function Groot() { const [chargebeeInitialized, setChargebeeInitialized] = useState(false); - const [open, setOpen] = useState(false); + const [openContactUsModal, setOpenContactUsModal] = useState(false); useEffect(() => { if (!chargebeeInitialized) { @@ -55,11 +55,17 @@ export default function Groot() { console.log('free') scrollToSection('sectionDownload') } + const handleClickPro = () => { console.log('Pro') - setOpen(true) - // window.location.href = 'mailto:license@aurynrobotics.com' }; + + const handleClickContact = () => { + console.log('contact') + setOpenContactUsModal(true) + // window.location.href = 'mailto:license@aurynrobotics.com' + } + const obj = [ { name: "Basic", @@ -95,7 +101,7 @@ export default function Groot() { "Site license with unlimited number of seats.", ], btn: "Contact us", - onclick:() => handleClickPro() + onclick:() => handleClickContact() }, ]; console.log(obj); @@ -150,23 +156,15 @@ export default function Groot() { } }; - - useEffect(() => { - if(open){ - document.body.style.overflow = "hidden" - }else{ - document.body.style.overflow = "auto" - } - },[open]) - + const handleCloseUsModal = () => setOpenContactUsModal(false) return ( <> {/* groot intro */} - { - open && setOpen(false)}/> - } + {openContactUsModal && ( + + )}
    @@ -183,6 +181,11 @@ export default function Groot() { className='button button--primary button--lg'> Download +
    From a327e8e667564199ca14d305e8f60555cdf51299 Mon Sep 17 00:00:00 2001 From: Davide Faconti Date: Fri, 15 Dec 2023 18:30:06 +0100 Subject: [PATCH 03/80] Update groot.js --- src/pages/groot.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/pages/groot.js b/src/pages/groot.js index ebcbee6..886951b 100644 --- a/src/pages/groot.js +++ b/src/pages/groot.js @@ -390,7 +390,7 @@ export default function Groot() {
    -

    Latest release: 1.4.0 (2023-11-29)

    +

    Latest release: 1.5.0 (2023-12-16)

    + to='https://s3.us-west-1.amazonaws.com/download.behaviortree.dev/groot2_windows_installer/Groot2-v1.5.0-windows-installer.exe'> Windows installer
    @@ -412,7 +412,7 @@ export default function Groot() { /> + to='https://s3.us-west-1.amazonaws.com/download.behaviortree.dev/groot2_linux_installer/Groot2-v1.5.0-linux-installer.run'> Linux installer
    @@ -425,7 +425,7 @@ export default function Groot() { + to='https://s3.us-west-1.amazonaws.com/download.behaviortree.dev/groot2_linux_installer/Groot2-v1.5.0-x86_64.AppImage'> AppImage (Linux)
    From 1b1bc8dfa155f0680739da72006035d305dd8efc Mon Sep 17 00:00:00 2001 From: Davide Faconti Date: Tue, 19 Dec 2023 12:52:12 +0100 Subject: [PATCH 04/80] fix pricing --- src/pages/groot.js | 21 +++++++++++---------- src/pages/groot.module.css | 11 +++++++++++ 2 files changed, 22 insertions(+), 10 deletions(-) diff --git a/src/pages/groot.js b/src/pages/groot.js index 886951b..1bedbdb 100644 --- a/src/pages/groot.js +++ b/src/pages/groot.js @@ -80,13 +80,13 @@ export default function Groot() { }, { name: "PRO (floating license)", - price: "€790", - durance: " / year (*)", + price: "€65", + durance: " / month", + sub_durance: "Paid yearly (€780 / year)", points: [ "Search Nodes in large trees", "Unlimited Number of Nodes in Monitor and Log Visualizer", - "Interactive real-time debugger", - "Technical support", + "Interactive real-time debugger" ], btn: "Buy License", onclick: () => handleClickPro() @@ -98,7 +98,7 @@ export default function Groot() { points: [ "All the features in PRO", "Access to the source code", - "Site license with unlimited number of seats.", + "Site license with unlimited number of seats", ], btn: "Contact us", onclick:() => handleClickContact() @@ -309,6 +309,7 @@ export default function Groot() {
    {item.price}
    {item.durance}
    +
    {item.sub_durance}
      {item.points.map((p) => (
    • @@ -353,7 +354,7 @@ export default function Groot() {
      -

      (*) But wait, there is more!

      +

      But wait, there is more!

      • Free Trial: enjoy all the features of th PRO versions @@ -390,7 +391,7 @@ export default function Groot() {
        -

        Latest release: 1.5.0 (2023-12-16)

        +

        Latest release: 1.4.0 (2023-11-29)

        + to='https://s3.us-west-1.amazonaws.com/download.behaviortree.dev/groot2_windows_installer/Groot2-1.4.0-windows-installer.exe'> Windows installer
        @@ -412,7 +413,7 @@ export default function Groot() { /> + to='https://s3.us-west-1.amazonaws.com/download.behaviortree.dev/groot2_linux_installer/Groot2-1.4.0-linux-installer.run'> Linux installer
        @@ -425,7 +426,7 @@ export default function Groot() { + to='https://s3.us-west-1.amazonaws.com/download.behaviortree.dev/groot2_linux_installer/Groot2-v1.4.0-x86_64.AppImage'> AppImage (Linux)
        diff --git a/src/pages/groot.module.css b/src/pages/groot.module.css index eef7161..d3ad81e 100644 --- a/src/pages/groot.module.css +++ b/src/pages/groot.module.css @@ -63,6 +63,17 @@ h1[id="pricingHead"] { line-height: 1.5em; color: rgb(73, 73, 73); } + +[id="sub_durance"] { + margin-top: 5px; + margin-left: 10px; + font-size: 18px; + font-weight: 600; + line-height: 1.5em; + text-align: center; + color: rgb(73, 73, 73); +} + [id="price"] { margin-top: 20px; font-size: 46px; From 16cccfbe06b2557efc95112fc2fbca48511a8dc7 Mon Sep 17 00:00:00 2001 From: Davide Faconti Date: Tue, 19 Dec 2023 12:52:56 +0100 Subject: [PATCH 05/80] version updated --- src/pages/groot.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/pages/groot.js b/src/pages/groot.js index 1bedbdb..0a445be 100644 --- a/src/pages/groot.js +++ b/src/pages/groot.js @@ -391,7 +391,7 @@ export default function Groot() {
        -

        Latest release: 1.4.0 (2023-11-29)

        +

        Latest release: 1.5.0 (2023-12-16)

        + to='https://s3.us-west-1.amazonaws.com/download.behaviortree.dev/groot2_windows_installer/Groot2-v1.5.0-windows-installer.exe'> Windows installer
        @@ -413,7 +413,7 @@ export default function Groot() { /> + to='https://s3.us-west-1.amazonaws.com/download.behaviortree.dev/groot2_linux_installer/Groot2-v1.5.0-linux-installer.run'> Linux installer
        @@ -426,7 +426,7 @@ export default function Groot() { + to='https://s3.us-west-1.amazonaws.com/download.behaviortree.dev/groot2_linux_installer/Groot2-v1.5.0-x86_64.AppImage'> AppImage (Linux)
        From f3bb467b2a65d8c3bb2799f1b064d093199dd4c8 Mon Sep 17 00:00:00 2001 From: Davide Faconti Date: Wed, 20 Dec 2023 12:32:33 +0100 Subject: [PATCH 06/80] fixed sentence --- src/pages/groot.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/groot.js b/src/pages/groot.js index 0a445be..fae8b93 100644 --- a/src/pages/groot.js +++ b/src/pages/groot.js @@ -82,7 +82,7 @@ export default function Groot() { name: "PRO (floating license)", price: "€65", durance: " / month", - sub_durance: "Paid yearly (€780 / year)", + sub_durance: "Billed annually (€780 / year)", points: [ "Search Nodes in large trees", "Unlimited Number of Nodes in Monitor and Log Visualizer", From 161e234a51091aa8b604cb47db3e1b3e8575374d Mon Sep 17 00:00:00 2001 From: Davide Faconti Date: Thu, 11 Jan 2024 12:32:15 +0100 Subject: [PATCH 07/80] new pricing --- src/pages/groot.js | 29 ++++++++++++++--------------- 1 file changed, 14 insertions(+), 15 deletions(-) diff --git a/src/pages/groot.js b/src/pages/groot.js index fae8b93..ce2ef0e 100644 --- a/src/pages/groot.js +++ b/src/pages/groot.js @@ -80,25 +80,24 @@ export default function Groot() { }, { name: "PRO (floating license)", - price: "€65", - durance: " / month", - sub_durance: "Billed annually (€780 / year)", + price: "€690", + durance: " / year", points: [ "Search Nodes in large trees", "Unlimited Number of Nodes in Monitor and Log Visualizer", "Interactive real-time debugger" ], - btn: "Buy License", - onclick: () => handleClickPro() + btn: "Contact us", + onclick:() => handleClickContact() }, { - name: "PRO (source code)", - price: "Inquiry", - durance: "", + name: "Training", + price: "€1,800", + durance: " / month", points: [ - "All the features in PRO", - "Access to the source code", - "Site license with unlimited number of seats", + "Includes 1 PRO license (1 year)", + "Up to 12 hours per month", + "Learn how to use BT.CPP effectively or improve your current implementation", ], btn: "Contact us", onclick:() => handleClickContact() @@ -360,13 +359,13 @@ export default function Groot() { Free Trial: enjoy all the features of th PRO versions for one month, activating your trial in "Preferences".
      • -
      • + {/*
      • Discounts: a price discount is automatically applied when purchasing multiple licenses (3+ or 5+). -
      • + */}
      • - Free for academia: if you are a student or researcher, - you can receive a complementary 1 year license. + Free for individual researchers: if you are a student or researcher, + you can receive a complementary 1 year license (node locked). Fill this form  and tell us more about your project.
      • From 619c82886929c66105699311148e5261467dc3e3 Mon Sep 17 00:00:00 2001 From: Davide Faconti Date: Fri, 12 Jan 2024 11:08:48 +0100 Subject: [PATCH 08/80] version bump --- src/pages/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/index.js b/src/pages/index.js index 604c112..7bf22f3 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -41,7 +41,7 @@ function Home() {
        -

        BehaviorTree.CPP 4.4

        +

        BehaviorTree.CPP 4.5

        The C++ library to build Behavior Trees.
        From 9efe4b1d2f0e0e7b0c53290eabff542ff0cbe76e Mon Sep 17 00:00:00 2001 From: Luke Chang Date: Tue, 16 Jan 2024 05:44:43 +1300 Subject: [PATCH 09/80] Fix script keyword in tutorial_06_subtree_ports.md (#35) Should be: ``` - - -

        -
        -
        -
        -
        -

        BehaviorTree.CPP 4.8

        -

        - The C++ library to build Behavior Trees. -
        - Batteries included. -

        -
        - - Tutorials - -
        -
        -
        -
        - behavior tree animation -
        +

        + BehaviorTree.CPP is the most advanced, production-ready framework for + building reactive, modular, and debuggable robot behaviors. Design in + XML, execute in C++. +

        +
        + + Powering 100+ robotics companies
        +
        + + Read the Documentation + + + About Groot2 + +
        +
        -
        -
        -
        -
        -
        -

        - Think in terms of Actions, -
        not states -

        -

        - Unlike state machines, behavior trees emphasize executing - actions, not transitioning between states. -

        +
        + +
        + Automated Ground Vehicles
        -
        -

        - Build extensible and
        hierarchical behaviors -

        -

        - Behavior Trees are composable. You can build complex - behaviors reusing simpler ones. -

        +
        + Quadruped robots
        -
        -

        - The power of C++, -
        - the flexibility of scripting -

        -

        - Implement your Actions in C++ and assemble them into trees using - a scripting language based on XML. -

        +
        + Drones
        -
        +
        + Robotic arms +
        +
        + + ); +} -
        -
        -
        -
        -

        - Perfect for robotics -
        - and automation -

        -

        - BehaviorTree.CPP is increasingly used to implement{" "} - Task Planning in a large variety of robotics systems, - including: -

        -
          -
        • Automated Ground Vehicles
        • -
        • Robotic Manipulators
        • -
        • Humanoid and Quadruped robots
        • -
        • Semi-autonomous drones
        • -
        • Social Robots
        • -
        -
        -
        - -
        - robots -
        -
        - quadrupeds -
        -
        - robots -
        -
        - robots +function TrustBar() { + const logos = [ + "Nav2", + "MoveIt2", + "Anybotics", + ]; + + return ( +
        +

        + Trusted by teams building autonomous systems +

        +
        + {logos.map((logo) => ( + + {logo} + + ))} +
        +
        + ); +} + +function FeaturesSection() { + const features = [ + { + id: "scalability", + icon: "⚡", + title: "Better scalability than FSMs", + description: + "Finite State Machines (FSMs) become unmanageable as complexity grows. Behavior Trees scale effortlessly with modular nodes and clear and reusable structure.", + className: styles.cardAsync, + }, + { + id: "async", + icon: "📊", + title: "Async-First Design", + description: + "Non-blocking actions as first-class citizens. Build reactive behaviors that execute concurrently.", + className: styles.cardBlackboard, + }, + { + id: "plugin", + icon: "🔌", + title: "Plugin Architecture", + description: + "Load custom nodes at runtime. Separate behavior design from implementation.", + className: styles.cardPlugin, + }, + { + id: "xml", + icon: "📝", + title: "XML-Defined Trees", + description: + "Modify behaviors without recompiling. Perfect for field engineers.", + className: styles.cardXml, + }, + { + id: "logging", + icon: "🔍", + title: "Built-in Logging", + description: + "Record, replay, and analyze state transitions with confidence.", + className: styles.cardLogging, + }, + { + id: "ros2", + icon: "🤖", + title: "ROS2 Integration", + description: + "Official wrappers for actions, services, and topics. Powers the Nav2 navigation stack trusted by hundreds of robots and engineering teams worldwide.", + className: styles.cardRos2, + }, + ]; + + return ( +
        +
        +

        Why BehaviorTree.CPP?

        +

        Built for real-world robotics, not just demos

        +
        + +
        + {features.map((feature) => ( +
        +
        {feature.icon}
        +

        {feature.title}

        +

        {feature.description}

        +
        + ))} +
        +
        + ); +} + +function GrootSection() { + const grootFeatures = [ + { + title: "Visual Editor", + description: "Drag-and-drop interface for rapid prototyping", + }, + { + title: "Real-time Monitoring", + description: "Watch your tree execute live on your robot", + }, + { + title: "Log Replay & Analysis", + description: "Debug past runs with full state reconstruction", + }, + { + title: "Breakpoints & Fault Injection", + description: "Pause execution and simulate failures", + }, + ]; + + return ( +
        +
        + +
        +
        +

        + Supercharge you development speed with Groot2 +

        +

        + The IDE for Behavior Trees. Design, debug, and deploy with + confidence. +

        + +
        + {grootFeatures.map((feature) => ( +
        +
        +
        + {feature.title} + {feature.description}
        - -
        +
        + ))}
        + + + Learn More About Groot2 +
        -
        -
        -
        -
        -
        - +
        +
        +
        + + +
        -
        -

        Visual Editing and Monitoring

        -

        - Groot2 is our "IDE for Behavior Trees". -
        - It allows users to visualize, create and edit Behavior Trees, - using a simple drag and drop interface.
        - Trees can be monitored in real-time -

        - - About Groot2 - +
        +
        + Sequence +
        +
        +
        +
        Fallback
        +
        Navigate
        +
        +
        +
        +
        Check
        +
        + Pick +
        +
        Place
        +
        +
        + ); +} -
        -
        -
        -
        -
        -

        Software and Technical Support

        -

        - BehaviorTree.CPP is Open Source software and can be - download for free on - - {" "} - Github. - -
        - You can ask questions and reach other users in our - - {" "} - community forum. - -
        - If you are using BehaviorTree.CPP in your commercial product - and you need support, - contact us! -

        -
        -
        -
        - behavior tree animation -
        -
        +function CtaSection({ onContactClick }) { + return ( +
        +
        +

        Ready to Build Smarter Robots?

        +

        + Join hundreds of engineers using BehaviorTree.CPP to build + production-grade autonomous systems. +

        +
        + + Start the Tutorial + +
        - +
        ); } -export default Home; +export default function Home() { + const { siteConfig } = useDocusaurusContext(); + const [openContactUsModal, setOpenContactUsModal] = useState(false); + + const handleContactClick = () => { + setOpenContactUsModal(true); + }; + + const handleCloseModal = () => { + setOpenContactUsModal(false); + }; + + return ( + + {openContactUsModal && ( + + )} +
        + + + + + +
        +
        + ); +} \ No newline at end of file diff --git a/src/pages/index.module.css b/src/pages/index.module.css index baf9f17..996a10b 100644 --- a/src/pages/index.module.css +++ b/src/pages/index.module.css @@ -1,102 +1,752 @@ +/* Landing Page Styles - Modern 2025 Design */ -h1 { - font-size: 38px; - padding: 0.5rem 0; +/* Landing page uses Outfit font */ +.landingPage { + font-family: var(--font-display); } -h2 { - font-size: 32px; - padding: 0.5rem 0; +/* Hero Section */ +.hero { + min-height: calc(100vh - 60px); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 6rem 2rem 4rem; + position: relative; + overflow: hidden; + background: linear-gradient(180deg, var(--warm-white) 0%, var(--cream) 100%); } -h3{ - font-size: 24px; +.heroContainer { + display: grid; + grid-template-columns: 2fr 1fr; + gap: 4rem; + align-items: center; + max-width: 1400px; + width: 100%; + position: relative; + z-index: 1; } -p{ - font-size: 18px; +/* Floating organic blobs */ +.blob { + position: absolute; + border-radius: 50%; + filter: blur(80px); + opacity: 0.6; + animation: float 20s ease-in-out infinite; } -li{ - font-size: 18px; +.blob1 { + width: 600px; + height: 600px; + background: var(--green-200); + top: -200px; + right: -100px; + animation-delay: 0s; } -.heroBanner { - padding: 2.5rem 0; - text-align: center; - position: relative; - overflow: hidden; - display: flex; - align-items: center; - justify-content: center; +.blob2 { + width: 400px; + height: 400px; + background: var(--green-100); + bottom: -100px; + left: -100px; + animation-delay: -5s; } -.heroBanner h1{ - padding: 0.5rem 0; - font-size: 48px; +.blob3 { + width: 300px; + height: 300px; + background: var(--green-200); + top: 40%; + left: 10%; + animation-delay: -10s; } -.heroText { - color: #3b3b3b; - padding: 3.5rem 0; +@keyframes float { + 0%, 100% { transform: translate(0, 0) scale(1); } + 25% { transform: translate(30px, -30px) scale(1.05); } + 50% { transform: translate(-20px, 20px) scale(0.95); } + 75% { transform: translate(20px, 10px) scale(1.02); } } -.heroSvg { - max-width: 550px; - max-height: 550px; +.heroContent { + text-align: left; } -@media screen and (max-width: 966px) { - .heroBanner { - padding: 2rem; - } +.heroCarousel { + position: relative; + border-radius: var(--radius-lg); + overflow: hidden; + box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15); } -.sectionText { - display: flex; - align-items: center; - justify-content: center; - color: #3b3b3b; +.heroCarousel img { + border-radius: var(--radius-lg); + object-fit: cover; +} + +.heroBadge { + display: inline-flex; + align-items: center; + gap: 0.5rem; + background: var(--green-100); + padding: 0.6rem 1.25rem; + border-radius: 100px; + font-size: 0.9rem; + color: var(--green-700); + font-weight: 600; + margin-bottom: 2rem; + animation: fadeInUp 0.8s ease-out; +} + +.badgeDot { + width: 8px; + height: 8px; + background: var(--green-500); + border-radius: 50%; + animation: pulse 2s ease-in-out infinite; +} + +@keyframes pulse { + 0%, 100% { transform: scale(1); opacity: 1; } + 50% { transform: scale(1.2); opacity: 0.7; } +} + +.heroTitle { + font-size: clamp(3rem, 7vw, 5rem); + font-weight: 800; + line-height: 1.1; + margin-bottom: 1.5rem; + letter-spacing: -0.03em; + animation: fadeInUp 0.8s ease-out 0.1s both; + color: var(--text-dark); +} + +.highlight { + background: linear-gradient(135deg, var(--green-500) 0%, var(--green-400) 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.heroSub { + font-size: 1.25rem; + color: var(--text-mid); + max-width: 600px; + margin: 0 0 2.5rem; + animation: fadeInUp 0.8s ease-out 0.2s both; + line-height: 1.6; +} + +.heroCtas { + display: flex; + gap: 1rem; + justify-content: flex-start; + flex-wrap: wrap; + animation: fadeInUp 0.8s ease-out 0.3s both; +} + +.btn { + padding: 1rem 2rem; + border-radius: 100px; + font-weight: 600; + font-size: 1rem; + text-decoration: none; + transition: all 0.3s ease; + display: inline-flex; + align-items: center; + gap: 0.5rem; + cursor: pointer; + border: none; +} + +.btnPrimary { + background: var(--green-600); + color: white; + box-shadow: 0 4px 20px rgba(22, 163, 74, 0.3); +} + +.btnPrimary:hover { + background: var(--green-700); + transform: translateY(-2px); + box-shadow: 0 8px 30px rgba(22, 163, 74, 0.4); + color: white; + text-decoration: none; +} + +.btnSecondary { + background: white; + color: var(--text-dark); + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); +} + +.btnSecondary:hover { + background: var(--green-50); + transform: translateY(-2px); + color: var(--text-dark); + text-decoration: none; +} + +.heroStats { + display: flex; + gap: 3rem; + justify-content: flex-start; + margin-top: 4rem; + animation: fadeInUp 0.8s ease-out 0.4s both; +} + +.stat { + text-align: center; +} + +.statValue { + font-size: 2.5rem; + font-weight: 800; + color: var(--green-600); + line-height: 1; +} + +.statLabel { + font-size: 0.9rem; + color: var(--text-light); + margin-top: 0.25rem; +} + +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(30px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* Trust Bar */ +.trustBar { + padding: 3rem 2rem; + text-align: center; + background: var(--text-dark); +} + +.trustBarLabel { + color: rgba(255, 255, 255, 0.5); + font-size: 0.85rem; + margin-bottom: 1.5rem; + text-transform: uppercase; + letter-spacing: 0.15em; + font-weight: 600; +} + +.trustLogos { + display: flex; + justify-content: center; + align-items: center; + gap: 3rem; + flex-wrap: wrap; +} + +.trustLogo { + color: rgba(255, 255, 255, 0.7); + font-family: var(--font-mono); + font-size: 0.9rem; + font-weight: 500; + transition: color 0.2s; +} + +.trustLogo:hover { + color: var(--green-400); +} + +/* Features Section - Bento Grid */ +.featuresSection { + padding: 6rem 2rem; + background: var(--cream); +} + +.featuresHeader { + text-align: center; + margin-bottom: 4rem; +} + +.featuresHeader h2 { + font-size: 2.5rem; + font-weight: 800; + margin-bottom: 0.75rem; + letter-spacing: -0.02em; + color: var(--text-dark); +} + +.featuresHeader p { + color: var(--text-mid); + font-size: 1.15rem; +} + +.bentoGrid { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-template-rows: auto auto; + gap: 1.25rem; + max-width: 1100px; + margin: 0 auto; +} + +.bentoCard { + background: white; + border-radius: var(--radius-lg); + padding: 2rem; + transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); + position: relative; + overflow: hidden; + display: flex; + flex-direction: column; +} + +.bentoCard::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(135deg, var(--green-500) 0%, var(--green-400) 100%); + opacity: 0; + transition: opacity 0.4s ease; + z-index: 0; +} + +.bentoCard > * { + position: relative; + z-index: 1; +} + +.bentoCard:hover { + transform: translateY(-8px) scale(1.02); + box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12); +} + +.bentoCard:hover::before { + opacity: 1; +} + +.bentoCard:hover .bentoIcon { + background: white; + transform: scale(1.1) rotate(-5deg); +} + +.bentoCard:hover h3, +.bentoCard:hover p { + color: white; +} + +/* Card positions */ +.cardAsync { + grid-column: 1 / 3; + grid-row: 1; + background: linear-gradient(135deg, var(--green-50) 0%, var(--green-100) 100%); +} + +.cardPlugin { + grid-column: 3; + grid-row: 1; +} + +.cardBlackboard { + grid-column: 4; + grid-row: 1; +} + +.cardXml { + grid-column: 1; + grid-row: 2; +} + +.cardLogging { + grid-column: 2; + grid-row: 2; } -.sectionText p{ - font-size: 20px; +.cardRos2 { + grid-column: 3 / 5; + grid-row: 2; + background: linear-gradient(135deg, var(--green-50) 0%, var(--green-100) 100%); } -.sectionText li{ - font-size: 20px; +/* Large cards styling */ +.cardAsync, +.cardRos2 { + padding: 2.5rem; } -.features { - display: flex; - align-items: center; - padding: 4rem 0; - width: 100%; - background-color: #383838; - color: white; +.cardAsync .bentoIcon, +.cardRos2 .bentoIcon { + width: 64px; + height: 64px; + font-size: 1.75rem; + background: white; + box-shadow: 0 8px 30px rgba(22, 163, 74, 0.15); } -.features h3 { - color: rgb(0, 217, 94); +.cardAsync h3, +.cardRos2 h3 { + font-size: 1.5rem; + margin-bottom: 0.75rem; } -.features p { - font-size: 20px; +.cardAsync p, +.cardRos2 p { + font-size: 1.05rem; + line-height: 1.7; } -.supportFrame { - display: flex; - align-items: center; - padding: 2rem 0; - width: 100%; - color: rgb(53, 53, 53); - background-image: linear-gradient(to bottom, #00a639, #1eb645, #30c651, - #3fd65d, #4de769, #4eef69, #4ff669, #51fe68, #46fe59, #39ff47, #2bff30, #17ff00); +.bentoIcon { + width: 56px; + height: 56px; + background: var(--green-100); + border-radius: var(--radius-md); + display: flex; + align-items: center; + justify-content: center; + font-size: 1.5rem; + margin-bottom: 1.25rem; + transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +.bentoCard h3 { + font-size: 1.15rem; + font-weight: 700; + margin-bottom: 0.5rem; + color: var(--text-dark); + transition: color 0.3s ease; +} + +.bentoCard p { + color: var(--text-mid); + font-size: 0.95rem; + line-height: 1.6; + transition: color 0.3s ease; + margin: 0; +} + +/* Groot2 Section */ +.grootSection { + padding: 6rem 2rem; + background: var(--sand); + position: relative; + overflow: hidden; +} + +.grootBlob { + position: absolute; + width: 500px; + height: 500px; + background: var(--green-200); + border-radius: 50%; + filter: blur(100px); + opacity: 0.5; + top: 50%; + right: -200px; + transform: translateY(-50%); +} + +.grootContent { + max-width: 1200px; + margin: 0 auto; + display: grid; + grid-template-columns: 1fr 1.2fr; + gap: 4rem; + align-items: center; + position: relative; + z-index: 1; +} + +.grootText h2 { + font-size: 3rem; + font-weight: 800; + margin-bottom: 1rem; + letter-spacing: -0.02em; + color: var(--text-dark); +} + +.grootText h2 span { + color: var(--green-600); +} + +.grootTagline { + font-size: 1.2rem; + color: var(--text-mid); + margin-bottom: 2rem; +} + +.grootFeatures { + display: flex; + flex-direction: column; + gap: 1rem; + margin-bottom: 2rem; +} + +.grootFeature { + display: flex; + align-items: flex-start; + gap: 1rem; + padding: 1rem 1.25rem; + background: white; + border-radius: var(--radius-md); + transition: all 0.2s; +} +.grootFeature:hover { + transform: translateX(8px); + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); } -.supportFrame a -{ - font-weight: bold; - color: rgb(13, 47, 65); + +.grootFeatureIcon { + width: 28px; + height: 28px; + background: var(--green-500); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + color: white; + font-size: 0.8rem; + font-weight: 700; +} + +.grootFeatureText strong { + color: var(--text-dark); + font-weight: 600; + display: block; +} + +.grootFeatureText span { + color: var(--text-mid); + font-size: 0.95rem; +} + +.grootVisual { + position: relative; +} + +.grootPreview { + background: white; + border-radius: var(--radius-xl); + padding: 1rem; + box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12); +} + +.grootPreviewHeader { + background: var(--sand); + border-radius: var(--radius-md) var(--radius-md) 0 0; + padding: 1rem 1.25rem; + display: flex; + align-items: center; + gap: 0.5rem; +} + +.windowDot { + width: 12px; + height: 12px; + border-radius: 50%; +} + +.windowDotRed { background: #ff6b6b; } +.windowDotYellow { background: #ffd93d; } +.windowDotGreen { background: #6bcb77; } + +.grootPreviewBody { + height: 350px; + background: linear-gradient(180deg, var(--green-50) 0%, white 100%); + border-radius: 0 0 var(--radius-md) var(--radius-md); + display: flex; + flex-direction: column; + align-items: center; + padding: 2rem; + position: relative; +} + +.treeNode { + background: white; + border: 2px solid var(--green-200); + border-radius: var(--radius-sm); + padding: 0.6rem 1.5rem; + font-family: var(--font-mono); + font-size: 0.8rem; + font-weight: 500; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); +} + +.treeNodeActive { + background: var(--green-500); + color: white; + border-color: var(--green-500); } +.treeConnector { + width: 2px; + height: 24px; + background: var(--green-300); +} + +.treeRow { + display: flex; + gap: 1rem; + margin-top: 1.5rem; +} + +/* CTA Section */ +.ctaSection { + padding: 8rem 2rem; + text-align: center; + background: linear-gradient(180deg, var(--cream) 0%, var(--green-50) 100%); + position: relative; +} + +.ctaContent { + position: relative; + z-index: 1; + max-width: 700px; + margin: 0 auto; +} + +.ctaContent h2 { + font-size: 3rem; + font-weight: 800; + margin-bottom: 1rem; + letter-spacing: -0.02em; + color: var(--text-dark); +} + +.ctaContent p { + color: var(--text-mid); + font-size: 1.2rem; + margin-bottom: 2rem; +} + +/* Footer override for rounded top */ +.footer { + background: var(--text-dark); + color: white; + padding: 4rem 2rem; + border-radius: var(--radius-xl) var(--radius-xl) 0 0; +} + +/* Responsive */ +@media (max-width: 1024px) { + .grootContent { + grid-template-columns: 1fr; + gap: 3rem; + } + + .bentoGrid { + grid-template-columns: repeat(2, 1fr); + } + + .cardAsync { + grid-column: 1 / 3; + grid-row: 1; + } + + .cardPlugin { + grid-column: 1; + grid-row: 2; + } + + .cardBlackboard { + grid-column: 2; + grid-row: 2; + } + + .cardXml { + grid-column: 1; + grid-row: 3; + } + + .cardLogging { + grid-column: 2; + grid-row: 3; + } + + .cardRos2 { + grid-column: 1 / 3; + grid-row: 4; + } +} + +@media (max-width: 1024px) { + .heroContainer { + grid-template-columns: 1fr; + gap: 3rem; + } + + .heroContent { + text-align: center; + } + + .heroSub { + margin: 0 auto 2.5rem; + } + + .heroCtas { + justify-content: center; + } + + .heroStats { + justify-content: center; + } + + .heroCarousel { + max-width: 500px; + margin: 0 auto; + } +} + +@media (max-width: 768px) { + .hero { + padding: 4rem 1.5rem 3rem; + min-height: auto; + } + + .heroStats { + flex-direction: column; + gap: 1.5rem; + } + + .trustLogos { + gap: 1.5rem; + } + + .bentoGrid { + grid-template-columns: 1fr; + } + + .cardAsync, + .cardPlugin, + .cardBlackboard, + .cardXml, + .cardLogging, + .cardRos2 { + grid-column: 1; + grid-row: auto; + } + + .heroTitle { + font-size: 2.5rem; + } + + .grootText h2, + .ctaContent h2 { + font-size: 2rem; + } + + .featuresSection, + .grootSection, + .ctaSection { + padding: 4rem 1.5rem; + } +} \ No newline at end of file From 71d4e6d7bfbccea92f0de19c6b187e1e0c38bae1 Mon Sep 17 00:00:00 2001 From: Davide Faconti Date: Mon, 29 Dec 2025 14:25:03 +0100 Subject: [PATCH 51/80] WIP --- CLAUDE.md | 13 +- btcpp-landing-page.html | 1191 ------------------------------------ landing-page-summary.md | 71 --- src/css/custom.css | 83 +-- src/pages/groot.js | 470 ++++++++------ src/pages/index.js | 457 ++++++-------- src/pages/index.module.css | 780 ++--------------------- 7 files changed, 572 insertions(+), 2493 deletions(-) delete mode 100644 btcpp-landing-page.html delete mode 100644 landing-page-summary.md diff --git a/CLAUDE.md b/CLAUDE.md index e5446cc..c58edc4 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -29,15 +29,11 @@ npm run clear # Clear Docusaurus cache - `blog/` - Release announcements ### Custom Pages (React) -- `src/pages/index.js` - Modern landing page with: - - Hero section (animated blobs, image carousel) - - Trust bar (Nav2, MoveIt2, etc.) - - Bento grid features section - - Groot2 promotional section - - CTA section with contact modal +- `src/pages/index.js` - Homepage with hero section and feature carousel - `src/pages/groot.js` - Groot2 IDE page with pricing/licensing (uses Chargebee) - `src/pages/moveit_studio.js` - MoveIt Studio integration page - `src/components/ContactFormModal/` - Email contact form (EmailJS) +- `src/components/HomepageFeatures/` - Homepage feature cards ### Configuration - `docusaurus.config.js` - Main config (versions, navbar, footer, Prism languages) @@ -48,7 +44,4 @@ npm run clear # Clear Docusaurus cache - Prism syntax highlighting configured for `cpp` and `xml-doc` - Bootstrap 5 + React Bootstrap for UI components - Fathom Analytics for tracking -- Dark mode disabled (light mode only) -- Local search via `@easyops-cn/docusaurus-search-local` (configured in `themes` array) -- Landing page uses Outfit font; docs use Open Sans -- CSS variables for design system defined in `src/css/custom.css` \ No newline at end of file +- Dark mode disabled (light mode only) \ No newline at end of file diff --git a/btcpp-landing-page.html b/btcpp-landing-page.html deleted file mode 100644 index db8776d..0000000 --- a/btcpp-landing-page.html +++ /dev/null @@ -1,1191 +0,0 @@ - - - - - - BehaviorTree.CPP – The Industry Standard for Robot Intelligence - - - - - - - - - -
        -
        -
        -
        - -
        -
        - - Powering Nav2 and 100+ robotics companies -
        -

        The Industry Standard for Robot Intelligence

        -

        - BehaviorTree.CPP is the most advanced, production-ready framework for building - reactive, modular, and debuggable robot behaviors. Design in XML, execute in C++. -

        - -
        -
        -
        3.7k+
        -
        GitHub Stars
        -
        -
        -
        100+
        -
        Companies
        -
        -
        -
        10+
        -
        Years Active
        -
        -
        -
        -
        - - -
        -

        Trusted by teams building autonomous systems

        -
        - - - - - -
        -
        - - -
        -
        -

        Why BehaviorTree.CPP?

        -

        Built for real-world robotics, not just demos

        -
        - -
        - -
        -
        -

        Async-First Design

        -

        Non-blocking actions as first-class citizens. Build reactive behaviors that execute concurrently, making your robots responsive and efficient in complex real-world scenarios.

        -
        - -
        -
        🔌
        -

        Plugin Architecture

        -

        Load custom nodes at runtime. Separate behavior design from implementation.

        -
        - -
        -
        📊
        -

        Type-Safe Blackboard

        -

        Strongly-typed data flow between nodes. Catch errors at compile time.

        -
        - - -
        -
        📝
        -

        XML-Defined Trees

        -

        Modify behaviors without recompiling. Perfect for field engineers.

        -
        - -
        -
        🔍
        -

        Built-in Logging

        -

        Record, replay, and analyze state transitions with confidence.

        -
        - -
        -
        🤖
        -

        ROS2 Integration

        -

        Official wrappers for actions, services, and topics. Powers the Nav2 navigation stack trusted by hundreds of robots and engineering teams worldwide.

        -
        -
        -
        - - -
        -
        -
        -
        -

        Meet Groot2

        -

        The IDE for Behavior Trees. Design, debug, and deploy with confidence.

        - -
        -
        -
        -
        - Visual Editor - Drag-and-drop interface for rapid prototyping -
        -
        -
        -
        -
        - Real-time Monitoring - Watch your tree execute live on your robot -
        -
        -
        -
        -
        - Log Replay & Analysis - Debug past runs with full state reconstruction -
        -
        -
        -
        -
        - Breakpoints & Fault Injection - Pause execution and simulate failures -
        -
        -
        - - Learn More About Groot2 -
        - -
        -
        -
        - - - -
        -
        -
        Sequence
        -
        -
        -
        Fallback
        -
        Navigate
        -
        -
        -
        -
        Check
        -
        Pick
        -
        Place
        -
        -
        -
        -
        -
        -
        - - -
        -
        -

        Ready to Build Smarter Robots?

        -

        Join thousands of engineers using BehaviorTree.CPP to build production-grade autonomous systems.

        - -
        -
        - - -
        - - - -
        - - diff --git a/landing-page-summary.md b/landing-page-summary.md deleted file mode 100644 index 193b20d..0000000 --- a/landing-page-summary.md +++ /dev/null @@ -1,71 +0,0 @@ -# BehaviorTree.CPP Landing Page Summary - -## Overall Style -Organic, warm aesthetic with soft rounded corners, floating gradient blobs, and generous whitespace. Light cream background with green accent color. Subtle grain texture overlay for depth. Modern 2025 design trends: bento grid layout, micro-animations on hover. - -## Typography -- Display font: Outfit (friendly, modern sans-serif) -- Monospace: JetBrains Mono (for code/technical elements) -- Large bold headlines, comfortable body text - -## Color Palette -- Background: Warm cream/off-white -- Accent: Green (used for CTAs, highlights, hover states) -- Text: Dark charcoal for headings, medium gray for body -- Dark sections: Near-black (header, trust bar, footer) - ---- - -## Page Structure - -### Header (dark) -Full-width navigation bar with: logo + "BehaviorTree" text, links (Docs, Groot2, version dropdown, Blog, GitHub). - -### Hero Section -- Badge: "Powering Nav2 and 100+ robotics companies" -- Headline: "The Industry Standard for Robot Intelligence" -- Subheadline: Brief description of the framework -- Two CTAs: "Get Started Free" (primary), "Try Groot2 IDE" (secondary) -- Stats row: 3.7k+ GitHub Stars, 100+ Companies, 10+ Years Active -- Animated floating green blobs in background - -### Trust Bar (dark) -Lists integrations: Nav2/ROS2, MoveIt2, NVIDIA Isaac, Open Navigation, Husarion - -### Features Section - Bento Grid -Title: "Why BehaviorTree.CPP?" with subtitle "Built for real-world robotics, not just demos" - -Six feature cards in asymmetric bento layout: -1. **Async-First Design** (large) - Non-blocking actions, concurrent execution -2. **Plugin Architecture** (small) - Runtime loading, separation of concerns -3. **Type-Safe Blackboard** (small) - Strongly-typed data flow -4. **XML-Defined Trees** (small) - Modify without recompiling -5. **Built-in Logging** (small) - Record, replay, analyze -6. **ROS2 Integration** (large) - Official wrappers, powers Nav2 - -Cards have hover effect: lift up and fill with green gradient. - -### Groot2 Section -Two-column layout: text left, visual preview right. -- Headline: "Meet Groot2" -- Tagline: "The IDE for Behavior Trees" -- Feature list with checkmarks: Visual Editor, Real-time Monitoring, Log Replay, Breakpoints -- CTA: "Learn More About Groot2" -- Mock window showing behavior tree node diagram - -### CTA Section -- Headline: "Ready to Build Smarter Robots?" -- Two buttons: "Start the Tutorial", "Contact for Enterprise" -- Gradient background fading to light green - -### Footer (dark, rounded top corners) -Four columns: Brand description, Documentation links, Community links, Company links. -Bottom bar with copyright and tagline. - ---- - -## Interactive Elements -- Hover effects on all cards (lift + color change) -- Floating blob animations in hero -- Smooth scroll behavior -- Button hover states with shadow changes diff --git a/src/css/custom.css b/src/css/custom.css index 7ff5376..467b6f3 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -4,75 +4,60 @@ * work well for content-centric websites. */ -@import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Outfit:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap'); + @import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap'); -/* Design System Variables */ +/* You can override the default Infima variables here. */ :root { - /* Fonts - Keep Open Sans for documentation */ - --ifm-font-family-base: 'Open Sans', sans-serif; - /* Landing page uses Outfit via module CSS */ - --font-display: 'Outfit', sans-serif; - --font-mono: 'JetBrains Mono', monospace; - - /* Green palette */ - --green-50: #f0fdf4; - --green-100: #dcfce7; - --green-200: #bbf7d0; - --green-400: #4ade80; - --green-500: #22c55e; - --green-600: #16a34a; - --green-700: #15803d; - - /* Neutral palette */ - --cream: #fdfcfa; - --warm-white: #fffef9; - --sand: #f5f3ef; - --text-dark: #1c1917; - --text-mid: #44403c; - --text-light: #78716c; - - /* Docusaurus overrides */ - --ifm-color-primary: #16a34a; - --ifm-color-primary-dark: #15803d; - --ifm-color-primary-darker: #166534; - --ifm-color-primary-darkest: #14532d; - --ifm-color-primary-light: #22c55e; - --ifm-color-primary-lighter: #4ade80; - --ifm-color-primary-lightest: #86efac; + --ifm-font-family-base: 'Open Sans'; + --ifm-color-primary: #0dbb5b; + --ifm-color-primary-dark: #29784c; + --ifm-color-primary-darker: #277148; + --ifm-color-primary-darkest: #205d3b; + --ifm-color-primary-light: #33925d; + --ifm-color-primary-lighter: #359962; + --ifm-color-primary-lightest: #3cad6e; --ifm-code-font-size: 95%; --docusaurus-highlighted-code-line-bg: rgb(180, 251, 169); - /* Radii */ - --radius-sm: 12px; - --radius-md: 20px; - --radius-lg: 32px; - --radius-xl: 48px; - --doc-sidebar-width: 350px !important; --ifm--sidebar-font-size: 14px; } -html { - scroll-behavior: smooth; -} - article { max-width: 900px; margin-left: auto; margin-right: auto; } -.theme-doc-sidebar-menu { +.theme-doc-sidebar-menu{ font-size: 18px; } -/* Navbar dark style override for landing page consistency */ -.navbar--dark { - background: var(--text-dark); +@media (min-width: 992px) and (max-width: 1199.98px) { + .heroBanner_src-pages-index-module h1 { + font-size: 30px !important; + font-weight: bold; + } } - @media (max-width: 580px) { .navbar__title { font-size: 14px; } -} \ No newline at end of file + .heroBanner_src-pages-index-module h1 { + font-size: 32px !important; + font-weight: bold; + } + .heroBanner_src-pages-index-module p { + font-size: 20px !important; + } +} + +@media (max-width: 480px) { + .heroBanner_src-pages-index-module h1 { + font-size: 28px !important; + font-weight: bold; + } + .heroBanner_src-pages-index-module p { + font-size: 18px !important; + } +} diff --git a/src/pages/groot.js b/src/pages/groot.js index 75778ea..9b9b381 100644 --- a/src/pages/groot.js +++ b/src/pages/groot.js @@ -1,9 +1,11 @@ -import React, { useEffect, useState } from "react"; +import React, { useEffect,useState } from "react"; import Layout from "@theme/Layout"; import Link from "@docusaurus/Link"; import useBaseUrl from "@docusaurus/useBaseUrl"; import styles from "./groot.module.css"; -import sharedStyles from "./index.module.css"; +import Table from "react-bootstrap/Table"; +import { OverlayTrigger, Tooltip } from "react-bootstrap"; +import Head from "@docusaurus/Head"; import clsx from "clsx"; import EditorVideo from "@site/static/img/groot2_editor.mp4"; @@ -11,6 +13,13 @@ import MonitorVideo from "@site/static/img/groot2_monitor.mp4"; import LogVideo from "@site/static/img/groot2_log.mp4"; import ContactUSFormModal from "../components/ContactFormModal"; +function Check(props) { + return yes; +} +function Cross(props) { + return no; +} + export default function Groot() { const [chargebeeInitialized, setChargebeeInitialized] = useState(false); @@ -42,285 +51,386 @@ export default function Groot() { } }, [chargebeeInitialized]); - const scrollToSection = (sectionId) => { - const section = document.getElementById(sectionId); - if (section) { - section.scrollIntoView({ behavior: "smooth" }); - } - }; + const handleClickBasic = () => { + scrollToSection('sectionDownload') + } - const handleClickContact = () => { - setOpenContactUsModal(true); + const handleClickPro = () => { }; - const handleCloseModal = () => { - setOpenContactUsModal(false); - }; + const handleClickContact = () => { + setOpenContactUsModal(true) + // window.location.href = 'mailto:license@aurynrobotics.com' + } - const pricingPlans = [ + const obj = [ { name: "Basic", price: "Free", - duration: "", + durance: "", points: [ "Full Behavior Tree Editor", "Monitor and Log Visualizer limited to 20 Nodes", ], - buttonText: "Download", - onClick: () => scrollToSection("sectionDownload"), + btn: "Download", + onclick:() => handleClickBasic() }, { name: "PRO (floating license)", price: "€690", - duration: " / year", + durance: " / year", points: [ "Search Nodes in large trees", "Unlimited Number of Nodes in Monitor and Log Visualizer", - "Interactive real-time debugger", + "Interactive real-time debugger" ], - buttonText: "Buy now", - isChargebee: true, + btn: "Buy now", + onclick:() => handleClickPro() }, { name: "Training", price: "€1,800", - duration: " / month", + durance: " / month", points: [ "Includes 1 PRO license (1 year)", "Up to 12 hours per month", "Learn how to use BT.CPP effectively or improve your current implementation", ], - buttonText: "Contact us", - onClick: handleClickContact, + btn: "Contact us", + onclick:() => handleClickContact() }, ]; + const renderTooltip = (message, props) => { + return ( + + {message} + + ); + }; + + const openPopup = () => { + if (!window.mootrack) { + !(function (t, n, e, o, a) { + function d(t) { + var n = ~~(Date.now() / 3e5), + o = document.createElement(e); + (o.async = !0), (o.src = t + "?ts=" + n); + var a = document.getElementsByTagName(e)[0]; + a.parentNode.insertBefore(o, a); + } + (t.MooTrackerObject = a), + (t[a] = + t[a] || + function () { + return t[a].q + ? void t[a].q.push(arguments) + : void (t[a].q = [arguments]); + }), + window.attachEvent + ? window.attachEvent("onload", d.bind(this, o)) + : window.addEventListener("load", d.bind(this, o), !1); + })( + window, + document, + "script", + "https://cdn.stat-track.com/statics/moosend-tracking.min.js", + "mootrack" + ); + } + { + (" "); + } + mootrack("loadForm", "419144d798774876bcfcd1e1f0b6a2ad"); + }; + + const scrollToSection = (sectionId) => { + const section = document.getElementById(sectionId); + if (section) { + section.scrollIntoView({ behavior: "smooth" }); + } + }; + + const handleCloseUsModal = () => setOpenContactUsModal(false) + return ( - + <> + + {/* groot intro */} {openContactUsModal && ( - + )} - - {/* Hero Section */}
        -
        -
        -
        -

        Groot2

        -

        - The most advanced IDE
        to create and debug Behavior Trees. +

        +
        +
        +

        + Groot2 +

        +

        + The most advanced IDE
        to create and debug Behavior Trees.

        -
        - Groot2 IDE +
        +
        - {/* BT Editor Section */} -
        -
        -
        -

        BT Editor

        -
          -
        • Create and edit trees, using a simple drag and drop interface.
        • -
        • Manage large projects using multiple files.
        • -
        • Compatible with both BT.CPP 3 and 4.
        • -
        • Split view to visualize two trees at once.
        • -
        • Preview the XML in real-time.
        • -
        • PRO: search Nodes in large trees.
        • -
        -
        -
        -
        -
        -

        BT Editor

        -
          -
        • Create and edit trees, using a simple drag and drop interface.
        • -
        • Manage large projects using multiple files.
        • -
        • Compatible with both BT.CPP 3 and 4.
        • -
        • Split view to visualize two trees at once.
        • -
        • Preview the XML in real-time.
        • -
        • PRO: search Nodes in large trees.
        • -
        +
        +
        +
        +
        +

        BT Editor

        +
          +
        • Create and edit trees, using a simple drag and drop interface.
        • +
        • Manage large projects using multiple files.
        • +
        • Compatible with both BT.CPP 3 and 4.
        • +
        • Split view to visualize two trees at once.
        • +
        • Preview the XML in real-time.
        • +
        • PRO: search Nodes in large trees.
        • +
        +
        +
        +
        + +
        +
        +

        BT Editor

        +
          +
        • Create and edit trees, using a simple drag and drop interface.
        • +
        • Manage large projects using multiple files.
        • +
        • Compatible with both BT.CPP 3 and 4.
        • +
        • Split view to visualize two trees at once.
        • +
        • Preview the XML in real-time.
        • +
        • PRO: search Nodes in large trees.
        • +
        +
        +
        - {/* Real-time Monitor Section */} -
        -
        -
        -

        Real-time Monitor

        -
          -
        • Connect to a running BT.CPP executor and visualize the state of the tree in real-time.
        • -
        • Record all transitions into a log file, that you can analyze later.
        • -
        • PRO: Visualize the content of the blackboard.
        • -
        • PRO: Add interactive breakpoints and fault injection.
        • -
        • PRO: Substitute any Nodes with dummy ones, at run-time.
        • -
        -
        -
        -