{"id":1369,"date":"2022-06-04T15:29:19","date_gmt":"2022-06-04T13:29:19","guid":{"rendered":"https:\/\/staging.u-experten.dewhy-how"},"modified":"2023-06-26T16:41:43","modified_gmt":"2023-06-26T14:41:43","slug":"why-how","status":"publish","type":"page","link":"https:\/\/staging.u-experten.de\/en\/why-how\/","title":{"rendered":"Why &amp; How"},"content":{"rendered":"<div data-block-name=\"hero\" data-block-top x-data=\"hero\" class=\"relative pt-56 ph:pt-32\" x-bind:class=\"additionalBottomSpacing ? 'pb-[264px] ph:pb-[220px]' : 'pb-30 ph:pb-14'\" x-argh:animate-long=\"false\">\n    <div x-show=\"animateLong\" x-cloak x-ref=\"animatedImage\" x-bind=\"animatedImage\" class=\"absolute top-1\/2 left-1\/2 overflow-hidden bg-cover bg-center -translate-x-1\/2 -translate-y-1\/2 ease-hero\"><\/div>\n\n            <div x-ref=\"slider\" x-cloak class=\"swiper-container absolute inset-0 overflow-hidden\">\n            <div class=\"swiper-wrapper\">\n                                    <div class=\"swiper-slide relative\">\n                        <div class=\"absolute inset-0 bg-cover bg-center\" style=\"background-image: url(https:\/\/staging.u-experten.de\/wp-content\/uploads\/2022\/06\/why-how-smart-products-uexperten.jpg)\">\n                                                            <div class=\"absolute inset-0\" style=\"background-color: rgba(25,34,57,0.61)\"><\/div>\n                                                    <\/div>\n                    <\/div>\n                            <\/div>\n\n                    <\/div>\n    \n    <div x-show=\"isReady\" x-cloak class=\"absolute inset-0 -bottom-full overflow-hidden pointer-events-none\">\n        <div x-bind=\"circle1\" class=\"absolute top-1\/4 left-1\/2 border border-orange rounded-full ease-hero before:block before:pt-full\"><\/div>\n        <div x-bind=\"circle2\" class=\"absolute top-1\/4 left-1\/2 border border-orange rounded-full ease-hero before:block before:pt-full\"><\/div>\n        <div x-bind=\"circle3\" class=\"absolute top-1\/4 left-1\/2 border border-orange rounded-full ease-hero before:block before:pt-full\"><\/div>\n    <\/div>\n\n    <div class=\"wrapper pointer-events-buttons relative\">\n        <div x-ref=\"innerBlocks\" x-cloak class=\"prose max-w-[560px]\" x-bind:class=\"animateLong ? 'prose-animate-2' : 'prose-animate-1'\">\n            \n\n<p class=\"is-style-narrow\">WHY &amp; HOW<\/p>\n\n\n\n<p class=\"uppercase is-style-narrow has-fz-80-font-size\"><strong><strong>How we work<\/strong><\/strong><\/p>\n\n\n\n<p>We support customers in an interdisciplinary and agile way in the development of new smart connected devices and IoT services. We have all the necessary skills to think holistically about product developments from the idea to lifecycle management and to implement them from a single source.<\/p>\n\n\n        <\/div>\n    <\/div>\n<\/div>\n\n<div\n    data-block-name=\"section\"\n    data-block-top\n    x-data=\"section\"\n    x-bind=\"root\"\n    x-argh:background-color=\"'purple'\"\n    x-argh:custom-background-color=\"''\"\n    x-argh:padding-top=\"120\"\n    x-argh:padding-bottom=\"0\"\n    x-argh:wrapper-max-width=\"'1296px'\"\n    x-argh:vertical-spacing=\"0\"\n    x-argh:overflow=\"'visible'\"\n    id=\"monkey-box\"\n    data-gradient-start=\"false\"\n    data-gradient-start-color=\"#4E2154\"\n    data-gradient-end=\"false\"\n    data-gradient-end-color=\"#192239\"\n    style=\"--column-gap: 86px\"\n>\n    <div class=\"wrapper wrapper-default\">\n        <div x-ref=\"innerBlocks\" x-bind=\"innerBlocks\">\n            \n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-layout-1 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:860px\">\n<p class=\"is-style-narrow has-orange-color has-text-color has-fz-12-font-size\">MONKEY BOX CASE<\/p>\n\n\n\n<p class=\"is-style-narrow has-fz-80-font-size\"><strong>THE MONKEY BOX \u2013 FROM IDEA TO MVP<\/strong><\/p>\n\n\n\n<p>The Monkey Box is an in-house developed IoT product that facilitates decentralized fundraising for social enterprises. Based on an initial idea, a physical MVP including cloud connection, crypto wallet, web platform and first test application for a social startup was developed in just a few weeks with the help of our MVP XP Sprint process. The Monkey Box uses a simple example to make the interdisciplinary, agile character of U-Experten visible.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-layout-2 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/staging.u-experten.dewp-content\/uploads\/2022\/06\/monkey-box-vision-smart-products-uexperten-1024x1024.png\" alt=\"\" class=\"wp-image-1343 lazyload\"\/><noscript><img decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/staging.u-experten.dewp-content\/uploads\/2022\/06\/monkey-box-vision-smart-products-uexperten-1024x1024.png\" alt=\"\" class=\"wp-image-1343 lazyload\" srcset=\"https:\/\/staging.u-experten.de\/wp-content\/uploads\/2022\/06\/monkey-box-vision-smart-products-uexperten-1024x1024.png 1024w, https:\/\/staging.u-experten.de\/wp-content\/uploads\/2022\/06\/monkey-box-vision-smart-products-uexperten-300x300.png 300w, https:\/\/staging.u-experten.de\/wp-content\/uploads\/2022\/06\/monkey-box-vision-smart-products-uexperten-150x150.png 150w, https:\/\/staging.u-experten.de\/wp-content\/uploads\/2022\/06\/monkey-box-vision-smart-products-uexperten-768x768.png 768w, https:\/\/staging.u-experten.de\/wp-content\/uploads\/2022\/06\/monkey-box-vision-smart-products-uexperten-1536x1536.png 1536w, https:\/\/staging.u-experten.de\/wp-content\/uploads\/2022\/06\/monkey-box-vision-smart-products-uexperten.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/noscript><\/figure><\/div><\/div>\n<\/div>\n\n\n        <\/div>\n    <\/div>\n<\/div>\n\n<div\n    data-block-name=\"section\"\n    data-block-top\n    x-data=\"section\"\n    x-bind=\"root\"\n    x-argh:background-color=\"'default'\"\n    x-argh:custom-background-color=\"''\"\n    x-argh:padding-top=\"120\"\n    x-argh:padding-bottom=\"120\"\n    x-argh:wrapper-max-width=\"'1296px'\"\n    x-argh:vertical-spacing=\"56\"\n    x-argh:overflow=\"'visible'\"\n    id=\"\"\n    data-gradient-start=\"false\"\n    data-gradient-start-color=\"#4E2154\"\n    data-gradient-end=\"false\"\n    data-gradient-end-color=\"#192239\"\n    style=\"--column-gap: 86px\"\n>\n    <div class=\"wrapper wrapper-default\">\n        <div x-ref=\"innerBlocks\" x-bind=\"innerBlocks\">\n            \n<div data-block-name=\"story\" x-data=\"story\">\n    <div class=\"flex ph:flex-col justify-between gap-14 ph:gap-6\">\n        <div x-intersect.once=\"$el.setAttribute('data-visible', true)\" class=\"prose prose-animate-viewport\">\n            <p style=\"color: \">5 steps to the Monkey Box<\/p>\n            <p style=\"color: \" class=\"font-narrow font-strong has-fz-48-font-size translate-y-12\">U-EXPERTEN<br \/>\nMONKEY BOX<\/p>\n        <\/div>\n\n            <\/div>\n\n    <div x-intersect:leave=\"setActiveTitle(null)\" class=\"flex wp-gap\">\n        <div id=\"block_aab7313a8783400e06e1dd86c4bb6034\" class=\"sticky top-18 ph:hidden basis-1\/2 flex mt-18\">\n            <style>\n                #block_aab7313a8783400e06e1dd86c4bb6034 *,\n                #block_aab7313a8783400e06e1dd86c4bb6034 ::before,\n                #block_aab7313a8783400e06e1dd86c4bb6034 ::after {\n                    --line-color: ;\n                    --circle-color: ;\n                }\n            <\/style>\n            <div class=\"space-y-16 mx-auto pb-16\">\n                <div class=\"absolute top-0 bottom-0 left-1\/2 w-px bg-white dark:bg-blue  -translate-x-1\/2 line-arrow-bottom\"><\/div>\n\n                <template x-for=\"(marker, index) in markers\" >\n                    <div class=\"relative flex flex-col\">\n                        <button x-bind=\"markerButton\" x-on:click=\"scrollTo(marker.title)\" aria-label=\"Click to scroll\" class=\"relative w-5 h-5 bg-blue dark:bg-turqouise  border border-white dark:border-blue  rounded-full before:absolute before:-inset-px before:bg-white dark:before:bg-blue  before:rounded-full hover:before:opacity-100 focus:before:opacity-100 hover:before:scale-100 focus:before:scale-100 before:transition-all before:duration-300 after:absolute after:-inset-2 after:border-2 after:border-dashed after:border-orange after:rounded-full after:pointer-events-none after:transition after:duration-500 after:animate-spin-slow\"><\/button>\n                        <strong x-bind=\"markerTitle\" x-text=\"marker.title\" class=\"absolute top-1\/2  text-10 uppercase whitespace-nowrap -translate-y-1\/2 transition duration-300\"><\/strong>\n                    <\/div>\n                <\/template>\n            <\/div>\n        <\/div>\n        \n        <div\n            x-ref=\"innerBlocks\"\n            x-on:intersectenter.stop=\"setActiveTitle($event.detail)\"\n            x-on:intersectleave.stop=\"onIntersectLeave($event.detail)\"\n            class=\"wrapper-slider-mobile basis-1\/2 space-y-24 ph:space-y-6 ph:mt-14 ph:-mb-14 ph:pb-14\"\n        >\n            \n<div\n    data-block-name=\"story-card\"\n    x-data=\"storyCard\"\n    x-argh:style=\"''\"\n    x-intersect:enter.threshold.30=\"$dispatch('intersectenter', $el.dataset.title)\"\n    x-intersect:leave.threshold.30=\"$dispatch('intersectleave', $el.dataset.title)\"\n    data-title=\"IoT talk\"\n    x-cloak\n    class=\"block_c23bdebbad02b6faab56fc36b3fa262b shrink-0 max-w-[533px] tp:max-w-[430px] h-auto ph:max-w-full p-12 ph:p-6 pb-20 ph:pt-8 ph:pb-10 overflow-hidden bg-purple rounded-12 ph:rounded shadow-story-card text-turqouise\"\n>\n    <style>.block_c23bdebbad02b6faab56fc36b3fa262b { background-color:  !important }<\/style>\n    <p x-bind=\"title\" style=\"color: ; -webkit-text-stroke-color: \" class=\"relative z-10 uppercase font-strong\">IoT talk<\/p>\n    <div\n        style=\"background-image: url(https:\/\/staging.u-experten.de\/wp-content\/uploads\/2022\/06\/monkey-box-showcase-b-01-smart-products-uexperten.jpg)\"\n        class=\"relative w-[280px] ph:w-[226px] mx-auto overflow-hidden rounded-12 -translate-y-6 translate-x-6 bg-cover bg-center before:block before:pt-[105%]\"\n    >\n                    <div class=\"absolute inset-0 bg-blue opacity-75 mix-blend-hard-light\"><\/div>\n            <\/div>\n\n    <div x-ref=\"innerBlocks\" class=\"prose tracking-wide\">\n        \n\n<p class=\"has-fz-24-font-size\">A vision was born<\/p>\n\n\n    <\/div>\n<\/div>\n\n<div\n    data-block-name=\"story-card\"\n    x-data=\"storyCard\"\n    x-argh:style=\"''\"\n    x-intersect:enter.threshold.30=\"$dispatch('intersectenter', $el.dataset.title)\"\n    x-intersect:leave.threshold.30=\"$dispatch('intersectleave', $el.dataset.title)\"\n    data-title=\"After 2 hours\"\n    x-cloak\n    class=\"block_c82b7691b3ad90bac13a239275cfc1f4 shrink-0 max-w-[533px] tp:max-w-[430px] h-auto ph:max-w-full p-12 ph:p-6 pb-20 ph:pt-8 ph:pb-10 overflow-hidden bg-purple rounded-12 ph:rounded shadow-story-card text-turqouise\"\n>\n    <style>.block_c82b7691b3ad90bac13a239275cfc1f4 { background-color:  !important }<\/style>\n    <p x-bind=\"title\" style=\"color: ; -webkit-text-stroke-color: \" class=\"relative z-10 uppercase font-strong\">After 2 hours<\/p>\n    <div\n        style=\"background-image: url(https:\/\/staging.u-experten.de\/wp-content\/uploads\/2022\/06\/monkey-box-showcase-b-02-smart-products-uexperten.jpg)\"\n        class=\"relative w-[280px] ph:w-[226px] mx-auto overflow-hidden rounded-12 -translate-y-6 translate-x-6 bg-cover bg-center before:block before:pt-[105%]\"\n    >\n                    <div class=\"absolute inset-0 bg-blue opacity-75 mix-blend-hard-light\"><\/div>\n            <\/div>\n\n    <div x-ref=\"innerBlocks\" class=\"prose tracking-wide\">\n        \n\n<p class=\"has-fz-24-font-size\">Feasibility concept cloud, crypto, etc.<\/p>\n\n\n    <\/div>\n<\/div>\n\n<div\n    data-block-name=\"story-card\"\n    x-data=\"storyCard\"\n    x-argh:style=\"''\"\n    x-intersect:enter.threshold.30=\"$dispatch('intersectenter', $el.dataset.title)\"\n    x-intersect:leave.threshold.30=\"$dispatch('intersectleave', $el.dataset.title)\"\n    data-title=\"After 10 days\"\n    x-cloak\n    class=\"block_b7397d81e0d86239b332fabd32ad0f62 shrink-0 max-w-[533px] tp:max-w-[430px] h-auto ph:max-w-full p-12 ph:p-6 pb-20 ph:pt-8 ph:pb-10 overflow-hidden bg-purple rounded-12 ph:rounded shadow-story-card text-turqouise\"\n>\n    <style>.block_b7397d81e0d86239b332fabd32ad0f62 { background-color:  !important }<\/style>\n    <p x-bind=\"title\" style=\"color: ; -webkit-text-stroke-color: \" class=\"relative z-10 uppercase font-strong\">After 10 days<\/p>\n    <div\n        style=\"background-image: url(https:\/\/staging.u-experten.de\/wp-content\/uploads\/2022\/06\/monkey-box-showcase-b-03-smart-products-uexperten.jpg)\"\n        class=\"relative w-[280px] ph:w-[226px] mx-auto overflow-hidden rounded-12 -translate-y-6 translate-x-6 bg-cover bg-center before:block before:pt-[105%]\"\n    >\n                    <div class=\"absolute inset-0 bg-blue opacity-75 mix-blend-hard-light\"><\/div>\n            <\/div>\n\n    <div x-ref=\"innerBlocks\" class=\"prose tracking-wide\">\n        \n\n<p class=\"has-fz-24-font-size\">Experience prototype incl. cloud setup, automated payment (Crypto) with live user test<\/p>\n\n\n    <\/div>\n<\/div>\n\n<div\n    data-block-name=\"story-card\"\n    x-data=\"storyCard\"\n    x-argh:style=\"''\"\n    x-intersect:enter.threshold.30=\"$dispatch('intersectenter', $el.dataset.title)\"\n    x-intersect:leave.threshold.30=\"$dispatch('intersectleave', $el.dataset.title)\"\n    data-title=\"After 6 weeks\"\n    x-cloak\n    class=\"block_4e93781b2c6165400264c62a7436454f shrink-0 max-w-[533px] tp:max-w-[430px] h-auto ph:max-w-full p-12 ph:p-6 pb-20 ph:pt-8 ph:pb-10 overflow-hidden bg-purple rounded-12 ph:rounded shadow-story-card text-turqouise\"\n>\n    <style>.block_4e93781b2c6165400264c62a7436454f { background-color:  !important }<\/style>\n    <p x-bind=\"title\" style=\"color: ; -webkit-text-stroke-color: \" class=\"relative z-10 uppercase font-strong\">After 6 weeks<\/p>\n    <div\n        style=\"background-image: url(https:\/\/staging.u-experten.de\/wp-content\/uploads\/2022\/06\/monkey-box-showcase-b-04-smart-products-uexperten.jpg)\"\n        class=\"relative w-[280px] ph:w-[226px] mx-auto overflow-hidden rounded-12 -translate-y-6 translate-x-6 bg-cover bg-center before:block before:pt-[105%]\"\n    >\n                    <div class=\"absolute inset-0 bg-blue opacity-75 mix-blend-hard-light\"><\/div>\n            <\/div>\n\n    <div x-ref=\"innerBlocks\" class=\"prose tracking-wide\">\n        \n\n<p class=\"has-fz-24-font-size\">3D printing with (interaction) design, display selection, tenant management and monkey web<\/p>\n\n\n    <\/div>\n<\/div>\n\n<div\n    data-block-name=\"story-card\"\n    x-data=\"storyCard\"\n    x-argh:style=\"''\"\n    x-intersect:enter.threshold.30=\"$dispatch('intersectenter', $el.dataset.title)\"\n    x-intersect:leave.threshold.30=\"$dispatch('intersectleave', $el.dataset.title)\"\n    data-title=\"The Future\"\n    x-cloak\n    class=\"block_7634ab0017502f8f7880786cbadc06c0 shrink-0 max-w-[533px] tp:max-w-[430px] h-auto ph:max-w-full p-12 ph:p-6 pb-20 ph:pt-8 ph:pb-10 overflow-hidden bg-purple rounded-12 ph:rounded shadow-story-card text-turqouise\"\n>\n    <style>.block_7634ab0017502f8f7880786cbadc06c0 { background-color:  !important }<\/style>\n    <p x-bind=\"title\" style=\"color: ; -webkit-text-stroke-color: \" class=\"relative z-10 uppercase font-strong\">The Future<\/p>\n    <div\n        style=\"background-image: url(https:\/\/staging.u-experten.de\/wp-content\/uploads\/2022\/06\/monkey-box-showcase-b-05-smart-products-uexperten.jpg)\"\n        class=\"relative w-[280px] ph:w-[226px] mx-auto overflow-hidden rounded-12 -translate-y-6 translate-x-6 bg-cover bg-center before:block before:pt-[105%]\"\n    >\n                    <div class=\"absolute inset-0 bg-blue opacity-75 mix-blend-hard-light\"><\/div>\n            <\/div>\n\n    <div x-ref=\"innerBlocks\" class=\"prose tracking-wide\">\n        \n\n<p class=\"has-fz-24-font-size\"><a href=\"https:\/\/monkeybox.u-experten.de\" target=\"_blank\" rel=\"noreferrer noopener\">Visit the MonkeyBox Website.<\/a><\/p>\n\n\n    <\/div>\n<\/div>\n\n        <\/div>\n    <\/div>\n<\/div>\n\n        <\/div>\n    <\/div>\n<\/div>\n\n<div\n    data-block-name=\"section\"\n    data-block-top\n    x-data=\"section\"\n    x-bind=\"root\"\n    x-argh:background-color=\"'purple'\"\n    x-argh:custom-background-color=\"''\"\n    x-argh:padding-top=\"120\"\n    x-argh:padding-bottom=\"120\"\n    x-argh:wrapper-max-width=\"'1296px'\"\n    x-argh:vertical-spacing=\"56\"\n    x-argh:overflow=\"'visible'\"\n    id=\"\"\n    data-gradient-start=\"false\"\n    data-gradient-start-color=\"#4E2154\"\n    data-gradient-end=\"false\"\n    data-gradient-end-color=\"#192239\"\n    style=\"--column-gap: 86px\"\n>\n    <div class=\"wrapper wrapper-default\">\n        <div x-ref=\"innerBlocks\" x-bind=\"innerBlocks\">\n            \n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-layout-3 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div data_block_name=\"vcard\" \n    x-data=\"vcard\"\n    x-bind=\"vcard\"\n    x-argh:style=\"'vertical'\"\n    class=\"flex ph:max-w-[420px] ph:items-start\"\n>\n    <div x-bind=\"image\" class=\"relative rounded-full border-2 border-orange ph:w-24 before:block before:pt-[100%] shrink-0\">\n        <div \n            class=\"absolute rounded-full bg-center bg-cover w-3\/4 h-3\/4 right-[5%] top-[18%]\"\n            style=\"background-image: url('https:\/\/staging.u-experten.de\/wp-content\/uploads\/2023\/06\/Alexander-W.-Jonke-Geschaeftsfuehrer-U-Experten\u00a9-UX-Gruppe-M4.jpg')\"\n        ><\/div>\n    <\/div>\n\n    <div style=\"color: \" class=\"flex flex-col font-narrow\">\n        <span class=\"text-24 font-strong\">Alexander W. Jonke<\/span>\n        <span>Managing Director U-Experten<\/span>\n        <div style=\"color: \" class=\"mt-8 flex flex-col\">\n            <a class=\"flex gap-x-2 items-center hover:text-orange focus:text-orange whitespace-nowrap transition\" href=\"tel:+49 8105 77839-128\" target=\"_blank\" rel=\"noopener noreferrer\">\n                <i class=\"icon-phone text-24\"><\/i>\n                <span>+49 8105 77839-128<\/span>\n            <\/a>\n            <a class=\"flex gap-x-2 items-center hover:text-orange focus:text-orange whitespace-nowrap transition\" href=\"mailto:info@u-experten.de\" target=\"_blank\" rel=\"noopener noreferrer\">\n                <i class=\"icon-envelope text-24\"><\/i>\n                <span>info@u-experten.de<\/span>\n            <\/a>\n                    <\/div>\n    <\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"is-style-outlined has-orange-color has-text-color has-fz-64-font-size\">GET IN TOUCH<\/p>\n\n\n\n<div style=\"height:48px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<form data-block-name=\"form\" x-data=\"form\" x-on:submit.prevent=\"onSubmit()\" style=\"--form-primary-color: #EF7D00; --form-secondary-color: #192239; --form-text-color: #FFFFFF;\">\n    <input type=\"hidden\" name=\"action\" value=\"ue_form\">\n    <input type=\"hidden\" name=\"post_id\" value=\"1369\">\n    <input type=\"hidden\" name=\"form_id\" value=\"1657\">\n\n    <div class=\"space-y-10\">\n        <div class=\"space-y-10 transition duration-300\" x-bind:class=\"(submitting || successMessage) &#038;&#038; 'pointer-events-none opacity-40'\">\n            <div data-block-name=\"text-input\" x-data x-id=\"['text-input']\" class=\"flex flex-col items-start\">\n    <div class=\"relative w-full py-2 border-b border-orange\/20 focus-within:border-orange transition duration-300\" x-bind:class=\"fieldErrors['Name'] &#038;&#038; '!border-signal-red'\">\n                    <input class=\"input block w-full h-8 bg-transparent border-none outline-none font-narrow text-white text-24 tracking-normal\" type=\"text\" placeholder=\" \" name=\"Name\" x-bind:id=\"$id('text-input')\">\n        \n        <label class=\"absolute top-2 pointer-events-none font-narrow text-orange text-24 leading-none tracking-normal transition-all duration-300\" x-bind:for=\"$id('text-input')\">Your name*<\/label>\n    <\/div>\n    <span class=\"pt-px pb-0.5 px-1.5 bg-signal-red rounded-b-4 text-white text-12\" x-show=\"fieldErrors['Name']\" x-text=\"fieldErrors['Name']\"><\/span>\n<\/div>\n\n<div data-block-name=\"text-input\" x-data x-id=\"['text-input']\" class=\"flex flex-col items-start\">\n    <div class=\"relative w-full py-2 border-b border-orange\/20 focus-within:border-orange transition duration-300\" x-bind:class=\"fieldErrors['e-mail'] &#038;&#038; '!border-signal-red'\">\n                    <input class=\"input block w-full h-8 bg-transparent border-none outline-none font-narrow text-white text-24 tracking-normal\" type=\"text\" placeholder=\" \" name=\"e-mail\" x-bind:id=\"$id('text-input')\">\n        \n        <label class=\"absolute top-2 pointer-events-none font-narrow text-orange text-24 leading-none tracking-normal transition-all duration-300\" x-bind:for=\"$id('text-input')\">Your email*<\/label>\n    <\/div>\n    <span class=\"pt-px pb-0.5 px-1.5 bg-signal-red rounded-b-4 text-white text-12\" x-show=\"fieldErrors['e-mail']\" x-text=\"fieldErrors['e-mail']\"><\/span>\n<\/div>\n\n<div data-block-name=\"text-input\" x-data x-id=\"['text-input']\" class=\"flex flex-col items-start\">\n    <div class=\"relative w-full py-2 border-b border-orange\/20 focus-within:border-orange transition duration-300\" x-bind:class=\"fieldErrors['message'] &#038;&#038; '!border-signal-red'\">\n                    <textarea class=\"input block w-full resize-y bg-transparent border-none outline-none font-narrow text-white text-24 tracking-normal\" rows=\"2\" placeholder=\" \" name=\"message\" x-bind:id=\"$id('text-input')\"><\/textarea>\n        \n        <label class=\"absolute top-2 pointer-events-none font-narrow text-orange text-24 leading-none tracking-normal transition-all duration-300\" x-bind:for=\"$id('text-input')\">Your message*<\/label>\n    <\/div>\n    <span class=\"pt-px pb-0.5 px-1.5 bg-signal-red rounded-b-4 text-white text-12\" x-show=\"fieldErrors['message']\" x-text=\"fieldErrors['message']\"><\/span>\n<\/div>\n\n<div data-block-name=\"checkbox\" x-data x-id=\"['checkbox']\">\n    <label x-bind:for=\"$id('checkbox')\" class=\"flex text-16 tp:text-18\">\n        <input\n            type=\"checkbox\"\n            name=\"\"\n            x-bind:id=\"$id('checkbox')\"\n            class=\"peer sr-only\"\n            \n        >\n        <span data-checkbox class=\"shrink-0 flex w-[15px] h-[15px] mt-1 mr-3 pt-px border border-orange rounded-2 peer-checked:bg-orange text-transparent peer-checked:text-blue text-[6px] transition-all duration-300\">\n            <i class=\"icon-check m-auto\"><\/i>\n        <\/span>\n        <span x-ref=\"innerBlocks\" class=\"ml-px font-narrow text-orange\">\n            \n\n<p>I hereby agree to the <a rel=\"noreferrer noopener\" href=\"https:\/\/staging.u-experten.deen\/data-privacy\/\" data-type=\"page\" data-id=\"1489\" target=\"_blank\">data privacy declaration<\/a><\/p>\n\n\n        <\/span>\n    <\/label>\n    <span class=\"inline-block mt-2 ml-7 pt-px pb-0.5 px-1.5 bg-signal-red rounded-4 text-white text-12\" x-show=\"fieldErrors['']\" x-text=\"fieldErrors['']\"><\/span>\n<\/div>\n\n            <div x-show=\"!successMessage\" class=\"full-width-tp\">\n                <button\n    data-block-name=\"button\"\n    x-data=\"button\"\n    x-bind=\"simpleRoot\"\n    x-argh:size=\"'base'\"\n    x-argh:color=\"'orange'\"\n    x-argh:custom-color=\"''\"\n    x-argh:arrow-color=\"''\"\n    x-argh:arrow-position=\"'left'\"\n    class=\"group relative inline-flex items-center transition-all duration-300\"\n    \n    type=\"submit\"\n    data-block-id=\"block_b1940c564f459ec9159718e206196f17\"\n>\n    <style>\n        \n            <\/style>\n\n            <span x-bind=\"simpleInner\" class=\"w-full px-12 py-1 group-hover:!bg-transparent group-focus:!bg-transparent border rounded-full font-narrow text-24 transition-all duration-300\">\n            Submit\n        <\/span>\n    <\/button>            <\/div>\n        <\/div>\n\n        <div x-show=\"successMessage\" x-html=\"successMessage\" class=\"text-orange\"><\/div>\n    <\/div>\n<\/form><\/div>\n<\/div>\n\n\n        <\/div>\n    <\/div>\n<\/div>\n\n<div\n    data-block-name=\"section\"\n    data-block-top\n    x-data=\"section\"\n    x-bind=\"root\"\n    x-argh:background-color=\"'default'\"\n    x-argh:custom-background-color=\"''\"\n    x-argh:padding-top=\"120\"\n    x-argh:padding-bottom=\"120\"\n    x-argh:wrapper-max-width=\"'1296px'\"\n    x-argh:vertical-spacing=\"56\"\n    x-argh:overflow=\"'visible'\"\n    id=\"\"\n    data-gradient-start=\"false\"\n    data-gradient-start-color=\"#4E2154\"\n    data-gradient-end=\"false\"\n    data-gradient-end-color=\"#192239\"\n    style=\"--column-gap: 86px\"\n>\n    <div class=\"wrapper wrapper-default\">\n        <div x-ref=\"innerBlocks\" x-bind=\"innerBlocks\">\n            \n<div data-block-name=\"story\" x-data=\"story\">\n    <div class=\"flex ph:flex-col justify-between gap-14 ph:gap-6\">\n        <div x-intersect.once=\"$el.setAttribute('data-visible', true)\" class=\"prose prose-animate-viewport\">\n            <p style=\"color: \">FOUR STEPS TO YOUR SUCCESS<\/p>\n            <p style=\"color: \" class=\"font-narrow font-strong has-fz-48-font-size translate-y-12\">HOW WE<br \/>\r\nWORK<\/p>\n        <\/div>\n\n            <\/div>\n\n    <div x-intersect:leave=\"setActiveTitle(null)\" class=\"flex wp-gap\">\n        <div id=\"block_4b58ff23bdf4f53fbb36d800853446e0\" class=\"sticky top-18 ph:hidden basis-1\/2 flex mt-18\">\n            <style>\n                #block_4b58ff23bdf4f53fbb36d800853446e0 *,\n                #block_4b58ff23bdf4f53fbb36d800853446e0 ::before,\n                #block_4b58ff23bdf4f53fbb36d800853446e0 ::after {\n                    --line-color: ;\n                    --circle-color: ;\n                }\n            <\/style>\n            <div class=\"space-y-16 mx-auto pb-16\">\n                <div class=\"absolute top-0 bottom-0 left-1\/2 w-px bg-white dark:bg-blue  -translate-x-1\/2 line-arrow-bottom\"><\/div>\n\n                <template x-for=\"(marker, index) in markers\" >\n                    <div class=\"relative flex flex-col\">\n                        <button x-bind=\"markerButton\" x-on:click=\"scrollTo(marker.title)\" aria-label=\"Click to scroll\" class=\"relative w-5 h-5 bg-blue dark:bg-turqouise  border border-white dark:border-blue  rounded-full before:absolute before:-inset-px before:bg-white dark:before:bg-blue  before:rounded-full hover:before:opacity-100 focus:before:opacity-100 hover:before:scale-100 focus:before:scale-100 before:transition-all before:duration-300 after:absolute after:-inset-2 after:border-2 after:border-dashed after:border-orange after:rounded-full after:pointer-events-none after:transition after:duration-500 after:animate-spin-slow\"><\/button>\n                        <strong x-bind=\"markerTitle\" x-text=\"marker.title\" class=\"absolute top-1\/2  text-10 uppercase whitespace-nowrap -translate-y-1\/2 transition duration-300\"><\/strong>\n                    <\/div>\n                <\/template>\n            <\/div>\n        <\/div>\n        \n        <div\n            x-ref=\"innerBlocks\"\n            x-on:intersectenter.stop=\"setActiveTitle($event.detail)\"\n            x-on:intersectleave.stop=\"onIntersectLeave($event.detail)\"\n            class=\"wrapper-slider-mobile basis-1\/2 space-y-24 ph:space-y-6 ph:mt-14 ph:-mb-14 ph:pb-14\"\n        >\n            \n<div\n    data-block-name=\"story-card\"\n    x-data=\"storyCard\"\n    x-argh:style=\"''\"\n    x-intersect:enter.threshold.30=\"$dispatch('intersectenter', $el.dataset.title)\"\n    x-intersect:leave.threshold.30=\"$dispatch('intersectleave', $el.dataset.title)\"\n    data-title=\"Vision\"\n    x-cloak\n    class=\"block_dc7676c545d4a5cd4fe0620daed891ac shrink-0 max-w-[533px] tp:max-w-[430px] h-auto ph:max-w-full p-12 ph:p-6 pb-20 ph:pt-8 ph:pb-10 overflow-hidden bg-purple rounded-12 ph:rounded shadow-story-card text-turqouise\"\n>\n    <style>.block_dc7676c545d4a5cd4fe0620daed891ac { background-color:  !important }<\/style>\n    <p x-bind=\"title\" style=\"color: ; -webkit-text-stroke-color: \" class=\"relative z-10 uppercase font-strong\">Vision<\/p>\n    <div\n        style=\"background-image: url(https:\/\/staging.u-experten.de\/wp-content\/uploads\/2022\/06\/vision-smart-products-uexperten.webp)\"\n        class=\"relative w-[280px] ph:w-[226px] mx-auto overflow-hidden rounded-12 -translate-y-6 translate-x-6 bg-cover bg-center before:block before:pt-[105%]\"\n    >\n                    <div class=\"absolute inset-0 bg-blue opacity-75 mix-blend-hard-light\"><\/div>\n            <\/div>\n\n    <div x-ref=\"innerBlocks\" class=\"prose tracking-wide\">\n        \n\n<p><strong>01<\/strong><\/p>\n\n\n\n<p>Design thinking methods tailored to smart connected devices lead to a clear structure and a memorable visualization of ideas, use cases and value propositions.<\/p>\n\n\n    <\/div>\n<\/div>\n\n<div\n    data-block-name=\"story-card\"\n    x-data=\"storyCard\"\n    x-argh:style=\"''\"\n    x-intersect:enter.threshold.30=\"$dispatch('intersectenter', $el.dataset.title)\"\n    x-intersect:leave.threshold.30=\"$dispatch('intersectleave', $el.dataset.title)\"\n    data-title=\"Journey\"\n    x-cloak\n    class=\"block_1473ad08c5d4203eee5a72b18607dbca shrink-0 max-w-[533px] tp:max-w-[430px] h-auto ph:max-w-full p-12 ph:p-6 pb-20 ph:pt-8 ph:pb-10 overflow-hidden bg-purple rounded-12 ph:rounded shadow-story-card text-turqouise\"\n>\n    <style>.block_1473ad08c5d4203eee5a72b18607dbca { background-color:  !important }<\/style>\n    <p x-bind=\"title\" style=\"color: ; -webkit-text-stroke-color: \" class=\"relative z-10 uppercase font-strong\">Journey<\/p>\n    <div\n        style=\"background-image: url(https:\/\/staging.u-experten.de\/wp-content\/uploads\/2022\/05\/journey-smart-products-uexperten.webp)\"\n        class=\"relative w-[280px] ph:w-[226px] mx-auto overflow-hidden rounded-12 -translate-y-6 translate-x-6 bg-cover bg-center before:block before:pt-[105%]\"\n    >\n                    <div class=\"absolute inset-0 bg-blue opacity-75 mix-blend-hard-light\"><\/div>\n            <\/div>\n\n    <div x-ref=\"innerBlocks\" class=\"prose tracking-wide\">\n        \n\n<p><strong>02<\/strong><\/p>\n\n\n\n<p>The assignment of user stories to key features creates clarity and unambiguous requirements for devices (e.g. for sensors and interfaces), cloud and connectivity.<\/p>\n\n\n    <\/div>\n<\/div>\n\n<div\n    data-block-name=\"story-card\"\n    x-data=\"storyCard\"\n    x-argh:style=\"''\"\n    x-intersect:enter.threshold.30=\"$dispatch('intersectenter', $el.dataset.title)\"\n    x-intersect:leave.threshold.30=\"$dispatch('intersectleave', $el.dataset.title)\"\n    data-title=\"Concept\"\n    x-cloak\n    class=\"block_65515b32f4dc7a83498260650a7c5a07 shrink-0 max-w-[533px] tp:max-w-[430px] h-auto ph:max-w-full p-12 ph:p-6 pb-20 ph:pt-8 ph:pb-10 overflow-hidden bg-purple rounded-12 ph:rounded shadow-story-card text-turqouise\"\n>\n    <style>.block_65515b32f4dc7a83498260650a7c5a07 { background-color:  !important }<\/style>\n    <p x-bind=\"title\" style=\"color: ; -webkit-text-stroke-color: \" class=\"relative z-10 uppercase font-strong\">Concept<\/p>\n    <div\n        style=\"background-image: url(https:\/\/staging.u-experten.de\/wp-content\/uploads\/2022\/06\/konzept-smart-products-uexperten.webp)\"\n        class=\"relative w-[280px] ph:w-[226px] mx-auto overflow-hidden rounded-12 -translate-y-6 translate-x-6 bg-cover bg-center before:block before:pt-[105%]\"\n    >\n                    <div class=\"absolute inset-0 bg-blue opacity-75 mix-blend-hard-light\"><\/div>\n            <\/div>\n\n    <div x-ref=\"innerBlocks\" class=\"prose tracking-wide\">\n        \n\n<p><strong>03<\/strong><\/p>\n\n\n\n<p>From user-friendliness to system architecture to pricing, all the essential ingredients for the success of a product must be checked and made tangible.<\/p>\n\n\n    <\/div>\n<\/div>\n\n<div\n    data-block-name=\"story-card\"\n    x-data=\"storyCard\"\n    x-argh:style=\"''\"\n    x-intersect:enter.threshold.30=\"$dispatch('intersectenter', $el.dataset.title)\"\n    x-intersect:leave.threshold.30=\"$dispatch('intersectleave', $el.dataset.title)\"\n    data-title=\"Product\"\n    x-cloak\n    class=\"block_3219669d9f90e2865a74e9161a60e609 shrink-0 max-w-[533px] tp:max-w-[430px] h-auto ph:max-w-full p-12 ph:p-6 pb-20 ph:pt-8 ph:pb-10 overflow-hidden bg-purple rounded-12 ph:rounded shadow-story-card text-turqouise\"\n>\n    <style>.block_3219669d9f90e2865a74e9161a60e609 { background-color:  !important }<\/style>\n    <p x-bind=\"title\" style=\"color: ; -webkit-text-stroke-color: \" class=\"relative z-10 uppercase font-strong\">Product<\/p>\n    <div\n        style=\"background-image: url(https:\/\/staging.u-experten.de\/wp-content\/uploads\/2022\/05\/product-smart-products-uexperten.webp)\"\n        class=\"relative w-[280px] ph:w-[226px] mx-auto overflow-hidden rounded-12 -translate-y-6 translate-x-6 bg-cover bg-center before:block before:pt-[105%]\"\n    >\n                    <div class=\"absolute inset-0 bg-blue opacity-75 mix-blend-hard-light\"><\/div>\n            <\/div>\n\n    <div x-ref=\"innerBlocks\" class=\"prose tracking-wide\">\n        \n\n<p><strong>04<\/strong><\/p>\n\n\n\n<p>A &#8220;Minimum Viable Product&#8221; (MVP) is the first release of a product or service with just enough features to delight early customers and adopters.<\/p>\n\n\n    <\/div>\n<\/div>\n\n        <\/div>\n    <\/div>\n<\/div>\n\n        <\/div>\n    <\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"acf":[],"_links":{"self":[{"href":"https:\/\/staging.u-experten.de\/en\/wp-json\/wp\/v2\/pages\/1369"}],"collection":[{"href":"https:\/\/staging.u-experten.de\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/staging.u-experten.de\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/staging.u-experten.de\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/staging.u-experten.de\/en\/wp-json\/wp\/v2\/comments?post=1369"}],"version-history":[{"count":24,"href":"https:\/\/staging.u-experten.de\/en\/wp-json\/wp\/v2\/pages\/1369\/revisions"}],"predecessor-version":[{"id":3877,"href":"https:\/\/staging.u-experten.de\/en\/wp-json\/wp\/v2\/pages\/1369\/revisions\/3877"}],"wp:attachment":[{"href":"https:\/\/staging.u-experten.de\/en\/wp-json\/wp\/v2\/media?parent=1369"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}