- Created a new Contact Page template with a contact form and information section. - Developed a Home Page template featuring a hero section, core capabilities, and pricing details. - Introduced a Services Page template outlining core services and industry solutions. - Added a default page template for standard pages without a custom template. - Implemented a single post template for displaying individual blog posts. - Created a style.css file for theme metadata and styling.
295 lines
17 KiB
PHP
295 lines
17 KiB
PHP
<?php
|
|
/**
|
|
* Template Name: Home Page
|
|
*/
|
|
get_header();
|
|
?>
|
|
|
|
<!-- ═══════════════════════════════════════════════════════════
|
|
HERO
|
|
════════════════════════════════════════════════════════════════ -->
|
|
<section class="hero">
|
|
<div class="hero-bg-grid"></div>
|
|
<div class="hero-glow"></div>
|
|
<div class="hero-glow-2"></div>
|
|
<div class="container hero-inner">
|
|
|
|
<?php
|
|
$id = get_the_ID();
|
|
$hero_title = ots_meta( $id, 'hero_title', 'Turn any screen into a <span class="highlight">dynamic communication</span> tool for your business.' );
|
|
$hero_desc = ots_meta( $id, 'hero_description', 'The complete package for engaging digital signage. From eye-catching retail displays to dynamic informational screens, we craft tailored solutions that capture attention and deliver your message.' );
|
|
$cta_primary = ots_meta( $id, 'hero_cta_primary_label', 'Get in Touch' );
|
|
$cta_secondary = ots_meta( $id, 'hero_cta_secondary_label', 'View Demo' );
|
|
$stat_1_val = ots_meta( $id, 'stat_1_value', '500+' );
|
|
$stat_1_lbl = ots_meta( $id, 'stat_1_label', 'Screens Managed' );
|
|
$stat_2_val = ots_meta( $id, 'stat_2_value', '6' );
|
|
$stat_2_lbl = ots_meta( $id, 'stat_2_label', 'Industry Verticals' );
|
|
$stat_3_val = ots_meta( $id, 'stat_3_value', '99.9%' );
|
|
$stat_3_lbl = ots_meta( $id, 'stat_3_label', 'Uptime SLA' );
|
|
?>
|
|
<div class="hero-content">
|
|
<span class="hero-label">● Digital Signage Solutions</span>
|
|
<h1 class="hero-title"><?php echo wp_kses_post( $hero_title ); ?></h1>
|
|
<p class="hero-description"><?php echo wp_kses_post( $hero_desc ); ?></p>
|
|
<div class="btn-group">
|
|
<a href="<?php echo esc_url( home_url( '/contact' ) ); ?>" class="btn btn-primary btn-lg"><?php echo esc_html( $cta_primary ); ?></a>
|
|
<a href="https://demo.ots-signs.com" target="_blank" rel="noopener" class="btn btn-ghost btn-lg"><?php echo esc_html( $cta_secondary ); ?> →</a>
|
|
</div>
|
|
<div class="hero-stats">
|
|
<div>
|
|
<div class="hero-stat-value"><?php echo esc_html( $stat_1_val ); ?></div>
|
|
<div class="hero-stat-label"><?php echo esc_html( $stat_1_lbl ); ?></div>
|
|
</div>
|
|
<div>
|
|
<div class="hero-stat-value"><?php echo esc_html( $stat_2_val ); ?></div>
|
|
<div class="hero-stat-label"><?php echo esc_html( $stat_2_lbl ); ?></div>
|
|
</div>
|
|
<div>
|
|
<div class="hero-stat-value"><?php echo esc_html( $stat_3_val ); ?></div>
|
|
<div class="hero-stat-label"><?php echo esc_html( $stat_3_lbl ); ?></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hero-visual">
|
|
<div class="hero-screen-mock">
|
|
<div class="hero-badge hero-badge-2">
|
|
<span class="hero-badge-dot"></span> Live content publishing
|
|
</div>
|
|
<div class="hero-screen-outer">
|
|
<div class="hero-screen-bar">
|
|
<span></span><span></span><span></span>
|
|
</div>
|
|
<div class="hero-screen-content">
|
|
<div class="hero-screen-logo">OTS <span>Signs</span></div>
|
|
<div class="hero-screen-tagline">Live Data Dashboard</div>
|
|
<div class="hero-screen-bars">
|
|
<div></div><div></div><div></div><div></div><div></div><div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="hero-badge hero-badge-1">
|
|
<span class="hero-badge-dot"></span> Offline playback enabled
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════════════════════════════════════════════════════════
|
|
CORE CAPABILITIES
|
|
════════════════════════════════════════════════════════════════ -->
|
|
<section class="section" id="features">
|
|
<div class="container">
|
|
<?php
|
|
$feat_h = ots_meta( $id, 'features_heading', 'Everything You Need for Engaging Digital Signage' );
|
|
$feat_sub = ots_meta( $id, 'features_subheading', 'We provide a complete, end-to-end digital signage solution — from hardware to content management to live data integrations.' );
|
|
?>
|
|
<div class="section-header">
|
|
<span class="section-label">What We Offer</span>
|
|
<h2><?php echo esc_html( $feat_h ); ?></h2>
|
|
<p class="lead"><?php echo wp_kses_post( $feat_sub ); ?></p>
|
|
</div>
|
|
|
|
<div class="grid-4">
|
|
<div class="feature-card">
|
|
<div class="feature-icon">📷</div>
|
|
<h3>Showcase Your Products</h3>
|
|
<p>Professional photography and video production services to showcase your products and services with high-quality, polished visuals.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">📊</div>
|
|
<h3>Live Data Integrations</h3>
|
|
<p>Integrate your existing web dashboards and real-time data with our platform to display up-to-the-minute metrics and insights.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">🍽</div>
|
|
<h3>Digital Menu Boards</h3>
|
|
<p>Make your menu as appealing as your product. We incorporate your branding with high-quality photography to showcase your offerings.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">🔋</div>
|
|
<h3>Offline Playback</h3>
|
|
<p>Our intelligent player devices keep your message on screen even when the internet isn't available — so communication never stops.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════════════════════════════════════════════════════════
|
|
INDUSTRIES
|
|
════════════════════════════════════════════════════════════════ -->
|
|
<section class="section section-dark" id="industries">
|
|
<div class="container">
|
|
<?php
|
|
$ind_h = ots_meta( $id, 'industries_heading', 'Our Services Empower Your Brand' );
|
|
$ind_sub = ots_meta( $id, 'industries_subheading', 'Modern businesses need real-time communication. Digital signage helps you connect with your audience where it matters most.' );
|
|
?>
|
|
<div class="section-header">
|
|
<span class="section-label">Industries We Serve</span>
|
|
<h2><?php echo esc_html( $ind_h ); ?></h2>
|
|
<p class="lead"><?php echo wp_kses_post( $ind_sub ); ?></p>
|
|
</div>
|
|
|
|
<div class="grid-3">
|
|
<div class="industry-card" id="hospitality">
|
|
<div class="industry-card-icon">🏦</div>
|
|
<h3>Hospitality</h3>
|
|
<p>Showcase menus, promotions, and special events while guiding guests through lobbies, restaurants, and bars.</p>
|
|
</div>
|
|
<div class="industry-card" id="retail">
|
|
<div class="industry-card-icon">🛍</div>
|
|
<h3>Retail</h3>
|
|
<p>Drive product upsells, announce flash-sales, and offer in-store navigation with fresh, eye-catching displays.</p>
|
|
</div>
|
|
<div class="industry-card" id="outdoor-marketplace">
|
|
<div class="industry-card-icon">🌃</div>
|
|
<h3>Outdoor Marketplace</h3>
|
|
<p>Whether it's a weekly farmers market or seasonal fair, digital signage adds a modern, professional touch without losing the charm.</p>
|
|
</div>
|
|
<div class="industry-card" id="corporate">
|
|
<div class="industry-card-icon">🏢</div>
|
|
<h3>Corporate Office</h3>
|
|
<p>Enhance your meeting experience with Teams meeting rooms. Communicate schedules, company news, and employee alerts.</p>
|
|
</div>
|
|
<div class="industry-card" id="live-data">
|
|
<div class="industry-card-icon">🔴</div>
|
|
<h3>Live Data Displays</h3>
|
|
<p>Connect existing web dashboards and real-time data to our platform. Bring key metrics and insights to life in real-time.</p>
|
|
</div>
|
|
<div class="industry-card" id="education">
|
|
<div class="industry-card-icon">🏫</div>
|
|
<h3>Education</h3>
|
|
<p>Broadcast class schedules, announcements, and interactive learning content in campuses and auditoriums.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════════════════════════════════════════════════════════
|
|
PLATFORM / TECHNOLOGY
|
|
════════════════════════════════════════════════════════════════ -->
|
|
<section class="section section-alt">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<span class="section-label">Platform</span>
|
|
<h2>Technology Designed to Work for You</h2>
|
|
<p class="lead">Our application platform lets you publish content instantly across any network, with built-in real-time analytics and a secure, cloud-native architecture.</p>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="platform-row">
|
|
<div class="platform-text">
|
|
<h3>Manage All Your Screens in One Place</h3>
|
|
<p>Our cloud CMS offers the power and flexibility to manage digital displays for businesses of all sizes. Whether you're a single location or a multi-site enterprise, our digital signage network is built to grow with you.</p>
|
|
</div>
|
|
<div class="platform-visual">💻</div>
|
|
</div>
|
|
|
|
<div class="platform-row reverse">
|
|
<div class="platform-text">
|
|
<h3>Dynamic Content Scheduling</h3>
|
|
<p>Effortlessly schedule your content for maximum impact. Plan ahead by setting content to play at specific times, daypart, or trigger based on real-world events. Automate your messaging to ensure the right information is displayed at the right time.</p>
|
|
</div>
|
|
<div class="platform-visual">📅</div>
|
|
</div>
|
|
|
|
<div class="platform-row">
|
|
<div class="platform-text">
|
|
<h3>Use Existing Screens</h3>
|
|
<p>Our digital signage players work on any screen with HDMI, so you can easily integrate them into your current setup. We also offer bundled packages that include both the player and a high-quality commercial-grade display.</p>
|
|
</div>
|
|
<div class="platform-visual">📺</div>
|
|
</div>
|
|
|
|
<div class="platform-row reverse">
|
|
<div class="platform-text">
|
|
<h3>Secure & Reliable</h3>
|
|
<p>Enterprise-grade security safeguards your content and network, while our advanced hosting platform guarantees rock-solid reliability. Our intelligent player devices continue playing content even when offline, so your communication never misses a beat.</p>
|
|
</div>
|
|
<div class="platform-visual">🔒</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════════════════════════════════════════════════════════
|
|
PRICING
|
|
════════════════════════════════════════════════════════════════ -->
|
|
<section class="section" id="pricing">
|
|
<div class="container">
|
|
<?php
|
|
$price_h = ots_meta( $id, 'pricing_heading', 'Affordable Solutions, Scalable Options' );
|
|
$price_sub = ots_meta( $id, 'pricing_subheading', 'All plans include content scheduling/day-parting, live data integrations, unlimited user seats, and the ability to publish content to your signs in minutes.' );
|
|
?>
|
|
<div class="section-header">
|
|
<span class="section-label">Pricing</span>
|
|
<h2><?php echo esc_html( $price_h ); ?></h2>
|
|
<p class="lead"><?php echo wp_kses_post( $price_sub ); ?></p>
|
|
</div>
|
|
|
|
<div class="pricing-grid">
|
|
<div class="pricing-card">
|
|
<div class="pricing-name">Essentials</div>
|
|
<div class="pricing-price">
|
|
<div class="pricing-amount"><sup>$</sup>7</div>
|
|
<div class="pricing-per">per screen / month — or $70 / screen annually</div>
|
|
</div>
|
|
<ul class="pricing-features">
|
|
<li><span class="pricing-check">✓</span> Up to 20 screens</li>
|
|
<li><span class="pricing-check">✓</span> Content scheduling & day-parting</li>
|
|
<li><span class="pricing-check">✓</span> Live data integrations</li>
|
|
<li><span class="pricing-check">✓</span> Unlimited user seats</li>
|
|
<li><span class="pricing-check">✓</span> Custom subdomain</li>
|
|
<li><span class="pricing-check">✓</span> Shared CMS server</li>
|
|
</ul>
|
|
<a href="<?php echo esc_url( home_url( '/contact' ) ); ?>" class="btn btn-outline" style="width:100%;justify-content:center;">Get Started</a>
|
|
</div>
|
|
|
|
<div class="pricing-card featured">
|
|
<div class="pricing-badge">Enterprise</div>
|
|
<div class="pricing-name">Pro</div>
|
|
<div class="pricing-price">
|
|
<div class="pricing-amount" style="font-size:1.75rem;">Contact Us</div>
|
|
<div class="pricing-per">Custom pricing for your scale</div>
|
|
</div>
|
|
<ul class="pricing-features">
|
|
<li><span class="pricing-check">✓</span> 500+ screens</li>
|
|
<li><span class="pricing-check">✓</span> Content scheduling & day-parting</li>
|
|
<li><span class="pricing-check">✓</span> Custom live data integrations</li>
|
|
<li><span class="pricing-check">✓</span> Unlimited user seats</li>
|
|
<li><span class="pricing-check">✓</span> Custom domain</li>
|
|
<li><span class="pricing-check">✓</span> Dedicated CMS server</li>
|
|
</ul>
|
|
<a href="<?php echo esc_url( home_url( '/contact' ) ); ?>" class="btn btn-primary" style="width:100%;justify-content:center;">Contact Sales</a>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="text-center mt-4" style="color:var(--color-text-muted);font-size:.9rem;">
|
|
Want to see the platform in action?
|
|
<a href="https://demo.ots-signs.com" target="_blank" rel="noopener" style="color:var(--color-primary);font-weight:600;">Request access to our demo instance →</a>
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════════════════════════════════════════════════════════
|
|
CTA BANNER
|
|
════════════════════════════════════════════════════════════════ -->
|
|
<section class="cta-banner">
|
|
<div class="container">
|
|
<?php
|
|
$cta_h = ots_meta( $id, 'cta_heading', 'Ready to Transform Your Screens?' );
|
|
$cta_txt = ots_meta( $id, 'cta_description', 'Get in touch today and discover how OTS Signs can revolutionize the way you communicate with your audience.' );
|
|
?>
|
|
<h2><?php echo esc_html( $cta_h ); ?></h2>
|
|
<p><?php echo wp_kses_post( $cta_txt ); ?></p>
|
|
<div class="btn-group" style="justify-content:center;">
|
|
<a href="<?php echo esc_url( home_url( '/contact' ) ); ?>" class="btn btn-ghost btn-lg">Get in Touch</a>
|
|
<a href="https://demo.ots-signs.com" target="_blank" rel="noopener" class="btn btn-lg" style="background:#fff;color:var(--color-primary);">View Demo</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<?php get_footer(); ?>
|