Sync: update home from WordPress

pages/home.php

@@ -1,20 +1,18 @@
 <?php
-/**
- * Title: Home Page
- * Slug: ots-signs/page-home
- * Categories: oribi-pages
- * Keywords: home, digital signage, landing, hero
- * Post Types: page
+/*
+ * Title: Home
+ * Slug: home
+ * Post Type: page
  */
-?>
+
+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.","primaryBtnText":"Get Started","primaryBtnUrl":"/contact","secondaryBtnText":"Request Demo","secondaryBtnUrl":"/demo","stat1Value":"6+","stat1Label":"Industries Served","stat2Value":"500+","stat2Label":"Screens Supported","stat3Value":"99.9%","stat3Label":"Uptime"} /-->
 
-<!-- wp:oribi/feature-section {"variant":"normal","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.","columns":4} -->
-<!-- wp:oribi/feature-card {"iconType":"fontawesome","faIcon":"fas fa-camera","title":"Showcase Your Products","description":"Professional photography and video production services to showcase your products, services, or environment with polished, engaging content.","url":"/features"} /-->
-<!-- wp:oribi/feature-card {"iconType":"fontawesome","faIcon":"fas fa-chart-line","title":"Live Data Integrations","description":"Integrate your existing web dashboards and real-time data with our platform to bring your most important information to life on digital signage.","url":"/features"} /-->
-<!-- wp:oribi/feature-card {"iconType":"fontawesome","faIcon":"fas fa-utensils","title":"Digital Menu Boards","description":"Make your menu as appealing as your product. We incorporate your branding and include high-quality photography to showcase your offerings.","url":"/solutions"} /-->
-<!-- wp:oribi/feature-card {"iconType":"fontawesome","faIcon":"fas fa-wifi","title":"Offline Playback Support","description":"Our intelligent player devices keep your message on screen even when the internet isn\u0027t available, ensuring reliability in any location.","url":"/devices"} /-->
-<!-- /wp:oribi/feature-section -->
+<!-- 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/platform-row {"heading":"Live Data &amp; 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.","btnText":"Learn More","btnUrl":"/features","reversed":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"} /-->
+<!-- /wp:oribi/platform-section -->
 
 <!-- wp:oribi/feature-section {"variant":"alt","label":"Who It's For","heading":"Solutions for Every Industry","lead":"Modern businesses need real-time communication. Digital signage helps you connect, inform, and engage.","columns":4} -->
 <!-- wp:oribi/feature-card {"iconType":"fontawesome","faIcon":"fas fa-hotel","title":"Hospitality","description":"Showcase menus, promotions, and special events while guiding guests through lobbies, restaurants, and bars.","url":"/solutions"} /-->
@@ -23,10 +21,5 @@
 <!-- wp:oribi/feature-card {"iconType":"fontawesome","faIcon":"fas fa-graduation-cap","title":"Education","description":"Broadcast class schedules, announcements, and interactive learning content in campuses and auditoriums.","url":"/solutions"} /-->
 <!-- /wp:oribi/feature-section -->
 
-<!-- wp:oribi/link-section {"label":"Explore","heading":"Take the Next Step","lead":"See our plans, explore devices, or request a demo.","columns":3} -->
-<!-- wp:oribi/link-card {"iconType":"fontawesome","faIcon":"fas fa-tags","title":"Pricing Plans","description":"Affordable, scalable options for businesses of all sizes. See what\u0027s included at every level.","linkText":"View Pricing","linkUrl":"/pricing"} /-->
-<!-- wp:oribi/link-card {"iconType":"fontawesome","faIcon":"fas fa-microchip","title":"Player Devices","description":"Enterprise-grade hardware designed for reliability, with offline playback and HDMI compatibility.","linkText":"See Devices","linkUrl":"/devices"} /-->
-<!-- wp:oribi/link-card {"iconType":"fontawesome","faIcon":"fas fa-play-circle","title":"Request a Demo","description":"See our platform in action. Request access to our live demo instance.","linkText":"Try It Out","linkUrl":"/demo"} /-->
-<!-- /wp:oribi/link-section -->
-
-<!-- wp:oribi/cta-banner {"heading":"Ready to Transform Your Screens?","text":"Get in touch to discuss your digital signage needs. No pressure, no jargon. Just a conversation about how we can help.","btnText":"Get Started Today","btnUrl":"/contact"} /-->
+<!-- wp:oribi/cta-banner {"heading":"Ready to Transform Your Screens?","text":"See our plans, explore player devices, or request a live demo. No pressure, no jargon — just a conversation about how we can help.","btnText":"Get Started","btnUrl":"/contact"} /-->
+ORIBI_SYNC_CONTENT;

theme/assets/css/main.css

@@ -2011,12 +2011,55 @@ p:last-child { margin-bottom: 0; }
   100% { transform: translateY(var(--p-ty, -100vh)) translateX(var(--p-tx, 40px)) scale(var(--p-scale-end, 0.3)); opacity: 0; }
 }
 
+/* Horizontal sway layered onto particle float */
+@keyframes particle-sway {
+  0%, 100% { margin-left: 0; }
+  25%      { margin-left: var(--p-sway, 20px); }
+  75%      { margin-left: calc(var(--p-sway, 20px) * -1); }
+}
+
 @keyframes glow-drift {
   0%   { transform: translate(-50%, -50%) scale(1); opacity: 0.3; }
   50%  { transform: translate(-40%, -60%) scale(1.2); opacity: 0.5; }
   100% { transform: translate(-50%, -50%) scale(1); opacity: 0.3; }
 }
 
+/* Orbit / wander keyframes for decorative circles */
+@keyframes circle-orbit-1 {
+  0%   { transform: translate(0, 0) scale(1); }
+  25%  { transform: translate(80px, -60px) scale(1.1); }
+  50%  { transform: translate(-40px, -120px) scale(0.95); }
+  75%  { transform: translate(-100px, -30px) scale(1.05); }
+  100% { transform: translate(0, 0) scale(1); }
+}
+@keyframes circle-orbit-2 {
+  0%   { transform: translate(0, 0) scale(1); }
+  25%  { transform: translate(-70px, 50px) scale(1.08); }
+  50%  { transform: translate(60px, 90px) scale(0.9); }
+  75%  { transform: translate(100px, -40px) scale(1.12); }
+  100% { transform: translate(0, 0) scale(1); }
+}
+@keyframes circle-orbit-3 {
+  0%   { transform: translate(0, 0) scale(1); }
+  33%  { transform: translate(120px, 30px) scale(1.15); }
+  66%  { transform: translate(-60px, -80px) scale(0.85); }
+  100% { transform: translate(0, 0) scale(1); }
+}
+@keyframes circle-orbit-4 {
+  0%   { transform: translate(0, 0) scale(1); }
+  20%  { transform: translate(-50px, -90px) scale(1.1); }
+  40%  { transform: translate(90px, -50px) scale(0.92); }
+  60%  { transform: translate(40px, 70px) scale(1.08); }
+  80%  { transform: translate(-80px, 40px) scale(0.95); }
+  100% { transform: translate(0, 0) scale(1); }
+}
+@keyframes circle-orbit-5 {
+  0%   { transform: translate(0, 0) scale(1); }
+  30%  { transform: translate(60px, 80px) scale(1.05); }
+  60%  { transform: translate(-90px, 20px) scale(1.1); }
+  100% { transform: translate(0, 0) scale(1); }
+}
+
 /* Particle container */
 .hero-particles {
   position: absolute;
@@ -2031,23 +2074,71 @@ p:last-child { margin-bottom: 0; }
   position: absolute;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.12);
-  animation: particle-float var(--p-dur, 18s) var(--p-delay, 0s) linear infinite;
+  animation:
+    particle-float var(--p-dur, 18s) var(--p-delay, 0s) linear infinite,
+    particle-sway  var(--p-sway-dur, 6s) var(--p-delay, 0s) ease-in-out infinite;
   will-change: transform, opacity;
 }
 
 /* 12 particles with unique positions, sizes, speeds, and trajectories */
-.hero-particle--1  { --p-dur: 22s; --p-delay: 0s;   --p-tx: 60px;  --p-ty: -110vh; --p-opacity: 0.35; --p-scale-end: 0.2; width: 8px;  height: 8px;  bottom: -10px;  left: 8%;  }
-.hero-particle--2  { --p-dur: 28s; --p-delay: 3s;   --p-tx: -40px; --p-ty: -105vh; --p-opacity: 0.25; --p-scale-end: 0.4; width: 14px; height: 14px; bottom: -20px;  left: 20%; }
-.hero-particle--3  { --p-dur: 20s; --p-delay: 1s;   --p-tx: 80px;  --p-ty: -115vh; --p-opacity: 0.3;  --p-scale-end: 0.3; width: 6px;  height: 6px;  bottom: -8px;   left: 35%; }
-.hero-particle--4  { --p-dur: 26s; --p-delay: 5s;   --p-tx: -60px; --p-ty: -100vh; --p-opacity: 0.4;  --p-scale-end: 0.2; width: 10px; height: 10px; bottom: -12px;  left: 50%; }
-.hero-particle--5  { --p-dur: 24s; --p-delay: 2s;   --p-tx: 30px;  --p-ty: -108vh; --p-opacity: 0.2;  --p-scale-end: 0.5; width: 20px; height: 20px; bottom: -25px;  left: 65%; background: rgba(var(--color-primary-rgb),0.12); }
-.hero-particle--6  { --p-dur: 30s; --p-delay: 7s;   --p-tx: -20px; --p-ty: -112vh; --p-opacity: 0.35; --p-scale-end: 0.3; width: 12px; height: 12px; bottom: -15px;  left: 78%; }
-.hero-particle--7  { --p-dur: 19s; --p-delay: 4s;   --p-tx: 50px;  --p-ty: -106vh; --p-opacity: 0.2;  --p-scale-end: 0.4; width: 16px; height: 16px; bottom: -20px;  left: 90%; background: rgba(var(--color-primary-rgb),0.08); }
-.hero-particle--8  { --p-dur: 25s; --p-delay: 6s;   --p-tx: -70px; --p-ty: -102vh; --p-opacity: 0.3;  --p-scale-end: 0.2; width: 7px;  height: 7px;  bottom: -10px;  left: 15%; }
-.hero-particle--9  { --p-dur: 32s; --p-delay: 8s;   --p-tx: 45px;  --p-ty: -110vh; --p-opacity: 0.15; --p-scale-end: 0.6; width: 24px; height: 24px; bottom: -30px;  left: 42%; background: rgba(var(--color-primary-rgb),0.08); }
-.hero-particle--10 { --p-dur: 21s; --p-delay: 10s;  --p-tx: -35px; --p-ty: -108vh; --p-opacity: 0.3;  --p-scale-end: 0.3; width: 9px;  height: 9px;  bottom: -12px;  left: 58%; }
-.hero-particle--11 { --p-dur: 27s; --p-delay: 12s;  --p-tx: 25px;  --p-ty: -104vh; --p-opacity: 0.2;  --p-scale-end: 0.4; width: 18px; height: 18px; bottom: -22px;  left: 72%; background: rgba(var(--color-primary-rgb),0.06); }
-.hero-particle--12 { --p-dur: 23s; --p-delay: 9s;   --p-tx: -55px; --p-ty: -106vh; --p-opacity: 0.25; --p-scale-end: 0.3; width: 11px; height: 11px; bottom: -14px;  left: 5%;  }
+.hero-particle--1  { --p-dur: 22s; --p-delay: 0s;   --p-tx: 60px;  --p-ty: -110vh; --p-opacity: 0.35; --p-scale-end: 0.2; --p-sway: 15px;  --p-sway-dur: 5s;  width: 8px;  height: 8px;  bottom: -10px;  left: 8%;  }
+.hero-particle--2  { --p-dur: 28s; --p-delay: 3s;   --p-tx: -40px; --p-ty: -105vh; --p-opacity: 0.25; --p-scale-end: 0.4; --p-sway: 25px;  --p-sway-dur: 7s;  width: 14px; height: 14px; bottom: -20px;  left: 20%; }
+.hero-particle--3  { --p-dur: 20s; --p-delay: 1s;   --p-tx: 80px;  --p-ty: -115vh; --p-opacity: 0.3;  --p-scale-end: 0.3; --p-sway: 12px;  --p-sway-dur: 4s;  width: 6px;  height: 6px;  bottom: -8px;   left: 35%; }
+.hero-particle--4  { --p-dur: 26s; --p-delay: 5s;   --p-tx: -60px; --p-ty: -100vh; --p-opacity: 0.4;  --p-scale-end: 0.2; --p-sway: 30px;  --p-sway-dur: 8s;  width: 10px; height: 10px; bottom: -12px;  left: 50%; }
+.hero-particle--5  { --p-dur: 24s; --p-delay: 2s;   --p-tx: 30px;  --p-ty: -108vh; --p-opacity: 0.2;  --p-scale-end: 0.5; --p-sway: 20px;  --p-sway-dur: 6s;  width: 20px; height: 20px; bottom: -25px;  left: 65%; background: rgba(var(--color-primary-rgb),0.12); }
+.hero-particle--6  { --p-dur: 30s; --p-delay: 7s;   --p-tx: -20px; --p-ty: -112vh; --p-opacity: 0.35; --p-scale-end: 0.3; --p-sway: 18px;  --p-sway-dur: 5.5s; width: 12px; height: 12px; bottom: -15px;  left: 78%; }
+.hero-particle--7  { --p-dur: 19s; --p-delay: 4s;   --p-tx: 50px;  --p-ty: -106vh; --p-opacity: 0.2;  --p-scale-end: 0.4; --p-sway: 22px;  --p-sway-dur: 7.5s; width: 16px; height: 16px; bottom: -20px;  left: 90%; background: rgba(var(--color-primary-rgb),0.08); }
+.hero-particle--8  { --p-dur: 25s; --p-delay: 6s;   --p-tx: -70px; --p-ty: -102vh; --p-opacity: 0.3;  --p-scale-end: 0.2; --p-sway: 10px;  --p-sway-dur: 4.5s; width: 7px;  height: 7px;  bottom: -10px;  left: 15%; }
+.hero-particle--9  { --p-dur: 32s; --p-delay: 8s;   --p-tx: 45px;  --p-ty: -110vh; --p-opacity: 0.15; --p-scale-end: 0.6; --p-sway: 35px;  --p-sway-dur: 9s;  width: 24px; height: 24px; bottom: -30px;  left: 42%; background: rgba(var(--color-primary-rgb),0.08); }
+.hero-particle--10 { --p-dur: 21s; --p-delay: 10s;  --p-tx: -35px; --p-ty: -108vh; --p-opacity: 0.3;  --p-scale-end: 0.3; --p-sway: 16px;  --p-sway-dur: 6.5s; width: 9px;  height: 9px;  bottom: -12px;  left: 58%; }
+.hero-particle--11 { --p-dur: 27s; --p-delay: 12s;  --p-tx: 25px;  --p-ty: -104vh; --p-opacity: 0.2;  --p-scale-end: 0.4; --p-sway: 28px;  --p-sway-dur: 8.5s; width: 18px; height: 18px; bottom: -22px;  left: 72%; background: rgba(var(--color-primary-rgb),0.06); }
+.hero-particle--12 { --p-dur: 23s; --p-delay: 9s;   --p-tx: -55px; --p-ty: -106vh; --p-opacity: 0.25; --p-scale-end: 0.3; --p-sway: 14px;  --p-sway-dur: 5s;  width: 11px; height: 11px; bottom: -14px;  left: 5%;  }
+
+/* Orbit circle container */
+.hero-orbit-circles {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  z-index: 0;
+  pointer-events: none;
+}
+
+/* Individual orbit circles */
+.hero-orbit-circle {
+  position: absolute;
+  border-radius: 50%;
+  background: rgba(var(--color-primary-rgb), 0.05);
+  will-change: transform;
+}
+
+.hero-orbit-circle--1 {
+  width: 300px; height: 300px;
+  top: -5%;   left: -5%;
+  animation: circle-orbit-1 25s ease-in-out infinite;
+}
+.hero-orbit-circle--2 {
+  width: 200px; height: 200px;
+  top: 60%;   right: -3%;
+  background: rgba(var(--color-accent-rgb), 0.04);
+  animation: circle-orbit-2 30s ease-in-out infinite;
+}
+.hero-orbit-circle--3 {
+  width: 160px; height: 160px;
+  top: 20%;   left: 55%;
+  animation: circle-orbit-3 22s ease-in-out infinite;
+}
+.hero-orbit-circle--4 {
+  width: 240px; height: 240px;
+  bottom: -8%; left: 30%;
+  background: rgba(var(--color-primary-rgb), 0.035);
+  animation: circle-orbit-4 28s ease-in-out infinite;
+}
+.hero-orbit-circle--5 {
+  width: 120px; height: 120px;
+  top: 10%;   right: 20%;
+  background: rgba(var(--color-accent-rgb), 0.04);
+  animation: circle-orbit-5 20s ease-in-out infinite;
+}
 
 /* Ambient glow effect behind content */
 .hero-animated__glow {
@@ -2060,6 +2151,7 @@ p:last-child { margin-bottom: 0; }
   background: rgba(var(--color-primary-rgb), 0.06);
   z-index: 1;
   pointer-events: none;
+  animation: glow-drift 12s ease-in-out infinite;
 }
 
 /* Animated hero layout - centered single-column content */
@@ -2106,6 +2198,7 @@ p:last-child { margin-bottom: 0; }
   position: relative;
 }
 .page-hero-animated .hero-particles { z-index: 0; }
+.page-hero-animated .hero-orbit-circles { z-index: 0; }
 .page-hero-animated .hero-animated__glow { z-index: 0; }
 .page-hero-animated .hero-overlay { z-index: 1; }
 .page-hero-animated .container { position: relative; z-index: 2; }
@@ -2113,7 +2206,8 @@ p:last-child { margin-bottom: 0; }
 /* Reduce motion for accessibility */
 @media (prefers-reduced-motion: reduce) {
   .hero-particle,
-  .hero-animated__glow {
+  .hero-animated__glow,
+  .hero-orbit-circle {
     animation: none;
     opacity: var(--p-opacity, 0.2);
   }
@@ -2576,6 +2670,13 @@ p:last-child { margin-bottom: 0; }
 [data-theme="dark"] .hero-animated__glow {
   background: rgba(var(--color-primary-rgb), 0.08);
 }
+[data-theme="dark"] .hero-orbit-circle {
+  background: rgba(var(--color-primary-rgb), 0.06);
+}
+[data-theme="dark"] .hero-orbit-circle--2,
+[data-theme="dark"] .hero-orbit-circle--5 {
+  background: rgba(var(--color-accent-rgb), 0.05);
+}
 
 [data-theme="dark"] .site-footer { background: #0D0D0D; }
 

theme/blocks/index.php

@@ -1492,12 +1492,28 @@ function oribi_render_particles( $count = 12 ) {
     return $html;
 }
 
+/**
+ * Render decorative orbit circles that drift around the hero.
+ *
+ * @param  int    $count Number of circles (default 5).
+ * @return string        Rendered HTML.
+ */
+function oribi_render_orbit_circles( $count = 5 ) {
+    $html = '<div class="hero-orbit-circles" aria-hidden="true">';
+    for ( $i = 1; $i <= $count; $i++ ) {
+        $html .= '<div class="hero-orbit-circle hero-orbit-circle--' . $i . '"></div>';
+    }
+    $html .= '</div>';
+    return $html;
+}
+
 /* ── Animated Hero (homepage) ──────────────────────────────────────────────── */
 function oribi_render_hero_animated( $a ) {
     ob_start();
     ?>
 <section class="hero hero-animated">
     <?php echo oribi_render_particles( 12 ); ?>
+    <?php echo oribi_render_orbit_circles( 5 ); ?>
     <div class="hero-animated__glow"></div>
     <div class="container hero-animated__inner">
         <div class="hero-animated__content">
@@ -1538,6 +1554,7 @@ function oribi_render_page_hero_animated( $a ) {
     ob_start(); ?>
 <section class="page-hero page-hero-animated">
     <?php echo oribi_render_particles( 8 ); ?>
+    <?php echo oribi_render_orbit_circles( 4 ); ?>
     <div class="hero-animated__glow"></div>
     <div class="hero-overlay"></div>
     <div class="container">