{"id":35737,"date":"2025-08-06T11:59:07","date_gmt":"2025-08-06T11:59:07","guid":{"rendered":"https:\/\/emaze.ai\/?page_id=35737"},"modified":"2025-08-11T11:56:40","modified_gmt":"2025-08-11T11:56:40","slug":"test","status":"publish","type":"page","link":"https:\/\/emaze.ai\/fr\/test\/","title":{"rendered":"Test"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"35737\" class=\"elementor elementor-35737\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d5de0d3 elementor-hidden-mobile e-flex e-con-boxed e-con e-parent\" data-id=\"d5de0d3\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5bc0e51 elementor-pagination-type-bullets elementor-arrows-position-inside elementor-pagination-position-outside elementor-widget elementor-widget-n-carousel\" data-id=\"5bc0e51\" data-element_type=\"widget\" data-settings=\"{&quot;carousel_items&quot;:[{&quot;slide_title&quot;:&quot;Slide #1&quot;,&quot;_id&quot;:&quot;298f844&quot;},{&quot;slide_title&quot;:&quot;Slide #1&quot;,&quot;_id&quot;:&quot;d12f74a&quot;},{&quot;slide_title&quot;:&quot;Slide #1&quot;,&quot;_id&quot;:&quot;7b9633e&quot;},{&quot;slide_title&quot;:&quot;Slide #1&quot;,&quot;_id&quot;:&quot;9b2fa2a&quot;},{&quot;slide_title&quot;:&quot;Slide #1&quot;,&quot;_id&quot;:&quot;5439ad4&quot;}],&quot;slides_to_show&quot;:&quot;1&quot;,&quot;slides_to_show_tablet&quot;:&quot;2&quot;,&quot;slides_to_show_mobile&quot;:&quot;1&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;autoplay_speed&quot;:5000,&quot;pause_on_hover&quot;:&quot;yes&quot;,&quot;pause_on_interaction&quot;:&quot;yes&quot;,&quot;infinite&quot;:&quot;yes&quot;,&quot;speed&quot;:500,&quot;offset_sides&quot;:&quot;none&quot;,&quot;arrows&quot;:&quot;yes&quot;,&quot;pagination&quot;:&quot;bullets&quot;,&quot;image_spacing_custom&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:10,&quot;sizes&quot;:[]},&quot;image_spacing_custom_tablet_extra&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;image_spacing_custom_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;image_spacing_custom_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]}}\" data-widget_type=\"nested-carousel.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-n-carousel swiper\" role=\"region\" aria-roledescription=\"carousel\" aria-label=\"Carousel\" dir=\"ltr\">\n\t\t\t<div class=\"swiper-wrapper\" aria-live=\"off\">\n\t\t\t\t\t\t\t\t\t\t<div class=\"swiper-slide\" data-slide=\"1\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"1 van 5\">\n\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-76b2c7f e-flex e-con-boxed e-con e-child\" data-id=\"76b2c7f\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-9cde0f6 e-con-full e-flex e-con e-child\" data-id=\"9cde0f6\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-43f40f5 elementor-widget elementor-widget-html\" data-id=\"43f40f5\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- This HTML creates a responsive side-by-side mockup. -->\n<!-- It uses a wrapper div with Flexbox to ensure the mockups are centered vertically. -->\n<div class=\"mockup-outer-wrapper\">\n\n  <!-- Flexbox container for side-by-side layout -->\n  <div class=\"mockup-container-side-by-side\">\n\n    <!-- Desktop Mockup with the Emaze iframe -->\n    <div class=\"desktop-mockup-side-by-side\">\n      <div class=\"browser-window-side-by-side\">\n        <!-- Browser window header -->\n        <div class=\"browser-header\">\n          <div class=\"browser-buttons\">\n            <span class=\"dot red\"><\/span>\n            <span class=\"dot yellow\"><\/span>\n            <span class=\"dot green\"><\/span>\n          <\/div>\n        <\/div>\n        <!-- Browser content area with the iframe -->\n        <div class=\"browser-content-side-by-side\">\n          <iframe\n            src=\"https:\/\/app.emaze.com\/@ALFFTOZRF\/#\/Mercedes-Benz\"\n            style=\"width: 100%; height: 100%; border: none; border-radius: 0 0 10px 10px;\"\n            allowfullscreen\n            loading=\"lazy\"\n            title=\"Nespresso Quote Presentation\"\n          ><\/iframe>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- Mobile Mockup with the new image -->\n    <div class=\"mobile-mockup-side-by-side\">\n      <div class=\"phone-body\">\n        <div class=\"phone-screen\">\n          <!-- The 'src' attribute now uses your public image URL -->\n          <img decoding=\"async\"\n            src=\"https:\/\/userscontent2.emaze.com\/images\/780404fc-1a4f-40be-b14f-c0fbb53e93a3\/5206c75df2eddcd99a1e978a33eb4a8f.png\"\n            alt=\"Screenshot of a mobile presentation\"\n            style=\"width: 100%; height: 100%; object-fit: fill;\"\n          >\n        <\/div>\n      <\/div>\n    <\/div>\n\n  <\/div>\n\n<\/div>\n\n<style>\n\/* ------------------------------------------- *\/\n\/* Combined Mockup CSS - Side-by-Side Version *\/\n\/* ------------------------------------------- *\/\n\n\/* NEW: Outer wrapper for reliable vertical and horizontal centering *\/\n.mockup-outer-wrapper {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 100%;\n    min-height: 800px; \/* Provides a large enough container to show centering *\/\n}\n\n\/* Flexbox container for side-by-side layout *\/\n.mockup-container-side-by-side {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: 30px; \/* Space between the two mockups *\/\n    width: 100%;\n    max-width: 1200px; \/* Max width for the whole section *\/\n    \n    \/* Removed the absolute positioning to avoid conflicts *\/\n}\n\n\/* Desktop Mockup Styling *\/\n.desktop-mockup-side-by-side {\n    width: 60%;\n    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);\n    border-radius: 10px;\n    overflow: hidden;\n}\n\n.browser-window-side-by-side {\n    width: 100%;\n    height: 550px;\n    background: #e8e8e8;\n    border: 1px solid #e8e8e8;\n    border-radius: 10px;\n    display: flex;\n    flex-direction: column;\n}\n\n.browser-content-side-by-side {\n    flex-grow: 1;\n}\n\n\/* Mobile Mockup Styling *\/\n.mobile-mockup-side-by-side {\n    width: 25%;\n    min-width: 200px;\n    height: 550px; \/* Corrected to match desktop for alignment *\/\n\n}\n\n.phone-body {\n    width: 100%;\n    height: 100%;\n    background: #e8e8e8;\n    border-radius: 20px;\n    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);\n    padding: 3px;\n    position: relative;\n    border: 5px solid #e8e8e8;\n    box-sizing: content-box;\n}\n\n.phone-body::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 50%;\n    transform: translateX(-50%);\n    width: 100px;\n    height: 8px;\n    background: #e8e8e8;\n    border-bottom-left-radius: 20px;\n    border-bottom-right-radius: 20px;\n}\n\n.phone-screen {\n    width: 100%;\n    height: 100%;\n    background: #fff;\n    border-radius: 20px;\n    overflow: hidden;\n}\n\n\/* Common styling for header\/buttons *\/\n.browser-header {\n    background: #e8e8e8;\n    padding: 10px;\n    border-bottom: 1px solid #ddd;\n}\n.browser-buttons {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n}\n.dot {\n    width: 12px;\n    height: 12px;\n    border-radius: 10px;\n}\n.red { background: #ff5f56; }\n.yellow { background: #ffbd2e; }\n.green { background: #27c93f; }\n<\/style>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ba448ac e-con-full e-flex e-con e-child\" data-id=\"ba448ac\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d529a45 elementor-widget elementor-widget-text-editor\" data-id=\"d529a45\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Make insurance look and feel personal \u2014 not like paperwork<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"swiper-slide\" data-slide=\"2\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"2 van 5\">\n\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-9735b95 e-flex e-con-boxed e-con e-child\" data-id=\"9735b95\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-554fec5 e-con-full e-flex e-con e-child\" data-id=\"554fec5\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f5c63a6 elementor-widget elementor-widget-html\" data-id=\"f5c63a6\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- This HTML creates a responsive side-by-side mockup. -->\n<!-- It uses a wrapper div with Flexbox to ensure the mockups are centered vertically. -->\n<div class=\"mockup-outer-wrapper\">\n\n  <!-- Flexbox container for side-by-side layout -->\n  <div class=\"mockup-container-side-by-side\">\n\n    <!-- Desktop Mockup with the Emaze iframe -->\n    <div class=\"desktop-mockup-side-by-side\">\n      <div class=\"browser-window-side-by-side\">\n        <!-- Browser window header -->\n        <div class=\"browser-header\">\n          <div class=\"browser-buttons\">\n            <span class=\"dot red\"><\/span>\n            <span class=\"dot yellow\"><\/span>\n            <span class=\"dot green\"><\/span>\n          <\/div>\n        <\/div>\n        <!-- Browser content area with the iframe -->\n        <div class=\"browser-content-side-by-side\">\n          <iframe\n            src=\"https:\/\/app.emaze.com\/@ALFFCFWLR\/nespresso-quote#\/nespresso-quote\"\n            style=\"width: 100%; height: 100%; border: none; border-radius: 0 0 10px 10px;\"\n            allowfullscreen\n            loading=\"lazy\"\n            title=\"Nespresso Quote Presentation\"\n          ><\/iframe>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- Mobile Mockup with the new image -->\n    <div class=\"mobile-mockup-side-by-side\">\n      <div class=\"phone-body\">\n        <div class=\"phone-screen\">\n          <!-- The 'src' attribute now uses your public image URL -->\n          <img decoding=\"async\"\n            src=\"https:\/\/userscontent2.emaze.com\/images\/780404fc-1a4f-40be-b14f-c0fbb53e93a3\/1da8532a6a86cc8f533d9f1e83604756.png\"\n            alt=\"Screenshot of a mobile presentation\"\n            style=\"width: 100%; height: 100%; object-fit: fill;\"\n          >\n        <\/div>\n      <\/div>\n    <\/div>\n\n  <\/div>\n\n<\/div>\n\n<style>\n\/* ------------------------------------------- *\/\n\/* Combined Mockup CSS - Side-by-Side Version *\/\n\/* ------------------------------------------- *\/\n\n\/* NEW: Outer wrapper for reliable vertical and horizontal centering *\/\n.mockup-outer-wrapper {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 100%;\n    min-height: 800px; \/* Provides a large enough container to show centering *\/\n}\n\n\/* Flexbox container for side-by-side layout *\/\n.mockup-container-side-by-side {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: 30px; \/* Space between the two mockups *\/\n    width: 100%;\n    max-width: 1200px; \/* Max width for the whole section *\/\n    \n    \/* Removed the absolute positioning to avoid conflicts *\/\n}\n\n\/* Desktop Mockup Styling *\/\n.desktop-mockup-side-by-side {\n    width: 60%;\n    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);\n    border-radius: 10px;\n    overflow: hidden;\n}\n\n.browser-window-side-by-side {\n    width: 100%;\n    height: 550px;\n    background: #e8e8e8;\n    border: 1px solid #e8e8e8;\n    border-radius: 10px;\n    display: flex;\n    flex-direction: column;\n}\n\n.browser-content-side-by-side {\n    flex-grow: 1;\n}\n\n\/* Mobile Mockup Styling *\/\n.mobile-mockup-side-by-side {\n    width: 25%;\n    min-width: 200px;\n    height: 550px; \/* Corrected to match desktop for alignment *\/\n\n}\n\n.phone-body {\n    width: 100%;\n    height: 100%;\n    background: #e8e8e8;\n    border-radius: 20px;\n    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);\n    padding: 3px;\n    position: relative;\n    border: 5px solid #e8e8e8;\n    box-sizing: content-box;\n}\n\n.phone-body::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 50%;\n    transform: translateX(-50%);\n    width: 100px;\n    height: 8px;\n    background: #e8e8e8;\n    border-bottom-left-radius: 20px;\n    border-bottom-right-radius: 20px;\n}\n\n.phone-screen {\n    width: 100%;\n    height: 100%;\n    background: #fff;\n    border-radius: 20px;\n    overflow: hidden;\n}\n\n\/* Common styling for header\/buttons *\/\n.browser-header {\n    background: #e8e8e8;\n    padding: 10px;\n    border-bottom: 1px solid #ddd;\n}\n.browser-buttons {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n}\n.dot {\n    width: 12px;\n    height: 12px;\n    border-radius: 10px;\n}\n.red { background: #ff5f56; }\n.yellow { background: #ffbd2e; }\n.green { background: #27c93f; }\n<\/style>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e2cb708 e-con-full e-flex e-con e-child\" data-id=\"e2cb708\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4ec882b elementor-widget elementor-widget-text-editor\" data-id=\"4ec882b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Showcase your personalized offer with elegance and flavor \u2014 the Nespresso way.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"swiper-slide\" data-slide=\"3\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"3 van 5\">\n\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-38879e3 e-flex e-con-boxed e-con e-child\" data-id=\"38879e3\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-e5887b0 e-con-full e-flex e-con e-child\" data-id=\"e5887b0\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-46d54d3 elementor-widget elementor-widget-html\" data-id=\"46d54d3\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- This HTML creates a responsive side-by-side mockup. -->\n<!-- It uses a wrapper div with Flexbox to ensure the mockups are centered vertically. -->\n<div class=\"mockup-outer-wrapper\">\n\n  <!-- Flexbox container for side-by-side layout -->\n  <div class=\"mockup-container-side-by-side\">\n\n    <!-- Desktop Mockup with the Emaze iframe -->\n    <div class=\"desktop-mockup-side-by-side\">\n      <div class=\"browser-window-side-by-side\">\n        <!-- Browser window header -->\n        <div class=\"browser-header\">\n          <div class=\"browser-buttons\">\n            <span class=\"dot red\"><\/span>\n            <span class=\"dot yellow\"><\/span>\n            <span class=\"dot green\"><\/span>\n          <\/div>\n        <\/div>\n        <!-- Browser content area with the iframe -->\n        <div class=\"browser-content-side-by-side\">\n          <iframe\n            src=\"https:\/\/app.emaze.com\/@alfftocwo\/lauren-mitchell--thank-you-for-your-interest---audi-sq8-sportback-e-tron?tgjs=0#\/Audi\"\n            style=\"width: 100%; height: 100%; border: none; border-radius: 0 0 10px 10px;\"\n            allowfullscreen\n            loading=\"lazy\"\n            title=\"Nespresso Quote Presentation\"\n          ><\/iframe>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- Mobile Mockup with the new image -->\n    <div class=\"mobile-mockup-side-by-side\">\n      <div class=\"phone-body\">\n        <div class=\"phone-screen\">\n          <!-- The 'src' attribute now uses your public image URL -->\n          <img decoding=\"async\"\n            src=\"https:\/\/userscontent2.emaze.com\/images\/780404fc-1a4f-40be-b14f-c0fbb53e93a3\/ccf1a0275db6f2e55ca529753ff32eb8.png\"\n            alt=\"Screenshot of a mobile presentation\"\n            style=\"width: 100%; height: 100%; object-fit: fill;\"\n          >\n        <\/div>\n      <\/div>\n    <\/div>\n\n  <\/div>\n\n<\/div>\n\n<style>\n\/* ------------------------------------------- *\/\n\/* Combined Mockup CSS - Side-by-Side Version *\/\n\/* ------------------------------------------- *\/\n\n\/* NEW: Outer wrapper for reliable vertical and horizontal centering *\/\n.mockup-outer-wrapper {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 100%;\n    min-height: 800px; \/* Provides a large enough container to show centering *\/\n}\n\n\/* Flexbox container for side-by-side layout *\/\n.mockup-container-side-by-side {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: 30px; \/* Space between the two mockups *\/\n    width: 100%;\n    max-width: 1200px; \/* Max width for the whole section *\/\n    \n    \/* Removed the absolute positioning to avoid conflicts *\/\n}\n\n\/* Desktop Mockup Styling *\/\n.desktop-mockup-side-by-side {\n    width: 60%;\n    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);\n    border-radius: 10px;\n    overflow: hidden;\n}\n\n.browser-window-side-by-side {\n    width: 100%;\n    height: 550px;\n    background: #e8e8e8;\n    border: 1px solid #e8e8e8;\n    border-radius: 10px;\n    display: flex;\n    flex-direction: column;\n}\n\n.browser-content-side-by-side {\n    flex-grow: 1;\n}\n\n\/* Mobile Mockup Styling *\/\n.mobile-mockup-side-by-side {\n    width: 25%;\n    min-width: 200px;\n    height: 550px; \/* Corrected to match desktop for alignment *\/\n\n}\n\n.phone-body {\n    width: 100%;\n    height: 100%;\n    background: #e8e8e8;\n    border-radius: 20px;\n    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);\n    padding: 3px;\n    position: relative;\n    border: 5px solid #e8e8e8;\n    box-sizing: content-box;\n}\n\n.phone-body::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 50%;\n    transform: translateX(-50%);\n    width: 100px;\n    height: 8px;\n    background: #e8e8e8;\n    border-bottom-left-radius: 20px;\n    border-bottom-right-radius: 20px;\n}\n\n.phone-screen {\n    width: 100%;\n    height: 100%;\n    background: #fff;\n    border-radius: 20px;\n    overflow: hidden;\n}\n\n\/* Common styling for header\/buttons *\/\n.browser-header {\n    background: #e8e8e8;\n    padding: 10px;\n    border-bottom: 1px solid #ddd;\n}\n.browser-buttons {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n}\n.dot {\n    width: 12px;\n    height: 12px;\n    border-radius: 10px;\n}\n.red { background: #ff5f56; }\n.yellow { background: #ffbd2e; }\n.green { background: #27c93f; }\n<\/style>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0a36c15 e-con-full e-flex e-con e-child\" data-id=\"0a36c15\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a6a417d elementor-widget elementor-widget-text-editor\" data-id=\"a6a417d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>If your cars turn heads, your follow-up should too<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"swiper-slide\" data-slide=\"4\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"4 van 5\">\n\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-985bda8 e-flex e-con-boxed e-con e-child\" data-id=\"985bda8\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-f33a8c5 e-con-full e-flex e-con e-child\" data-id=\"f33a8c5\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-31e40ab elementor-widget elementor-widget-html\" data-id=\"31e40ab\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- This HTML creates a responsive side-by-side mockup. -->\n<!-- It uses a wrapper div with Flexbox to ensure the mockups are centered vertically. -->\n<div class=\"mockup-outer-wrapper\">\n\n  <!-- Flexbox container for side-by-side layout -->\n  <div class=\"mockup-container-side-by-side\">\n\n    <!-- Desktop Mockup with the Emaze iframe -->\n    <div class=\"desktop-mockup-side-by-side\">\n      <div class=\"browser-window-side-by-side\">\n        <!-- Browser window header -->\n        <div class=\"browser-header\">\n          <div class=\"browser-buttons\">\n            <span class=\"dot red\"><\/span>\n            <span class=\"dot yellow\"><\/span>\n            <span class=\"dot green\"><\/span>\n          <\/div>\n        <\/div>\n        <!-- Browser content area with the iframe -->\n        <div class=\"browser-content-side-by-side\">\n          <iframe\n            src=\"https:\/\/app.emaze.com\/@ALFFZRTTQ\/colmobile-energy#\/price%20quote\"\n            style=\"width: 100%; height: 100%; border: none; border-radius: 0 0 10px 10px;\"\n            allowfullscreen\n            loading=\"lazy\"\n            title=\"Nespresso Quote Presentation\"\n          ><\/iframe>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- Mobile Mockup with the new image -->\n    <div class=\"mobile-mockup-side-by-side\">\n      <div class=\"phone-body\">\n        <div class=\"phone-screen\">\n          <!-- The 'src' attribute now uses your public image URL -->\n          <img decoding=\"async\"\n            src=\"https:\/\/userscontent2.emaze.com\/images\/780404fc-1a4f-40be-b14f-c0fbb53e93a3\/808a4826d8895e2f39108d0c7802f3d5.png\"\n            alt=\"Screenshot of a mobile presentation\"\n            style=\"width: 100%; height: 100%; object-fit: fill;\"\n          >\n        <\/div>\n      <\/div>\n    <\/div>\n\n  <\/div>\n\n<\/div>\n\n<style>\n\/* ------------------------------------------- *\/\n\/* Combined Mockup CSS - Side-by-Side Version *\/\n\/* ------------------------------------------- *\/\n\n\/* NEW: Outer wrapper for reliable vertical and horizontal centering *\/\n.mockup-outer-wrapper {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 100%;\n    min-height: 800px; \/* Provides a large enough container to show centering *\/\n}\n\n\/* Flexbox container for side-by-side layout *\/\n.mockup-container-side-by-side {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: 30px; \/* Space between the two mockups *\/\n    width: 100%;\n    max-width: 1200px; \/* Max width for the whole section *\/\n    \n    \/* Removed the absolute positioning to avoid conflicts *\/\n}\n\n\/* Desktop Mockup Styling *\/\n.desktop-mockup-side-by-side {\n    width: 60%;\n    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);\n    border-radius: 10px;\n    overflow: hidden;\n}\n\n.browser-window-side-by-side {\n    width: 100%;\n    height: 550px;\n    background: #e8e8e8;\n    border: 1px solid #e8e8e8;\n    border-radius: 10px;\n    display: flex;\n    flex-direction: column;\n}\n\n.browser-content-side-by-side {\n    flex-grow: 1;\n}\n\n\/* Mobile Mockup Styling *\/\n.mobile-mockup-side-by-side {\n    width: 25%;\n    min-width: 200px;\n    height: 550px; \/* Corrected to match desktop for alignment *\/\n\n}\n\n.phone-body {\n    width: 100%;\n    height: 100%;\n    background: #e8e8e8;\n    border-radius: 20px;\n    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);\n    padding: 3px;\n    position: relative;\n    border: 5px solid #e8e8e8;\n    box-sizing: content-box;\n}\n\n.phone-body::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 50%;\n    transform: translateX(-50%);\n    width: 100px;\n    height: 8px;\n    background: #e8e8e8;\n    border-bottom-left-radius: 20px;\n    border-bottom-right-radius: 20px;\n}\n\n.phone-screen {\n    width: 100%;\n    height: 100%;\n    background: #fff;\n    border-radius: 20px;\n    overflow: hidden;\n}\n\n\/* Common styling for header\/buttons *\/\n.browser-header {\n    background: #e8e8e8;\n    padding: 10px;\n    border-bottom: 1px solid #ddd;\n}\n.browser-buttons {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n}\n.dot {\n    width: 12px;\n    height: 12px;\n    border-radius: 10px;\n}\n.red { background: #ff5f56; }\n.yellow { background: #ffbd2e; }\n.green { background: #27c93f; }\n<\/style>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-842c748 e-con-full e-flex e-con e-child\" data-id=\"842c748\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-48e5aff elementor-widget elementor-widget-text-editor\" data-id=\"48e5aff\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Turn an energy quote into a moment that builds trust and drives action<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"swiper-slide\" data-slide=\"5\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"5 van 5\">\n\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-b7538ef e-flex e-con-boxed e-con e-child\" data-id=\"b7538ef\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-bbc2c92 e-con-full e-flex e-con e-child\" data-id=\"bbc2c92\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9c85e32 elementor-widget elementor-widget-html\" data-id=\"9c85e32\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- This HTML creates a responsive side-by-side mockup. -->\n<!-- It uses a wrapper div with Flexbox to ensure the mockups are centered vertically. -->\n<div class=\"mockup-outer-wrapper\">\n\n  <!-- Flexbox container for side-by-side layout -->\n  <div class=\"mockup-container-side-by-side\">\n\n    <!-- Desktop Mockup with the Emaze iframe -->\n    <div class=\"desktop-mockup-side-by-side\">\n      <div class=\"browser-window-side-by-side\">\n        <!-- Browser window header -->\n        <div class=\"browser-header\">\n          <div class=\"browser-buttons\">\n            <span class=\"dot red\"><\/span>\n            <span class=\"dot yellow\"><\/span>\n            <span class=\"dot green\"><\/span>\n          <\/div>\n        <\/div>\n        <!-- Browser content area with the iframe -->\n        <div class=\"browser-content-side-by-side\">\n          <iframe\n            src=\"https:\/\/app.emaze.com\/mobile\/@ALFFTOTZR#\/BMW\"\n            style=\"width: 100%; height: 100%; border: none; border-radius: 0 0 10px 10px;\"\n            allowfullscreen\n            loading=\"lazy\"\n            title=\"Nespresso Quote Presentation\"\n          ><\/iframe>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- Mobile Mockup with the new image -->\n    <div class=\"mobile-mockup-side-by-side\">\n      <div class=\"phone-body\">\n        <div class=\"phone-screen\">\n          <!-- The 'src' attribute now uses your public image URL -->\n          <img decoding=\"async\"\n            src=\"https:\/\/userscontent2.emaze.com\/images\/780404fc-1a4f-40be-b14f-c0fbb53e93a3\/c8e5c78af9aad6e807530d5d5ea3f11a.png\"\n            alt=\"Screenshot of a mobile presentation\"\n            style=\"width: 100%; height: 100%; object-fit: fill;\"\n          >\n        <\/div>\n      <\/div>\n    <\/div>\n\n  <\/div>\n\n<\/div>\n\n<style>\n\/* ------------------------------------------- *\/\n\/* Combined Mockup CSS - Side-by-Side Version *\/\n\/* ------------------------------------------- *\/\n\n\/* NEW: Outer wrapper for reliable vertical and horizontal centering *\/\n.mockup-outer-wrapper {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 100%;\n    min-height: 800px; \/* Provides a large enough container to show centering *\/\n}\n\n\/* Flexbox container for side-by-side layout *\/\n.mockup-container-side-by-side {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: 30px; \/* Space between the two mockups *\/\n    width: 100%;\n    max-width: 1200px; \/* Max width for the whole section *\/\n    \n    \/* Removed the absolute positioning to avoid conflicts *\/\n}\n\n\/* Desktop Mockup Styling *\/\n.desktop-mockup-side-by-side {\n    width: 60%;\n    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);\n    border-radius: 10px;\n    overflow: hidden;\n}\n\n.browser-window-side-by-side {\n    width: 100%;\n    height: 550px;\n    background: #e8e8e8;\n    border: 1px solid #e8e8e8;\n    border-radius: 10px;\n    display: flex;\n    flex-direction: column;\n}\n\n.browser-content-side-by-side {\n    flex-grow: 1;\n}\n\n\/* Mobile Mockup Styling *\/\n.mobile-mockup-side-by-side {\n    width: 25%;\n    min-width: 200px;\n    height: 550px; \/* Corrected to match desktop for alignment *\/\n\n}\n\n.phone-body {\n    width: 100%;\n    height: 100%;\n    background: #e8e8e8;\n    border-radius: 20px;\n    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);\n    padding: 3px;\n    position: relative;\n    border: 5px solid #e8e8e8;\n    box-sizing: content-box;\n}\n\n.phone-body::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 50%;\n    transform: translateX(-50%);\n    width: 100px;\n    height: 8px;\n    background: #e8e8e8;\n    border-bottom-left-radius: 20px;\n    border-bottom-right-radius: 20px;\n}\n\n.phone-screen {\n    width: 100%;\n    height: 100%;\n    background: #fff;\n    border-radius: 20px;\n    overflow: hidden;\n}\n\n\/* Common styling for header\/buttons *\/\n.browser-header {\n    background: #e8e8e8;\n    padding: 10px;\n    border-bottom: 1px solid #ddd;\n}\n.browser-buttons {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n}\n.dot {\n    width: 12px;\n    height: 12px;\n    border-radius: 10px;\n}\n.red { background: #ff5f56; }\n.yellow { background: #ffbd2e; }\n.green { background: #27c93f; }\n<\/style>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e8f7719 e-con-full e-flex e-con e-child\" data-id=\"e8f7719\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f21b430 elementor-widget elementor-widget-text-editor\" data-id=\"f21b430\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Bold cars deserve bold offers. Show it off with visuals that match<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"elementor-swiper-button elementor-swiper-button-prev\" role=\"button\" tabindex=\"0\" aria-label=\"Vorige\">\n\t\t\t\t<i aria-hidden=\"true\" class=\"eicon-chevron-left\"><\/i>\t\t\t<\/div>\n\t\t\t<div class=\"elementor-swiper-button elementor-swiper-button-next\" role=\"button\" tabindex=\"0\" aria-label=\"Volgende\">\n\t\t\t\t<i aria-hidden=\"true\" class=\"eicon-chevron-right\"><\/i>\t\t\t<\/div>\n\t\t\t\t\t<div class=\"swiper-pagination\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-dea891d elementor-hidden-desktop elementor-hidden-tablet_extra elementor-hidden-tablet e-flex e-con-boxed e-con e-parent\" data-id=\"dea891d\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3b9fa9d elementor-pagination-type-bullets elementor-arrows-position-inside elementor-pagination-position-outside elementor-widget elementor-widget-n-carousel\" data-id=\"3b9fa9d\" data-element_type=\"widget\" data-settings=\"{&quot;carousel_items&quot;:[{&quot;slide_title&quot;:&quot;Slide #1&quot;,&quot;_id&quot;:&quot;298f844&quot;},{&quot;slide_title&quot;:&quot;Slide #1&quot;,&quot;_id&quot;:&quot;4a53dcc&quot;},{&quot;slide_title&quot;:&quot;Slide #1&quot;,&quot;_id&quot;:&quot;7b9633e&quot;},{&quot;slide_title&quot;:&quot;Slide #1&quot;,&quot;_id&quot;:&quot;9b2fa2a&quot;},{&quot;slide_title&quot;:&quot;Slide #1&quot;,&quot;_id&quot;:&quot;5439ad4&quot;}],&quot;slides_to_show&quot;:&quot;1&quot;,&quot;slides_to_show_tablet&quot;:&quot;2&quot;,&quot;slides_to_show_mobile&quot;:&quot;1&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;autoplay_speed&quot;:5000,&quot;pause_on_hover&quot;:&quot;yes&quot;,&quot;pause_on_interaction&quot;:&quot;yes&quot;,&quot;infinite&quot;:&quot;yes&quot;,&quot;speed&quot;:500,&quot;offset_sides&quot;:&quot;none&quot;,&quot;arrows&quot;:&quot;yes&quot;,&quot;pagination&quot;:&quot;bullets&quot;,&quot;image_spacing_custom&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:10,&quot;sizes&quot;:[]},&quot;image_spacing_custom_tablet_extra&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;image_spacing_custom_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;image_spacing_custom_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]}}\" data-widget_type=\"nested-carousel.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-n-carousel swiper\" role=\"region\" aria-roledescription=\"carousel\" aria-label=\"Carousel\" dir=\"ltr\">\n\t\t\t<div class=\"swiper-wrapper\" aria-live=\"off\">\n\t\t\t\t\t\t\t\t\t\t<div class=\"swiper-slide\" data-slide=\"1\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"1 van 5\">\n\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-389b9db e-flex e-con-boxed e-con e-child\" data-id=\"389b9db\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-860be90 e-con-full e-flex e-con e-child\" data-id=\"860be90\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3b7b2b0 elementor-widget elementor-widget-html\" data-id=\"3b7b2b0\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- This HTML creates a responsive mobile phone mockup with a full-screen iframe inside. -->\n<div class=\"mobile-mockup-container\">\n  <div class=\"phone-body\">\n    <div class=\"phone-screen\">\n      <!-- The iframe with your provided URL -->\n      <iframe\n        src=\"https:\/\/app.emaze.com\/mobile\/@ALFFTOTZR#\/BMW\"\n        style=\"width: 100%; height: 500px; border: none;\"\n        allowfullscreen\n        loading=\"lazy\"\n        title=\"Emaze Porsche Presentation\"\n      ><\/iframe>\n    <\/div>\n  <\/div>\n<\/div>\n\n<style>\n\/* ------------------------------------------- *\/\n\/* CSS for the Mobile Mockup *\/\n\/* ------------------------------------------- *\/\n\n.mobile-mockup-container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 40px 0;\n  width: 80%;\n}\n\n.phone-body {\n  width: 300px; \/* Standard mobile width *\/\n  height: 550px; \/* Standard mobile height *\/\n  background: #222;\n  border-radius: 40px;\n  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);\n  padding: 10px;\n  position: relative;\n  border: 5px solid #111;\n  box-sizing: content-box;\n}\n\n.phone-body::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 100px; \/* Reduced from 120px *\/\n  height: 8px;\n  background: #333;\n  border-bottom-left-radius: 8px;\n  border-bottom-right-radius: 8px;\n}\n\n.phone-screen {\n  width: 100%;\n  height: 100%;\n  background: #fff;\n  border-radius: 25px;\n  overflow: hidden;\n}\n\n.phone-screen iframe {\n  width: 100%;\n  height: 100%;\n  border: none;\n}\n<\/style>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a25d883 e-con-full e-flex e-con e-child\" data-id=\"a25d883\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3d66a94 elementor-widget elementor-widget-text-editor\" data-id=\"3d66a94\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Bold cars deserve bold offers. Show it off with visuals that match<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"swiper-slide\" data-slide=\"2\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"2 van 5\">\n\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-0d9ba7e e-flex e-con-boxed e-con e-child\" data-id=\"0d9ba7e\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-e35e24b e-con-full e-flex e-con e-child\" data-id=\"e35e24b\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-788b692 elementor-widget elementor-widget-html\" data-id=\"788b692\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- This HTML creates a responsive mobile phone mockup with a full-screen iframe inside. -->\n<div class=\"mobile-mockup-container\">\n  <div class=\"phone-body\">\n    <div class=\"phone-screen\">\n      <!-- The iframe with your provided URL -->\n      <iframe\n        src=\"https:\/\/app.emaze.com\/mobile\/@ALFFCFWLR\/nespresso-quote#\/nespresso-quote\"\n        style=\"width: 100%; height: 500px; border: none;\"\n        allowfullscreen\n        loading=\"lazy\"\n        title=\"Emaze Porsche Presentation\"\n      ><\/iframe>\n    <\/div>\n  <\/div>\n<\/div>\n\n<style>\n\/* ------------------------------------------- *\/\n\/* CSS for the Mobile Mockup *\/\n\/* ------------------------------------------- *\/\n\n.mobile-mockup-container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 40px 0;\n  width: 80%;\n}\n\n.phone-body {\n  width: 300px; \/* Standard mobile width *\/\n  height: 550px; \/* Standard mobile height *\/\n  background: #222;\n  border-radius: 40px;\n  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);\n  padding: 10px;\n  position: relative;\n  border: 5px solid #111;\n  box-sizing: content-box;\n}\n\n.phone-body::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 100px; \/* Reduced from 120px *\/\n  height: 8px;\n  background: #333;\n  border-bottom-left-radius: 8px;\n  border-bottom-right-radius: 8px;\n}\n\n.phone-screen {\n  width: 100%;\n  height: 100%;\n  background: #fff;\n  border-radius: 25px;\n  overflow: hidden;\n}\n\n.phone-screen iframe {\n  width: 100%;\n  height: 100%;\n  border: none;\n}\n<\/style>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-77de79d e-con-full e-flex e-con e-child\" data-id=\"77de79d\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-07c8ac1 elementor-widget elementor-widget-text-editor\" data-id=\"07c8ac1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Showcase your personalized offer with elegance and flavor \u2014 the Nespresso way.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"swiper-slide\" data-slide=\"3\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"3 van 5\">\n\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-7ab6a30 e-flex e-con-boxed e-con e-child\" data-id=\"7ab6a30\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-8751a6f e-con-full e-flex e-con e-child\" data-id=\"8751a6f\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cfe76c6 elementor-widget elementor-widget-html\" data-id=\"cfe76c6\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- This HTML creates a responsive mobile phone mockup with a full-screen iframe inside. -->\n<div class=\"mobile-mockup-container\">\n  <div class=\"phone-body\">\n    <div class=\"phone-screen\">\n      <!-- The iframe with your provided URL -->\n      <iframe\n        src=\"https:\/\/app.emaze.com\/mobile\/@ALFFTOCQI#\/Porsche\"\n        style=\"width: 100%; height: 100%; border: none;\"\n        allowfullscreen\n        loading=\"lazy\"\n        title=\"Emaze Porsche Presentation\"\n      ><\/iframe>\n    <\/div>\n  <\/div>\n<\/div>\n\n<style>\n\/* ------------------------------------------- *\/\n\/* CSS for the Mobile Mockup *\/\n\/* ------------------------------------------- *\/\n\n.mobile-mockup-container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 40px 0;\n  width: 100%;\n}\n\n.phone-body {\n  width: 300px; \/* Standard mobile width *\/\n  height: 550px; \/* Standard mobile height *\/\n  background: #222;\n  border-radius: 40px;\n  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);\n  padding: 10px; \/* Reduced from 15px *\/\n  position: relative;\n  border: 5px solid #111;\n  box-sizing: content-box;\n}\n\n.phone-body::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 100px; \/* Reduced from 120px *\/\n  height: 8px;\n  background: #333;\n  border-bottom-left-radius: 8px;\n  border-bottom-right-radius: 8px;\n}\n\n.phone-screen {\n  width: 100%;\n  height: 100%;\n  background: #fff;\n  border-radius: 25px;\n  overflow: hidden;\n}\n\n.phone-screen iframe {\n  width: 100%;\n  height: 100%;\n  border: none;\n}\n<\/style>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-815ed59 e-con-full e-flex e-con e-child\" data-id=\"815ed59\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2f644ac elementor-widget elementor-widget-text-editor\" data-id=\"2f644ac\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Turn an energy quote into a moment that builds trust and drives action.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"swiper-slide\" data-slide=\"4\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"4 van 5\">\n\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-6cfdbf8 e-flex e-con-boxed e-con e-child\" data-id=\"6cfdbf8\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-0ae8a49 e-con-full e-flex e-con e-child\" data-id=\"0ae8a49\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-28f27c9 elementor-widget elementor-widget-html\" data-id=\"28f27c9\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- This HTML creates a responsive side-by-side mockup. -->\n<!-- It uses a wrapper div with Flexbox to ensure the mockups are centered vertically. -->\n<div class=\"mockup-outer-wrapper\">\n\n  <!-- Flexbox container for side-by-side layout -->\n  <div class=\"mockup-container-side-by-side\">\n\n    <!-- Desktop Mockup with the Emaze iframe -->\n    <div class=\"desktop-mockup-side-by-side\">\n      <div class=\"browser-window-side-by-side\">\n        <!-- Browser window header -->\n        <div class=\"browser-header\">\n          <div class=\"browser-buttons\">\n            <span class=\"dot red\"><\/span>\n            <span class=\"dot yellow\"><\/span>\n            <span class=\"dot green\"><\/span>\n          <\/div>\n        <\/div>\n        <!-- Browser content area with the iframe -->\n        <div class=\"browser-content-side-by-side\">\n          <iframe\n            src=\"https:\/\/app.emaze.com\/@ALFFZRTTQ\/colmobile-energy#\/price%20quote\"\n            style=\"width: 100%; height: 100%; border: none; border-radius: 0 0 10px 10px;\"\n            allowfullscreen\n            loading=\"lazy\"\n            title=\"Nespresso Quote Presentation\"\n          ><\/iframe>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- Mobile Mockup with the new image -->\n    <div class=\"mobile-mockup-side-by-side\">\n      <div class=\"phone-body\">\n        <div class=\"phone-screen\">\n          <!-- The 'src' attribute now uses your public image URL -->\n          <img decoding=\"async\"\n            src=\"https:\/\/userscontent2.emaze.com\/images\/780404fc-1a4f-40be-b14f-c0fbb53e93a3\/808a4826d8895e2f39108d0c7802f3d5.png\"\n            alt=\"Screenshot of a mobile presentation\"\n            style=\"width: 100%; height: 100%; object-fit: fill;\"\n          >\n        <\/div>\n      <\/div>\n    <\/div>\n\n  <\/div>\n\n<\/div>\n\n<style>\n\/* ------------------------------------------- *\/\n\/* Combined Mockup CSS - Side-by-Side Version *\/\n\/* ------------------------------------------- *\/\n\n\/* NEW: Outer wrapper for reliable vertical and horizontal centering *\/\n.mockup-outer-wrapper {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 100%;\n    min-height: 800px; \/* Provides a large enough container to show centering *\/\n}\n\n\/* Flexbox container for side-by-side layout *\/\n.mockup-container-side-by-side {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: 30px; \/* Space between the two mockups *\/\n    width: 100%;\n    max-width: 1200px; \/* Max width for the whole section *\/\n    \n    \/* Removed the absolute positioning to avoid conflicts *\/\n}\n\n\/* Desktop Mockup Styling *\/\n.desktop-mockup-side-by-side {\n    width: 60%;\n    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);\n    border-radius: 10px;\n    overflow: hidden;\n}\n\n.browser-window-side-by-side {\n    width: 100%;\n    height: 550px;\n    background: #e8e8e8;\n    border: 1px solid #e8e8e8;\n    border-radius: 10px;\n    display: flex;\n    flex-direction: column;\n}\n\n.browser-content-side-by-side {\n    flex-grow: 1;\n}\n\n\/* Mobile Mockup Styling *\/\n.mobile-mockup-side-by-side {\n    width: 25%;\n    min-width: 200px;\n    height: 550px; \/* Corrected to match desktop for alignment *\/\n\n}\n\n.phone-body {\n    width: 100%;\n    height: 100%;\n    background: #e8e8e8;\n    border-radius: 20px;\n    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);\n    padding: 3px;\n    position: relative;\n    border: 5px solid #e8e8e8;\n    box-sizing: content-box;\n}\n\n.phone-body::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 50%;\n    transform: translateX(-50%);\n    width: 100px;\n    height: 8px;\n    background: #e8e8e8;\n    border-bottom-left-radius: 20px;\n    border-bottom-right-radius: 20px;\n}\n\n.phone-screen {\n    width: 100%;\n    height: 100%;\n    background: #fff;\n    border-radius: 20px;\n    overflow: hidden;\n}\n\n\/* Common styling for header\/buttons *\/\n.browser-header {\n    background: #e8e8e8;\n    padding: 10px;\n    border-bottom: 1px solid #ddd;\n}\n.browser-buttons {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n}\n.dot {\n    width: 12px;\n    height: 12px;\n    border-radius: 10px;\n}\n.red { background: #ff5f56; }\n.yellow { background: #ffbd2e; }\n.green { background: #27c93f; }\n<\/style>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-21b1600 e-con-full e-flex e-con e-child\" data-id=\"21b1600\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b96a056 elementor-widget elementor-widget-text-editor\" data-id=\"b96a056\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Turn an energy quote into a moment that builds trust and drives action<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"swiper-slide\" data-slide=\"5\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"5 van 5\">\n\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-ebd094e e-flex e-con-boxed e-con e-child\" data-id=\"ebd094e\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-1974329 e-con-full e-flex e-con e-child\" data-id=\"1974329\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-244967a elementor-widget elementor-widget-html\" data-id=\"244967a\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- This HTML creates a responsive side-by-side mockup. -->\n<!-- It uses a wrapper div with Flexbox to ensure the mockups are centered vertically. -->\n<div class=\"mockup-outer-wrapper\">\n\n  <!-- Flexbox container for side-by-side layout -->\n  <div class=\"mockup-container-side-by-side\">\n\n    <!-- Desktop Mockup with the Emaze iframe -->\n    <div class=\"desktop-mockup-side-by-side\">\n      <div class=\"browser-window-side-by-side\">\n        <!-- Browser window header -->\n        <div class=\"browser-header\">\n          <div class=\"browser-buttons\">\n            <span class=\"dot red\"><\/span>\n            <span class=\"dot yellow\"><\/span>\n            <span class=\"dot green\"><\/span>\n          <\/div>\n        <\/div>\n        <!-- Browser content area with the iframe -->\n        <div class=\"browser-content-side-by-side\">\n          <iframe\n            src=\"https:\/\/app.emaze.com\/mobile\/@ALFFTOTZR#\/BMW\"\n            style=\"width: 100%; height: 100%; border: none; border-radius: 0 0 10px 10px;\"\n            allowfullscreen\n            loading=\"lazy\"\n            title=\"Nespresso Quote Presentation\"\n          ><\/iframe>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- Mobile Mockup with the new image -->\n    <div class=\"mobile-mockup-side-by-side\">\n      <div class=\"phone-body\">\n        <div class=\"phone-screen\">\n          <!-- The 'src' attribute now uses your public image URL -->\n          <img decoding=\"async\"\n            src=\"https:\/\/userscontent2.emaze.com\/images\/780404fc-1a4f-40be-b14f-c0fbb53e93a3\/c8e5c78af9aad6e807530d5d5ea3f11a.png\"\n            alt=\"Screenshot of a mobile presentation\"\n            style=\"width: 100%; height: 100%; object-fit: fill;\"\n          >\n        <\/div>\n      <\/div>\n    <\/div>\n\n  <\/div>\n\n<\/div>\n\n<style>\n\/* ------------------------------------------- *\/\n\/* Combined Mockup CSS - Side-by-Side Version *\/\n\/* ------------------------------------------- *\/\n\n\/* NEW: Outer wrapper for reliable vertical and horizontal centering *\/\n.mockup-outer-wrapper {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 100%;\n    min-height: 800px; \/* Provides a large enough container to show centering *\/\n}\n\n\/* Flexbox container for side-by-side layout *\/\n.mockup-container-side-by-side {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: 30px; \/* Space between the two mockups *\/\n    width: 100%;\n    max-width: 1200px; \/* Max width for the whole section *\/\n    \n    \/* Removed the absolute positioning to avoid conflicts *\/\n}\n\n\/* Desktop Mockup Styling *\/\n.desktop-mockup-side-by-side {\n    width: 60%;\n    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);\n    border-radius: 10px;\n    overflow: hidden;\n}\n\n.browser-window-side-by-side {\n    width: 100%;\n    height: 550px;\n    background: #e8e8e8;\n    border: 1px solid #e8e8e8;\n    border-radius: 10px;\n    display: flex;\n    flex-direction: column;\n}\n\n.browser-content-side-by-side {\n    flex-grow: 1;\n}\n\n\/* Mobile Mockup Styling *\/\n.mobile-mockup-side-by-side {\n    width: 25%;\n    min-width: 200px;\n    height: 550px; \/* Corrected to match desktop for alignment *\/\n\n}\n\n.phone-body {\n    width: 100%;\n    height: 100%;\n    background: #e8e8e8;\n    border-radius: 20px;\n    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);\n    padding: 3px;\n    position: relative;\n    border: 5px solid #e8e8e8;\n    box-sizing: content-box;\n}\n\n.phone-body::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 50%;\n    transform: translateX(-50%);\n    width: 100px;\n    height: 8px;\n    background: #e8e8e8;\n    border-bottom-left-radius: 20px;\n    border-bottom-right-radius: 20px;\n}\n\n.phone-screen {\n    width: 100%;\n    height: 100%;\n    background: #fff;\n    border-radius: 20px;\n    overflow: hidden;\n}\n\n\/* Common styling for header\/buttons *\/\n.browser-header {\n    background: #e8e8e8;\n    padding: 10px;\n    border-bottom: 1px solid #ddd;\n}\n.browser-buttons {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n}\n.dot {\n    width: 12px;\n    height: 12px;\n    border-radius: 10px;\n}\n.red { background: #ff5f56; }\n.yellow { background: #ffbd2e; }\n.green { background: #27c93f; }\n<\/style>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-502cbed e-con-full e-flex e-con e-child\" data-id=\"502cbed\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-eeddad3 elementor-widget elementor-widget-text-editor\" data-id=\"eeddad3\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Bold cars deserve bold offers. Show it off with visuals that match<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"elementor-swiper-button elementor-swiper-button-prev\" role=\"button\" tabindex=\"0\" aria-label=\"Vorige\">\n\t\t\t\t<i aria-hidden=\"true\" class=\"eicon-chevron-left\"><\/i>\t\t\t<\/div>\n\t\t\t<div class=\"elementor-swiper-button elementor-swiper-button-next\" role=\"button\" tabindex=\"0\" aria-label=\"Volgende\">\n\t\t\t\t<i aria-hidden=\"true\" class=\"eicon-chevron-right\"><\/i>\t\t\t<\/div>\n\t\t\t\t\t<div class=\"swiper-pagination\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Make insurance look and feel personal \u2014 not like paperwork Showcase your personalized offer with elegance and flavor \u2014 the Nespresso way. If your cars turn heads, your follow-up should too Turn an energy quote into a moment that builds trust and drives action Bold cars deserve bold offers. Show it off with visuals that [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-35737","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/emaze.ai\/fr\/wp-json\/wp\/v2\/pages\/35737","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/emaze.ai\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/emaze.ai\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/emaze.ai\/fr\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/emaze.ai\/fr\/wp-json\/wp\/v2\/comments?post=35737"}],"version-history":[{"count":161,"href":"https:\/\/emaze.ai\/fr\/wp-json\/wp\/v2\/pages\/35737\/revisions"}],"predecessor-version":[{"id":36014,"href":"https:\/\/emaze.ai\/fr\/wp-json\/wp\/v2\/pages\/35737\/revisions\/36014"}],"wp:attachment":[{"href":"https:\/\/emaze.ai\/fr\/wp-json\/wp\/v2\/media?parent=35737"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}