Sync: update home from WordPress

pages/devices.php

@@ -1,11 +1,12 @@
 <?php
-/*
- * Title: Devices
- * Slug: devices
- * Post Type: page
+/**
+ * Title: Player Devices
+ * Slug: ots-signs/page-devices
+ * Categories: oribi-pages
+ * Keywords: devices, hardware, player, screens, HDMI, commercial display
+ * Post Types: page
  */
-
-return <<<'ORIBI_SYNC_CONTENT'
+?>
 <!-- wp:oribi/page-hero-animated {"label":"Hardware","title":"Signage Players Engineered for the Real World","description":"Compact, silent, and built for 24/7 operation. Plug into any HDMI screen, connect to your network, and your content is live in minutes."} /-->
 
 <!-- wp:oribi/platform-section {"label":"Our Devices","heading":"Commercial-Grade Hardware, Consumer-Level Simplicity","lead":"No IT degree required. Our players are designed to be set up in minutes and forgotten about for years."} -->
@@ -14,7 +15,7 @@ return <<<'ORIBI_SYNC_CONTENT'
 <!-- wp:oribi/platform-row {"heading":"Locked Down by Default","description":"Secure boot, encrypted storage, and encrypted communications come standard on every device. Remote management lets you monitor, update, and troubleshoot from anywhere. Firmware updates roll out over the air with zero downtime.","btnText":"Learn More","btnUrl":"/about"} /-->
 <!-- /wp:oribi/platform-section -->
 
-<!-- wp:oribi/feature-section {"variant":"alt","label":"Device Specifications","heading":"Whatu0027s Inside Every Player","lead":"Purpose-built components selected for reliability, performance, and silent operation in any environment.","columns":3} -->
+<!-- wp:oribi/feature-section {"variant":"alt","label":"Device Specifications","heading":"What\u0027s Inside Every Player","lead":"Purpose-built components selected for reliability, performance, and silent operation in any environment.","columns":3} -->
 <!-- wp:oribi/feature-card {"iconType":"fontawesome","faIcon":"fas fa-display","title":"4K Output","description":"Crisp 4K resolution over HDMI for stunning visuals on any display size, from 32-inch panels to 75-inch video walls."} /-->
 <!-- wp:oribi/feature-card {"iconType":"fontawesome","faIcon":"fas fa-wifi","title":"Dual Connectivity","description":"Wi-Fi and Ethernet built in. Choose the connection that suits your environment, or use both for redundancy."} /-->
 <!-- wp:oribi/feature-card {"iconType":"fontawesome","faIcon":"fas fa-hard-drive","title":"Local Storage","description":"On-device storage caches your full content library for instant startup and uninterrupted offline playback."} /-->
@@ -23,7 +24,6 @@ return <<<'ORIBI_SYNC_CONTENT'
 <!-- wp:oribi/feature-card {"iconType":"fontawesome","faIcon":"fas fa-temperature-low","title":"Silent & Fanless","description":"Passive cooling means zero noise. Ideal for quiet spaces like hotel lobbies, meeting rooms, and restaurants."} /-->
 <!-- /wp:oribi/feature-section -->
 
-<!-- wp:oribi/intro-section {"variant":"normal","label":"Bundles Available","heading":"Player + Display Packages","description":"Donu0027t have screens yet? We offer turnkey bundles pairing our player device with a commercial-grade display rated for 24/7 operation — brighter, tougher, and longer-lasting than consumer TVs. Available from 32" to 75". Contact us for volume pricing and custom configurations.","visual":""} /-->
+<!-- wp:oribi/intro-section {"variant":"normal","label":"Bundles Available","heading":"Player + Display Packages","description":"Don\u0027t have screens yet? We offer turnkey bundles pairing our player device with a commercial-grade display rated for 24/7 operation — brighter, tougher, and longer-lasting than consumer TVs. Available from 32\" to 75\". Contact us for volume pricing and custom configurations.","visual":""} /-->
 
 <!-- wp:oribi/cta-banner {"heading":"Not Sure What You Need?","text":"Tell us about your space and we'll recommend the right player, display, and mounting solution for your environment.","btnText":"Request a Quote","btnUrl":"/contact"} /-->
-ORIBI_SYNC_CONTENT;

pages/home.php

@@ -8,10 +8,12 @@
 return <<<'ORIBI_SYNC_CONTENT'
 <!-- wp:oribi/hero-animated {"label":"● Digital Signage Solutions","title":"Turn any screen into a dynamic communication tool.","highlightWord":"dynamic","description":"Digital signage is the modern way to connect with your audience. From eye-catching retail displays to dynamic informational screens, we craft tailored solutions that capture attention and deliver your message.","secondaryBtnText":"Request Demo","secondaryBtnUrl":"/demo","stat1Value":"4K","stat1Label":"Resolution Supported","stat2Value":"500+","stat2Label":"Screens Supported","stat3Value":"99.9%","stat3Label":"Uptime"} /-->
 
-<!-- wp:oribi/platform-section {"label":"The Complete Package","heading":"Everything You Need for Engaging Digital Signage","lead":"High-quality visuals, real-time data, and reliable playback — all managed from one powerful platform."} -->
-<!-- wp:oribi/platform-row {"heading":"Professional Content Creation","description":"Our in-house photography and video production services showcase your products, services, and environment with polished, engaging visuals. From digital menu boards to branded promotions, we create content that captures attention.","btnText":"See Features","btnUrl":"/features"} /-->
+<!-- wp:oribi/use-cases {"label":"● Use Cases","heading":"Built for Every Scenario","lead":"From menus to meeting-room dashboards, digital signage adapts to your environment.","case1Title":"Menu Boards","case1Desc":"Showcase food, drinks, and daily specials with dynamic, always-current displays.","case2Title":"Event Displays","case2Desc":"Promote schedules, speakers, and live countdowns across lobbies and venues.","case3Title":"Office Dashboards","case3Desc":"Surface KPIs, occupancy data, and team alerts on screens throughout your workspace.","case4Title":"Wayfinding","case4Desc":"Guide visitors through complex buildings with interactive maps and directional signs."} /-->
 
-<!-- wp:oribi/platform-row {"heading":"Live Data \u0026amp; Web Dashboards","description":"Integrate your existing web dashboards, social feeds, and real-time data sources directly to your displays. Bring your most important information to life on screen, automatically and effortlessly.","btnUrl":"/features","reversed":true,"isDashboard":true} /-->
+<!-- wp:oribi/platform-section {"label":"The Complete Package","heading":"Everything You Need for Engaging Digital Signage","lead":"High-quality visuals, real-time data, and reliable playback — all managed from one powerful platform."} -->
+<!-- wp:oribi/platform-row {"heading":"Professional Content Creation","description":"Our in-house photography and video production services showcase your products, services, and environment with polished, engaging visuals. From digital menu boards to branded promotions, we create content that captures attention.","btnText":"See Features","btnUrl":"/features","cameraAnim":true} /-->
+
+<!-- wp:oribi/platform-row {"heading":"Live Data u0026amp; Web Dashboards","description":"Integrate your existing web dashboards, social feeds, and real-time data sources directly to your displays. Bring your most important information to life on screen, automatically and effortlessly.","btnUrl":"/features","reversed":true,"isDashboard":true} /-->
 
 <!-- wp:oribi/platform-row {"heading":"Reliable on Any Screen","description":"Our intelligent player devices work on any screen with HDMI, and keep your message running even when the internet goes down. Enterprise-grade hardware designed for uninterrupted, always-on signage.","btnText":"View Devices","btnUrl":"/devices","deviceAnim":true} /-->
 <!-- /wp:oribi/platform-section -->

theme/assets/js/dashboard-animator.js

@@ -13,7 +13,7 @@
   var LINE_W   = 340;    // line graph width in SVG units
   var PIE_R    = 55;     // pie chart radius
 
-  var DARK  = { text: '#E0E0E0', muted: '#9E9E9E', border: '#333', center: '#222' };
+  var DARK  = { text: '#E0E0E0', muted: '#9E9E9E', border: '#333', center: '#1A1A1A' };
   var LIGHT = { text: '#333333', muted: '#666666', border: '#E0E0E0', center: '#fff' };
 
   function isDark() { return document.documentElement.getAttribute('data-theme') === 'dark'; }

theme/blocks/editor.js

@@ -1180,6 +1180,7 @@ reg('oribi/platform-row', {
         imgUrl:      { type: 'string',  default: '' },
         imgAlt:      { type: 'string',  default: '' },
         imgWidth:    { type: 'number',  default: 300 },
+        cameraAnim:  { type: 'boolean', default: false },
     },
     edit: function (props) {
         var a = props.attributes, s = props.setAttributes;
@@ -1189,7 +1190,8 @@ reg('oribi/platform-row', {
                 el(PB, { title: 'Row Settings' },
                     el(TC, { label: 'Visual (emoji)', value: a.visual, onChange: function(v){s({visual:v});} }),
                     el(TC, { label: 'Button URL', value: a.btnUrl, onChange: function(v){s({btnUrl:v});} }),
-                    el(TG, { label: 'Reversed', checked: !!a.reversed, onChange: function(v){s({reversed:v});} })
+                    el(TG, { label: 'Reversed', checked: !!a.reversed, onChange: function(v){s({reversed:v});} }),
+                    el(TG, { label: 'Camera Animation', checked: !!a.cameraAnim, onChange: function(v){s({cameraAnim:v});} })
                 ),
                 el(PB, { title: 'Visual Image', initialOpen: false },
                     el(MUC, null,
@@ -1220,7 +1222,67 @@ reg('oribi/platform-row', {
                     a.btnUrl ? el(RT, { tagName: 'span', className: 'btn btn-outline mt-3',
                         value: a.btnText, onChange: function(v){s({btnText:v});}, placeholder: 'Button...' }) : null
                 ),
-                a.imgUrl
+                a.cameraAnim
+                    ? el('div', { className: 'platform-visual has-camera' },
+                        el('div', { className: 'cam-stage', 'aria-hidden': 'true' },
+                            // Photo camera (left)
+                            el('div', { className: 'pc-wrap' },
+                                el('div', { className: 'pc-body' },
+                                    el('div', { className: 'pc-flash-unit' }),
+                                    el('div', { className: 'pc-top' },
+                                        el('div', { className: 'pc-shutter-btn' }),
+                                        el('div', { className: 'pc-viewfinder' })
+                                    ),
+                                    el('div', { className: 'pc-front' },
+                                        el('div', { className: 'pc-lens-ring' },
+                                            el('div', { className: 'pc-lens-glass' },
+                                                el('div', { className: 'pc-lens-reflex' })
+                                            )
+                                        ),
+                                        el('div', { className: 'pc-grip' })
+                                    )
+                                ),
+                                el('div', { className: 'pc-prints' },
+                                    el('div', { className: 'pc-print pc-print--1', style: { opacity: '1', transform: 'rotate(-12deg) translateY(0)' } },
+                                        el('div', { className: 'pc-print__img' })
+                                    )
+                                )
+                            ),
+                            // Centre scene
+                            el('div', { className: 'cam-scene' },
+                                el('div', { className: 'cam-subject cam-subject--1' }),
+                                el('div', { className: 'cam-flash-overlay' }),
+                                el('div', { className: 'cam-vid-overlay' })
+                            ),
+                            // Video camera on tripod (right)
+                            el('div', { className: 'vc-wrap' },
+                                el('div', { className: 'vc-camera' },
+                                    el('div', { className: 'vc-handle' }),
+                                    el('div', { className: 'vc-body' },
+                                        el('div', { className: 'vc-lens-barrel' },
+                                            el('div', { className: 'vc-lens-tip' },
+                                                el('div', { className: 'vc-lens-glass' },
+                                                    el('div', { className: 'vc-lens-reflex' })
+                                                )
+                                            )
+                                        ),
+                                        el('div', { className: 'vc-top-rail' }),
+                                        el('div', { className: 'vc-rec-light' }),
+                                        el('div', { className: 'vc-eyepiece' })
+                                    )
+                                ),
+                                el('div', { className: 'vc-tripod' },
+                                    el('div', { className: 'vc-stem' }),
+                                    el('div', { className: 'vc-legs' },
+                                        el('div', { className: 'vc-leg vc-leg--l' }),
+                                        el('div', { className: 'vc-leg vc-leg--c' }),
+                                        el('div', { className: 'vc-leg vc-leg--r' })
+                                    )
+                                )
+                            )
+                        )
+                      )
+                    : a.imgUrl
                     ? el('div', { className: 'platform-visual has-img' },
                         el('img', { src: a.imgUrl, style: { width: imgW + 'px', maxWidth: '100%', height: 'auto', borderRadius: '4px', objectFit: 'contain', display: 'block', marginInline: 'auto' } })
                       )
@@ -1701,7 +1763,6 @@ reg('oribi/hero-animated', {
     save: function () { return null; }
 });
 
-/* ANIMATED PAGE HERO ──────────────────────────────────────────────────── */
 reg('oribi/page-hero-animated', {
     title: 'Animated Page Hero',
     icon: 'flag',
@@ -1784,4 +1845,81 @@ reg('oribi/site-footer', {
     save: function () { return null; }
 });
 
+/* USE CASES SHOWCASE ──────────────────────────────────────────────────── */
+reg('oribi/use-cases', {
+    title: 'Use Cases Showcase',
+    icon: 'grid-view',
+    category: 'oribi',
+    supports: { html: false },
+    attributes: {
+        label:      { type: 'string', default: '\u25cf Use Cases' },
+        heading:    { type: 'string', default: 'Built for Every Scenario' },
+        lead:       { type: 'string', default: 'From menus to meeting-room dashboards, digital signage adapts to your environment.' },
+        case1Title: { type: 'string', default: 'Menu Boards' },
+        case1Desc:  { type: 'string', default: 'Showcase food, drinks, and daily specials with dynamic, always-current displays.' },
+        case2Title: { type: 'string', default: 'Event Displays' },
+        case2Desc:  { type: 'string', default: 'Promote schedules, speakers, and live countdowns across lobbies and venues.' },
+        case3Title: { type: 'string', default: 'Office Dashboards' },
+        case3Desc:  { type: 'string', default: 'Surface KPIs, occupancy data, and team alerts on screens throughout your workspace.' },
+        case4Title: { type: 'string', default: 'Wayfinding' },
+        case4Desc:  { type: 'string', default: 'Guide visitors through complex buildings with interactive maps and directional signs.' },
+    },
+    edit: function (props) {
+        var a = props.attributes, s = props.setAttributes;
+        return el(Frag, null,
+            el(IC, null,
+                el(PB, { title: 'Section Header' },
+                    el(TC, { label: 'Label',   value: a.label,   onChange: function(v){s({label:v});} }),
+                    el(TC, { label: 'Heading', value: a.heading, onChange: function(v){s({heading:v});} }),
+                    el(TA, { label: 'Lead',    value: a.lead,    onChange: function(v){s({lead:v});} })
+                ),
+                el(PB, { title: 'Use Case 1 – Menu Boards', initialOpen: false },
+                    el(TC, { label: 'Title',       value: a.case1Title, onChange: function(v){s({case1Title:v});} }),
+                    el(TA, { label: 'Description', value: a.case1Desc,  onChange: function(v){s({case1Desc:v});} })
+                ),
+                el(PB, { title: 'Use Case 2 – Events', initialOpen: false },
+                    el(TC, { label: 'Title',       value: a.case2Title, onChange: function(v){s({case2Title:v});} }),
+                    el(TA, { label: 'Description', value: a.case2Desc,  onChange: function(v){s({case2Desc:v});} })
+                ),
+                el(PB, { title: 'Use Case 3 – Dashboards', initialOpen: false },
+                    el(TC, { label: 'Title',       value: a.case3Title, onChange: function(v){s({case3Title:v});} }),
+                    el(TA, { label: 'Description', value: a.case3Desc,  onChange: function(v){s({case3Desc:v});} })
+                ),
+                el(PB, { title: 'Use Case 4 – Wayfinding', initialOpen: false },
+                    el(TC, { label: 'Title',       value: a.case4Title, onChange: function(v){s({case4Title:v});} }),
+                    el(TA, { label: 'Description', value: a.case4Desc,  onChange: function(v){s({case4Desc:v});} })
+                )
+            ),
+            el('section', { className: 'section use-cases-section' },
+                el('div', { className: 'container' },
+                    el('div', { className: 'section-header' },
+                        a.label   ? el('span', { className: 'section-label' }, a.label)   : null,
+                        a.heading ? el('h2', null, a.heading) : null,
+                        a.lead    ? el('p', { className: 'lead' }, a.lead)    : null
+                    ),
+                    el('div', { className: 'uc-track' },
+                        ['menu', 'event', 'dashboard', 'wayfinding'].map(function (mod, i) {
+                            var n = i + 1;
+                            var title = a['case' + n + 'Title'];
+                            var desc  = a['case' + n + 'Desc'];
+                            return el('div', { key: mod, className: 'uc-item' },
+                                el('div', { className: 'uc-circle uc-anim--' + mod,
+                                    style: { display:'flex', alignItems:'center', justifyContent:'center',
+                                             fontSize:'.7rem', color:'var(--color-muted)', textAlign:'center', padding:'8px' } },
+                                    mod
+                                ),
+                                el('div', { className: 'uc-item-body' },
+                                    el('div', { className: 'uc-item-title' }, title),
+                                    desc ? el('p', { className: 'uc-item-desc' }, desc) : null
+                                )
+                            );
+                        })
+                    )
+                )
+            )
+        );
+    },
+    save: function () { return null; }
+});
+
 })(window.wp);

theme/blocks/index.php

@@ -555,6 +555,7 @@ add_action( 'init', function () {
             'imgWidth'    => [ 'type' => 'number',  'default' => 300 ],
             'deviceAnim'  => [ 'type' => 'boolean', 'default' => false ],
             'tvStick'     => [ 'type' => 'boolean', 'default' => false ],
+            'cameraAnim'  => [ 'type' => 'boolean', 'default' => false ],
         ],
         'supports'        => $block_supports,
         'render_callback' => 'oribi_render_platform_row',
@@ -655,6 +656,25 @@ add_action( 'init', function () {
         'render_callback' => 'oribi_render_page_hero_animated',
     ] );
 
+    /* Use Cases Showcase - 4 animated circles beneath the homepage hero */
+    register_block_type( 'oribi/use-cases', [
+        'attributes'      => [
+            'label'      => [ 'type' => 'string', 'default' => '● Use Cases' ],
+            'heading'    => [ 'type' => 'string', 'default' => 'Built for Every Scenario' ],
+            'lead'       => [ 'type' => 'string', 'default' => 'From menus to meeting-room dashboards, digital signage adapts to your environment.' ],
+            'case1Title' => [ 'type' => 'string', 'default' => 'Menu Boards' ],
+            'case1Desc'  => [ 'type' => 'string', 'default' => 'Showcase food, drinks, and daily specials with dynamic, always-current displays.' ],
+            'case2Title' => [ 'type' => 'string', 'default' => 'Event Displays' ],
+            'case2Desc'  => [ 'type' => 'string', 'default' => 'Promote schedules, speakers, and live countdowns across lobbies and venues.' ],
+            'case3Title' => [ 'type' => 'string', 'default' => 'Office Dashboards' ],
+            'case3Desc'  => [ 'type' => 'string', 'default' => 'Surface KPIs, occupancy data, and team alerts on screens throughout your workspace.' ],
+            'case4Title' => [ 'type' => 'string', 'default' => 'Wayfinding' ],
+            'case4Desc'  => [ 'type' => 'string', 'default' => 'Guide visitors through complex buildings with interactive maps and directional signs.' ],
+        ],
+        'supports'        => $block_supports,
+        'render_callback' => 'oribi_render_use_cases',
+    ] );
+
 } );
 
 /* ══════════════════════════════════════════════════════════════════════════════
@@ -1498,6 +1518,59 @@ function oribi_render_platform_row( $a ) {
         $ts .= '</div>';
         $visual_html = $ts;
         $visual_cls  = 'platform-visual has-tv-stick';
+    } elseif ( ! empty( $a['cameraAnim'] ) ) {
+        $ca = '<div class="cam-stage" aria-hidden="true">';
+
+        // ── Left: compact photo camera ──
+        $ca .= '<div class="pc-wrap">';
+        $ca .= '<div class="pc-body">';
+        $ca .= '<div class="pc-flash-unit"></div>';
+        $ca .= '<div class="pc-top"><div class="pc-shutter-btn"></div><div class="pc-viewfinder"></div></div>';
+        $ca .= '<div class="pc-front">';
+        $ca .= '<div class="pc-lens-ring"><div class="pc-lens-glass"><div class="pc-lens-reflex"></div></div></div>';
+        $ca .= '<div class="pc-grip"></div>';
+        $ca .= '</div>';
+        $ca .= '</div>'; // pc-body
+        $ca .= '<div class="pc-prints">';
+        $ca .= '<div class="pc-print pc-print--1"><div class="pc-print__img"></div></div>';
+        $ca .= '<div class="pc-print pc-print--2"><div class="pc-print__img"></div></div>';
+        $ca .= '<div class="pc-print pc-print--3"><div class="pc-print__img"></div></div>';
+        $ca .= '</div>'; // pc-prints
+        $ca .= '</div>'; // pc-wrap
+
+        // ── Centre: product scene both cameras shoot ──
+        $ca .= '<div class="cam-scene">';
+        $ca .= '<div class="cam-subject cam-subject--1"></div>';
+        $ca .= '<div class="cam-subject cam-subject--2"></div>';
+        $ca .= '<div class="cam-subject cam-subject--3"></div>';
+        $ca .= '<div class="cam-flash-overlay"></div>';
+        $ca .= '<div class="cam-vid-overlay"></div>';
+        $ca .= '</div>'; // cam-scene
+
+        // ── Right: retro VHS video camera on tripod ──
+        $ca .= '<div class="vc-wrap">';
+        $ca .= '<div class="vc-camera">';
+        $ca .= '<div class="vc-handle"></div>';
+        $ca .= '<div class="vc-body">';
+        $ca .= '<div class="vc-lens-barrel"><div class="vc-lens-tip"><div class="vc-lens-glass"><div class="vc-lens-reflex"></div></div></div></div>';
+        $ca .= '<div class="vc-top-rail"></div>';
+        $ca .= '<div class="vc-rec-light"></div>';
+        $ca .= '<div class="vc-eyepiece"></div>';
+        $ca .= '</div>'; // vc-body
+        $ca .= '</div>'; // vc-camera
+        $ca .= '<div class="vc-tripod">';
+        $ca .= '<div class="vc-stem"></div>';
+        $ca .= '<div class="vc-legs">';
+        $ca .= '<div class="vc-leg vc-leg--l"></div>';
+        $ca .= '<div class="vc-leg vc-leg--c"></div>';
+        $ca .= '<div class="vc-leg vc-leg--r"></div>';
+        $ca .= '</div>'; // vc-legs
+        $ca .= '</div>'; // vc-tripod
+        $ca .= '</div>'; // vc-wrap
+
+        $ca .= '</div>'; // cam-stage
+        $visual_html = $ca;
+        $visual_cls  = 'platform-visual has-camera';
     } else {
         $visual_html = oribi_render_icon( $a['visual'] ?? '' );
         $visual_cls  = 'platform-visual';
@@ -1708,3 +1781,95 @@ function oribi_render_page_hero_animated( $a ) {
 </section>
 <?php return ob_get_clean();
 }
+
+/* ── Use Cases Showcase ────────────────────────────────────────────────── */
+function oribi_uc_anim_inner( $mod ) {
+    switch ( $mod ) {
+        case 'menu':
+            return '
+<div class="uc-inner uc-inner--menu" aria-hidden="true">
+    <div class="uc-menu-header"></div>
+    <div class="uc-menu-row"><span class="uc-menu-name"></span><span class="uc-menu-price"></span></div>
+    <div class="uc-menu-row uc-menu-row--highlight"><span class="uc-menu-name"></span><span class="uc-menu-price"></span></div>
+    <div class="uc-menu-row"><span class="uc-menu-name uc-menu-name--sm"></span><span class="uc-menu-price"></span></div>
+    <div class="uc-menu-row"><span class="uc-menu-name"></span><span class="uc-menu-price"></span></div>
+    <div class="uc-menu-divider"></div>
+    <div class="uc-menu-row"><span class="uc-menu-name uc-menu-name--sm"></span><span class="uc-menu-price"></span></div>
+</div>';
+        case 'event':
+            return '
+<div class="uc-inner uc-inner--event" aria-hidden="true">
+    <div class="uc-event-cursor"></div>
+    <div class="uc-event-header"></div>
+    <div class="uc-event-row"><div class="uc-event-time"></div><div class="uc-event-bar uc-event-bar--active"></div></div>
+    <div class="uc-event-row"><div class="uc-event-time"></div><div class="uc-event-bar"></div></div>
+    <div class="uc-event-row"><div class="uc-event-time"></div><div class="uc-event-bar uc-event-bar--accent"></div></div>
+    <div class="uc-event-row"><div class="uc-event-time"></div><div class="uc-event-bar"></div></div>
+</div>';
+        case 'dashboard':
+            return '
+<div class="uc-inner uc-inner--dashboard" aria-hidden="true">
+    <div class="uc-db-bars">
+        <div class="uc-db-bar uc-db-bar--1"></div>
+        <div class="uc-db-bar uc-db-bar--2"></div>
+        <div class="uc-db-bar uc-db-bar--3"></div>
+        <div class="uc-db-bar uc-db-bar--4"></div>
+    </div>
+    <div class="uc-db-baseline"></div>
+    <div class="uc-db-labels">
+        <div class="uc-db-lbl"></div>
+        <div class="uc-db-lbl"></div>
+        <div class="uc-db-lbl"></div>
+        <div class="uc-db-lbl"></div>
+    </div>
+</div>';
+        case 'wayfinding':
+            return '
+<div class="uc-inner uc-inner--wayfinding" aria-hidden="true">
+    <div class="uc-wf-corridor uc-wf-corridor--h"></div>
+    <div class="uc-wf-corridor uc-wf-corridor--v"></div>
+    <div class="uc-wf-room uc-wf-room--1"></div>
+    <div class="uc-wf-room uc-wf-room--2"></div>
+    <div class="uc-wf-room uc-wf-room--3"></div>
+    <div class="uc-wf-dot"></div>
+    <div class="uc-wf-arrow"></div>
+</div>';
+        default:
+            return '';
+    }
+}
+
+function oribi_render_use_cases( $a ) {
+    $cases = [
+        [ 'title' => $a['case1Title'], 'desc' => $a['case1Desc'], 'mod' => 'menu'       ],
+        [ 'title' => $a['case2Title'], 'desc' => $a['case2Desc'], 'mod' => 'event'      ],
+        [ 'title' => $a['case3Title'], 'desc' => $a['case3Desc'], 'mod' => 'dashboard'  ],
+        [ 'title' => $a['case4Title'], 'desc' => $a['case4Desc'], 'mod' => 'wayfinding' ],
+    ];
+    ob_start(); ?>
+<section class="section use-cases-section">
+    <div class="container">
+        <?php if ( $a['label'] || $a['heading'] || $a['lead'] ) : ?>
+        <div class="section-header">
+            <?php if ( $a['label'] ) : ?><span class="section-label"><?php echo esc_html( $a['label'] ); ?></span><?php endif; ?>
+            <?php if ( $a['heading'] ) : ?><h2><?php echo wp_kses_post( $a['heading'] ); ?></h2><?php endif; ?>
+            <?php if ( $a['lead'] ) : ?><p class="lead"><?php echo wp_kses_post( $a['lead'] ); ?></p><?php endif; ?>
+        </div>
+        <?php endif; ?>
+        <div class="uc-track">
+            <?php foreach ( $cases as $c ) : ?>
+            <div class="uc-item">
+                <div class="uc-circle uc-anim--<?php echo esc_attr( $c['mod'] ); ?>">
+                    <?php echo oribi_uc_anim_inner( $c['mod'] ); ?>
+                </div>
+                <div class="uc-item-body">
+                    <div class="uc-item-title"><?php echo esc_html( $c['title'] ); ?></div>
+                    <?php if ( $c['desc'] ) : ?><p class="uc-item-desc"><?php echo esc_html( $c['desc'] ); ?></p><?php endif; ?>
+                </div>
+            </div>
+            <?php endforeach; ?>
+        </div>
+    </div>
+</section>
+<?php return ob_get_clean();
+}