<?php /*template name: Product:Portable*/ get_header(); ?>

<div class="uk-cover-container banner back-right" uk-scrollspy="cls: uk-animation-fade; delay: 300">
	<canvas class="uk-visible@m" width="" height="250"></canvas>
	<canvas class="uk-hidden@m" width="" height="450"></canvas>

	<img uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/portable-telestrator-product-hero-1.webp"  uk-cover>

	<div class="uk-position-cover uk-text-center uk-container uk-container-large uk-flex uk-flex-center uk-flex-middle" uk-scrollspy="cls: uk-animation-fade; delay: 500">
		<div>
			<h1 class="white">Portable Telestrator</h1>
		</div>
	</div>
</div>

<div class="uk-container uk-container-large">
  <div class="uk-child-width-1-2@m uk-margin-large-top uk-grid-large uk-flex uk-flex-middle uk-margin-large-bottom" uk-grid>
    <div>
      <h6 uk-scrollspy="cls: uk-animation-fade; delay: 300" class="blue uk-margin-medium-top uk-margin-remove">Compact performance, full capability</h6>
      <h2 uk-scrollspy="cls: uk-animation-fade; delay: 300" class="uk-margin-remove-top">Portable Telestrator — Broadcast Tools You Can Carry</h2>
      <p uk-scrollspy="cls: uk-animation-fade; delay: 300" class="uk-margin-medium-top uk-margin-medium-bottom">Take professional telestration on the go with a powerful portable unit designed for mobile production and field workflows. It delivers real-time visual annotation without compromising the performance broadcasters demand.</p>
      <a uk-scrollspy="cls: uk-animation-fade; delay: 300" href="<?php echo home_url(); ?>/contact" class="blue-btn">Inquire About this Product</a>
    </div>
    <div>
      <img uk-scrollspy="cls: uk-animation-fade; delay: 300" class="rounded" uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/fingerworks-portable-telestrator-product@2x.webp">
    </div>
  </div>
</div>

<div class="uk-container">
  <h2 uk-scrollspy="cls: uk-animation-fade; delay: 300" class="uk-text-center">Why Choose the Portable Telestrator</h2>
  <div class="uk-child-width-1-3@m uk-text-center uk-grid-large uk-flex uk-flex-center uk-margin-large-top" uk-grid uk-scrollspy="target: > div; cls: uk-animation-fade; delay: 300">
    <div>
      <div class="icon-circle">
        <i class="fa-regular fa-tower-broadcast"></i>
      </div>
      <p>Designed for live events, remote shoots, and mobile productions.</p>
    </div>
    <div>
      <div class="icon-circle">
        <i class="fa-solid fa-minimize"></i>
      </div>
      <p>Full broadcast-grade capabilities in a compact, rugged form.</p>
    </div>
    <div>
      <div class="icon-circle">
        <i class="fa-solid fa-location-dot"></i>
      </div>
      <p>Ideal when you need telestration at the venue — not back in the studio.</p>
    </div>
  </div>
</div>

<div class="uk-container uk-container-large">
  <h2 uk-scrollspy="cls: uk-animation-fade; delay: 300" class="uk-text-center uk-margin-large-top">Key Features</h2>
  <div class="uk-child-width-1-3@m uk-flex uk-flex-center" uk-grid uk-scrollspy="target: > div; cls: uk-animation-fade; delay: 300">
    <div>
      <h4><i class="fa-solid fa-pen-nib blue"></i> Real Time Telestration</h4>
      <p>Full graphics support for fast and clear on screen drawing.</p>
    </div>
    <div>
      <h4><i class="fa-solid fa-crosshairs blue"></i> Computer Vision Tracking</h4>
      <p>Automatic player and field tracking for precise annotations.</p>
    </div>
    <div>
      <h4><i class="fa-solid fa-plug-circle-bolt blue"></i> SDI and NDI Compatibility</h4>
      <p>Multiple video input compatibility (SDI / NDI).</p>
    </div>
    <div>
      <h4><i class="fa-solid fa-video blue"></i> Stable Pan and Zoom</h4>
      <p>Smooth panning/zoom stability — tools stay locked while video moves.</p>
    </div>
    <div>
      <h4><i class="fa-solid fa-share-nodes blue"></i> Social Media Integration</h4>
      <p>Inject live content into your broadcasts through the cloud.</p>
    </div>
    <div>
      <h4><i class="fa-solid fa-hand-pointer blue"></i> Simple Interface</h4>
      <p>Easy-to-use interface — minimal training for operators.</p>
    </div>
  </div>
</div>

<div class="grey-bg uk-margin-large-top uk-margin-large-bottom">
  <div class="uk-container">
    <h6 uk-scrollspy="cls: uk-animation-fade; delay: 300" class="blue uk-text-center uk-margin-large-top uk-margin-remove-bottom">EASY INTEGRATION</h6>
    <h2 uk-scrollspy="cls: uk-animation-fade; delay: 300" class="uk-text-center uk-margin-remove-top uk-margin-medium-bottom">Typical Applications</h2>
    <div uk-scrollspy="cls: uk-animation-fade; delay: 300" class="uk-child-width-1-4@m uk-text-center uk-grid-large uk-margin-large-bottom" uk-grid>
      <div><p>On-field sports coverage and mobile broadcasts</p></div>
      <div><p>Live events, conferences, or pickup games</p></div>
      <div><p>Remote production setups or outside broadcast trucks</p></div>
      <div><p>Educational or presentation settings where mobility matters</p></div>
    </div>
  </div>
</div>

<div class="uk-container">
  <h2 uk-scrollspy="cls: uk-animation-fade; delay: 300" class="uk-text-center">Hardware &amp; Details</h2>
  <div class="uk-width-1-2@m uk-margin-auto">
    <div class="rounded grey-bg uk-padding uk-margin-large-top uk-margin-large-bottom" uk-scrollspy="cls: uk-animation-fade; delay: 300">
      <h4 class="blue uk-margin-remove-top">Overview:</h4>
      <ul>
        <li>Integrated video I/O cards (SDI/NDI) </li>
        <li>High-end GPU supporting real-time rendering </li>
        <li>Sufficient CPU, RAM, and SSD specs for stable live performance</li>
        <li>Robust enclosure and cooling for field durability</li>
      </ul>
      <p class="uk-text-bold">Note: Configurations can be tailored to your production scale. Let us assist you in selecting optimal I/O and hardware options depending on your use case.</p>
    </div>
  </div>
  <div class="uk-child-width-1-2@m uk-text-center uk-grid-large uk-flex uk-flex-center uk-margin-xlarge-top" uk-grid uk-scrollspy="target: > div; cls: uk-animation-fade; delay: 300">
    <div>
      <div class="icon-circle">
        <i class="fa-regular fa-chart-diagram"></i>
      </div>
      <h2>Integration &amp; Workflow</h2>
      <p>The Portable Telestrator fits into live workflows seamlessly — ingest video signals, apply live annotations and tracking, feed output into playout or streaming systems. It supports synchronized video and annotation even in mobile environments, and can scale to fixed infrastructure setups later.</p>
    </div>
    <div>
      <div class="icon-circle">
        <i class="fa-regular fa-headset"></i>
      </div>
      <h2>Support &amp; Service</h2>
      <p>Each unit is backed by documentation, setup guides, video tutorials, and remote technical support. Our team ensures you can deploy quickly and troubleshoot reliably in the field.</p>
    </div>
  </div>
</div>

<div class="grey-bg uk-margin-large-top">
  <div class="uk-container">
    <ul class="numbered-accordion uk-margin-large-top uk-margin-large-bottom" uk-accordion uk-scrollspy="cls: uk-animation-fade; delay: 300">
      <li>
        <a class="uk-accordion-title" href="#"><span class="accordion-number">1</span> Can I bring this to any venue?</a>
        <div class="uk-accordion-content">
          <p>Yes — it’s designed for portability and field use.</p>
        </div>
      </li>
      <li>
        <a class="uk-accordion-title" href="#"><span class="accordion-number">2</span> Does it support tracking features?</a>
        <div class="uk-accordion-content">
          <p>Yes — optional computer-vision tracking is supported.</p>
        </div>
      </li>
      <li>
        <a class="uk-accordion-title" href="#"><span class="accordion-number">3</span> How does social media integration work?</a>
        <div class="uk-accordion-content">
          <p>Use FingerWorks Cloud to queue posts and insert them live into your production.</p>
        </div>
      </li>
    </ul>
  </div>
</div>

<div class="black-bg white uk-padding-remove-horizontal uk-padding-large uk-margin-large-bottom" uk-scrollspy="cls: uk-animation-fade; delay: 300">
  <div class="uk-container">
    <h2 class="white uk-text-center uk-margin-medium-top">Interested in the Portable Telestrator?</h2>
    <div class="uk-width-1-2@m uk-margin-auto uk-text-center">
      <p class="uk-margin-medium-top uk-margin-medium-bottom">Tell us about your mobile production needs and we’ll help match you with the right configuration.</p>
    </div>
    <div class="uk-text-center">
      <a href="<?php echo home_url(); ?>/contact" class="blue-btn">Inquire About this Product</a>
    </div>
  </div>
</div>

<div class="uk-container uk-container-expand">
  <h2 uk-scrollspy="cls: uk-animation-fade; delay: 300" class="uk-text-center">Our Products Are Trusted By the Best</h2>
  <div uk-scrollspy="cls: uk-animation-fade; delay: 300" class="uk-width-2-5@m uk-margin-auto uk-text-center">
    <p>For over 25 years, the world’s biggest networks have relied on FingerWorks to tell the game’s most important stories.</p>
  </div>
	<?php get_template_part( 'block-logo-slider' ); ?>

</div>

<?php get_footer(); ?>
