OTSSigns/OTSSigns-Website
1
0
Fork 0
Code Issues Pull Requests 6 Actions Packages Projects Releases Wiki Activity

feat: Add digital signage animation to the intro section block.

Browse Source
This commit is contained in:
Matt Batchelder
2026-02-27 17:57:59 -05:00
parent a1f6f9a51b
commit 44e2ed7061
4 changed files with 2247 additions and 2004 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
pages/about.php
View File

@@ -8,7 +8,7 @@
return <<<'ORIBI_SYNC_CONTENT'
<!-- wp:oribi/page-hero-animated {"label":"About Us","title":"Digital Signage, Done Properly","description":"OTS Signs is the digital signage arm of Oribi Technology Services. We combine deep IT expertise with creative production to deliver signage that businesses can genuinely rely on."} /-->
<!-- wp:oribi/intro-section {"label":"Our Story","heading":"Born from Infrastructure, Built for Signage","description":"OTS Signs grew out of a gap we kept seeing: businesses wanted digital signage but were stuck choosing between complex enterprise platforms and unreliable consumer tools. As part of Oribi Technology Services, we already understood networks, uptime, and security at a deep level. We took that foundation and built a signage platform that is powerful enough for large deployments yet simple enough for a single-site café. Every decision we make, from hardware selection to Command Center design, is grounded in real-world infrastructure experience."} /-->
<!-- wp:oribi/intro-section {"label":"Our Story","heading":"Born from Infrastructure, Built for Signage","description":"OTS Signs grew out of a gap we kept seeing: businesses wanted digital signage but were stuck choosing between complex enterprise platforms and unreliable consumer tools. As part of Oribi Technology Services, we already understood networks, uptime, and security at a deep level. We took that foundation and built a signage platform that is powerful enough for large deployments yet simple enough for a single-site café. Every decision we make, from hardware selection to Command Center design, is grounded in real-world infrastructure experience.","cloudAnim":true} /-->
<!-- wp:oribi/value-section {"variant":"alt","label":"Our Heritage","heading":"Backed by Years of Enterprise IT","lead":"OTS Signs is built on the infrastructure expertise of Oribi Technology Services \u2014 a team that has spent years designing, deploying, and supporting business-critical technology.","columns":3} -->
<!-- wp:oribi/value-card {"iconType":"fontawesome","faIcon":"fas fa-network-wired","title":"Enterprise Networking","description":"We\u0027ve designed and managed networks for organisations that can\u0027t afford downtime. That same rigour underpins every signage deployment we build."} /-->
@@ -38,5 +38,4 @@ return <<<'ORIBI_SYNC_CONTENT'
<!-- wp:oribi/stat-card {"value":"4K","label":"Ultra-HD Output","description":"Every player delivers crisp 4K resolution over HDMI for stunning visuals on any display."} /-->
<!-- wp:oribi/stat-card {"value":"24/7","label":"Always-On Operation","description":"Commercial-grade hardware with offline playback ensures your screens never go dark."} /-->
<!-- /wp:oribi/stat-section -->
<!-- wp:oribi/cta-banner {"heading":"Ready to See What We Can Do?","text":"Whether you're planning your first screen or scaling to hundreds, we'd love to hear about your project.","btnText":"Get in Touch","btnUrl":"/contact"} /-->
ORIBI_SYNC_CONTENT;
<!-- wp:oribi/cta-banner {"heading":"Ready to See What We Can Do?","text":"Whether you're planning your first screen or scaling to hundreds, we'd love to hear about your project.","btnText":"Get in Touch","btnUrl":"/contact"} /-->ORIBI_SYNC_CONTENT;

116
theme/assets/css/main.css
View File

@@ -3272,7 +3272,8 @@ p:last-child { margin-bottom: 0; }
color: #fff;
}
/* When an image is set, remove the gradient box styling */
.about-intro-visual.has-img {
.about-intro-visual.has-img,
.about-intro-visual.has-cloud-anim {
background: none;
box-shadow: none;
aspect-ratio: unset;
@@ -3284,6 +3285,119 @@ p:last-child { margin-bottom: 0; }
.about-intro-visual { max-width: 280px; margin-inline: auto; }
}
/* ── Digital Signage Animation ────────────────────────────── */
.ds-anim-container {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: 400px;
margin: 0 auto;
padding: 2rem 0;
position: relative;
color: var(--color-primary);
}
[data-theme="dark"] .ds-anim-container {
color: #fff;
}
.ds-tv, .ds-cloud {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
}
.ds-tv {
font-size: 5rem;
position: relative;
}
.ds-tv-screen {
position: absolute;
top: 15%;
left: 10%;
width: 80%;
height: 60%;
background: rgba(var(--color-primary-rgb), 0.2);
border-radius: 4px;
animation: ds-screen-pulse 3s infinite alternate;
}
[data-theme="dark"] .ds-tv-screen {
background: rgba(255, 255, 255, 0.15);
}
@keyframes ds-screen-pulse {
0% { opacity: 0.4; }
100% { opacity: 1; }
}
.ds-cloud {
font-size: 4.5rem;
animation: ds-float 4s ease-in-out infinite;
}
@keyframes ds-float {
0% { transform: translateY(0); }
50% { transform: translateY(-8px); }
100% { transform: translateY(0); }
}
.ds-line {
flex-grow: 1;
height: 2px;
background: rgba(var(--color-primary-rgb), 0.2);
margin: 0 1.5rem;
position: relative;
display: flex;
align-items: center;
overflow: hidden;
border-radius: 2px;
}
[data-theme="dark"] .ds-line {
background: rgba(255, 255, 255, 0.1);
}
.ds-packet {
width: 12px;
height: 4px;
background: var(--color-primary);
border-radius: 4px;
position: absolute;
left: -20px;
box-shadow: 0 0 8px var(--color-primary);
}
[data-theme="dark"] .ds-packet {
background: #fff;
box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}
.ds-packet-1 { animation: ds-travel 2s linear infinite; }
.ds-packet-2 { animation: ds-travel 2s linear infinite 0.6s; }
.ds-packet-3 { animation: ds-travel 2s linear infinite 1.2s; }
@keyframes ds-travel {
0% { left: -20px; opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { left: 100%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.ds-tv-screen, .ds-cloud, .ds-packet {
animation: none;
}
.ds-packet-1 { left: 20%; opacity: 1; }
.ds-packet-2 { left: 50%; opacity: 1; }
.ds-packet-3 { left: 80%; opacity: 1; }
}
/* ── 13. Contact ────────────────────────────────────────────── */
.contact-layout {
display: grid;

4111
theme/blocks/editor.js
View File

File diff suppressed because it is too large Load Diff

19
theme/blocks/index.php
View File

@@ -339,6 +339,7 @@ add_action('init', function () {
'description' => ['type' => 'string', 'default' => ''],
'visual' => ['type' => 'string', 'default' => ''],
'reversed' => ['type' => 'boolean', 'default' => false],
'cloudAnim' => ['type' => 'boolean', 'default' => false],
'imgId' => ['type' => 'number', 'default' => 0],
'imgUrl' => ['type' => 'string', 'default' => ''],
'imgAlt' => ['type' => 'string', 'default' => ''],
@@ -972,7 +973,20 @@ function oribi_render_intro_section($a)
<h2 style="margin-bottom:1.5rem;"><?php echo wp_kses_post($a['heading']); ?></h2>
<p class="lead"><?php echo wp_kses_post($a['description']); ?></p>
</div>
<div class="about-intro-visual"<?php echo $ltr; ?>><?php echo wp_kses_post($a['visual']); ?></div>
<div class="about-intro-visual<?php echo !empty($a['cloudAnim']) ? ' has-cloud-anim' : ''; ?>"<?php echo $ltr; ?>>
<?php
if (!empty($a['cloudAnim'])) {
echo '<div class="ds-anim-container">';
echo '<div class="ds-tv"><i class="fas fa-tv" aria-hidden="true"></i><div class="ds-tv-screen"></div></div>';
echo '<div class="ds-line"><div class="ds-packet ds-packet-1"></div><div class="ds-packet ds-packet-2"></div><div class="ds-packet ds-packet-3"></div></div>';
echo '<div class="ds-cloud"><i class="fas fa-cloud" aria-hidden="true"></i></div>';
echo '</div>';
}
else {
echo wp_kses_post($a['visual']);
}
?>
</div>
</div>
</div>
</section>
@@ -1650,8 +1664,7 @@ function oribi_render_camera_animation()
<rect id="ve-playhead-line" x="103" y="220" width="2" height="68" fill="#FF4500" opacity="0.92"/>
<!-- Timecode display -->
<text id="ve-timecode" x="36" y="230" fill="#8a8e98" font-size="8" font-family="monospace">0:00</text>
</svg></div>
HTML;
</svg></div>HTML;
}
function oribi_render_platform_row($a)