Loading...
Back

#Video Feature Highlights

video

Presents a video demonstration alongside a bulleted list of key features showcased within the video.

PRODUCT DEMO

See It In Action

Watch our comprehensive demo video and discover the powerful features that can elevate your projects and streamline your workflow.

Key Features Highlighted:

  • Advanced Automation

    Streamline your most complex workflows with our powerful and intuitive automation engine.

  • Insightful Analytics

    Gain deep, actionable insights with our comprehensive and customizable analytics dashboard.

  • Seamless Collaboration

    Work together more effectively with integrated team collaboration tools and real-time updates.

  • Robust Security

    Protect your valuable data with enterprise-grade security features and protocols.

Learn More About All Features 
<section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16">
    <div class="text-center mb-10 lg:mb-16">
        <div class="mx-auto mb-3 w-min whitespace-nowrap rounded-lg bg-blue-100 px-3 py-1 text-blue-600">
            <p class="text-sm font-bold uppercase tracking-wider">PRODUCT DEMO</p>
        </div>
        <h2 class="text-3xl lg:text-6xl font-bold capitalize mb-4">
            See It In Action
        </h2>
        <p class="text-lg lg:text-xl max-w-2xl mx-auto text-neutral-700">
            Watch our comprehensive demo video and discover the powerful features that can elevate your projects and streamline your workflow.
        </p>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-start">
        <!-- Video Player -->
        <div class="sticky top-28">
             <div class="bg-neutral-200 rounded-xl overflow-hidden aspect-video shadow-2xl">
                <iframe src="https://www.youtube.com/embed/YgGzAKP_HuM" title="Product demo video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="w-full h-full"></iframe>
            </div>
        </div>

        <!-- Feature Bullets -->
        <div class="p-2 lg:p-6 rounded-lg">
            <h3 class="text-2xl lg:text-4xl font-semibold mb-8 text-neutral-800">Key Features Highlighted:</h3>
            <ul class="space-y-6">
                <li class="flex items-start group">
                    <div class="flex-shrink-0 w-12 h-12 rounded-xl bg-blue-100 text-blue-600 flex items-center justify-center mr-5 text-2xl transition-all duration-300 group-hover:bg-blue-600 group-hover:text-white group-hover:scale-110">
                        <i class="fas fa-cogs"></i>
                    </div>
                    <div>
                        <h4 class="text-xl font-semibold text-neutral-900">Advanced Automation</h4>
                        <p class="text-lg text-neutral-600 mt-1">Streamline your most complex workflows with our powerful and intuitive automation engine.</p>
                    </div>
                </li>
                <li class="flex items-start group">
                    <div class="flex-shrink-0 w-12 h-12 rounded-xl bg-blue-100 text-blue-600 flex items-center justify-center mr-5 text-2xl transition-all duration-300 group-hover:bg-blue-600 group-hover:text-white group-hover:scale-110">
                        <i class="fas fa-chart-pie"></i>
                    </div>
                    <div>
                        <h4 class="text-xl font-semibold text-neutral-900">Insightful Analytics</h4>
                        <p class="text-lg text-neutral-600 mt-1">Gain deep, actionable insights with our comprehensive and customizable analytics dashboard.</p>
                    </div>
                </li>
                <li class="flex items-start group">
                    <div class="flex-shrink-0 w-12 h-12 rounded-xl bg-blue-100 text-blue-600 flex items-center justify-center mr-5 text-2xl transition-all duration-300 group-hover:bg-blue-600 group-hover:text-white group-hover:scale-110">
                        <i class="fas fa-users-cog"></i>
                    </div>
                    <div>
                        <h4 class="text-xl font-semibold text-neutral-900">Seamless Collaboration</h4>
                        <p class="text-lg text-neutral-600 mt-1">Work together more effectively with integrated team collaboration tools and real-time updates.</p>
                    </div>
                </li>
                <li class="flex items-start group">
                    <div class="flex-shrink-0 w-12 h-12 rounded-xl bg-blue-100 text-blue-600 flex items-center justify-center mr-5 text-2xl transition-all duration-300 group-hover:bg-blue-600 group-hover:text-white group-hover:scale-110">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <div>
                        <h4 class="text-xl font-semibold text-neutral-900">Robust Security</h4>
                        <p class="text-lg text-neutral-600 mt-1">Protect your valuable data with enterprise-grade security features and protocols.</p>
                    </div>
                </li>
            </ul>
             <a href="#learn-more" class="mt-10 inline-flex items-center bg-blue-600 hover:bg-blue-700 text-white text-lg rounded-lg px-8 py-4 font-semibold transition-colors duration-300 shadow-md hover:shadow-lg group">
                Learn More About All Features <i class="fas fa-arrow-right ml-2 transform transition-transform group-hover:translate-x-1"></i>
            </a>
        </div>
    </div>
</section>

PRODUCT DEMO

See It In Action

Watch our comprehensive demo video and discover the powerful features that can elevate your projects and streamline your workflow.

Key Features Highlighted:

  • Advanced Automation

    Streamline your most complex workflows with our powerful and intuitive automation engine.

  • Insightful Analytics

    Gain deep, actionable insights with our comprehensive and customizable analytics dashboard.

  • Seamless Collaboration

    Work together more effectively with integrated team collaboration tools and real-time updates.

  • Robust Security

    Protect your valuable data with enterprise-grade security features and protocols.

Learn More About All Features 
<section layout="container" space="m-x:auto m-y:large p-x:medium-3x tw-lg:m-y:big-3x tw-lg:p-x:big-3x">
    <div space="m-b:large-3x tw-lg:m-b:big-3x" visual="text:center">
        <div space="m-x:auto m-b:small-3x w:[min-content] p-x:small-3x p-y:tiny" visual="rounded:medium bg:blue-100 text:blue-600" class="whitespace-nowrap">
            <p visual="text-size:small font:tw-bold uppercase" class="tracking-wider">PRODUCT DEMO</p>
        </div>
        <h2 space="m-b:medium" visual="text-size:grand tw-lg:text-size:mega font:tw-bold capitalize">
            See It In Action
        </h2>
        <p space="max-w:[2xl] m-x:auto" visual="text-size:large tw-lg:text-size:big text:neutral-700">
            Watch our comprehensive demo video and discover the powerful features that can elevate your projects and streamline your workflow.
        </p>
    </div>

    <div layout="grid grid-cols:1 tw-lg:grid-cols:2 items:start" space="g:large tw-lg:g:big">
        <!-- Video Player -->
        <div layout="sticky top:giant-2x">
             <div layout="overflow:hidden" visual="bg:neutral-200 rounded:medium shadow:giant" class="aspect-video">
                <iframe src="https://www.youtube.com/embed/YgGzAKP_HuM" title="Product demo video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen space="w:[100%] h:[100%]"></iframe>
            </div>
        </div>

        <!-- Feature Bullets -->
        <div space="p:small tw-lg:p:medium-3x" visual="rounded:medium">
            <h3 space="m-b:large" visual="text-size:huge tw-lg:text-size:giant font:tw-semibold text:neutral-800">Key Features Highlighted:</h3>
            <ul class="space-y-6">
                <li layout="flex items:start" class="group">
                    <div layout="shrink-0 flex items:center justify:center" space="w:big h:big m-r:medium-2x" visual="rounded:medium bg:blue-100 text:blue-600 text-size:huge transition:all duration:slow" class="group-hover:bg-blue-600 group-hover:text-white group-hover:scale-110">
                        <i class="fas fa-cogs"></i>
                    </div>
                    <div>
                        <h4 visual="text-size:big font:tw-semibold text:neutral-900">Advanced Automation</h4>
                        <p space="m-t:tiny" visual="text-size:large text:neutral-600">Streamline your most complex workflows with our powerful and intuitive automation engine.</p>
                    </div>
                </li>
                <li layout="flex items:start" class="group">
                    <div layout="shrink-0 flex items:center justify:center" space="w:big h:big m-r:medium-2x" visual="rounded:medium bg:blue-100 text:blue-600 text-size:huge transition:all duration:slow" class="group-hover:bg-blue-600 group-hover:text-white group-hover:scale-110">
                        <i class="fas fa-chart-pie"></i>
                    </div>
                    <div>
                        <h4 visual="text-size:big font:tw-semibold text:neutral-900">Insightful Analytics</h4>
                        <p space="m-t:tiny" visual="text-size:large text:neutral-600">Gain deep, actionable insights with our comprehensive and customizable analytics dashboard.</p>
                    </div>
                </li>
                <li layout="flex items:start" class="group">
                    <div layout="shrink-0 flex items:center justify:center" space="w:big h:big m-r:medium-2x" visual="rounded:medium bg:blue-100 text:blue-600 text-size:huge transition:all duration:slow" class="group-hover:bg-blue-600 group-hover:text-white group-hover:scale-110">
                        <i class="fas fa-users-cog"></i>
                    </div>
                    <div>
                        <h4 visual="text-size:big font:tw-semibold text:neutral-900">Seamless Collaboration</h4>
                        <p space="m-t:tiny" visual="text-size:large text:neutral-600">Work together more effectively with integrated team collaboration tools and real-time updates.</p>
                    </div>
                </li>
                <li layout="flex items:start" class="group">
                    <div layout="shrink-0 flex items:center justify:center" space="w:big h:big m-r:medium-2x" visual="rounded:medium bg:blue-100 text:blue-600 text-size:huge transition:all duration:slow" class="group-hover:bg-blue-600 group-hover:text-white group-hover:scale-110">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <div>
                        <h4 visual="text-size:big font:tw-semibold text:neutral-900">Robust Security</h4>
                        <p space="m-t:tiny" visual="text-size:large text:neutral-600">Protect your valuable data with enterprise-grade security features and protocols.</p>
                    </div>
                </li>
            </ul>
             <a href="#learn-more" layout="inline-flex items:center" space="m-t:large-3x p-x:large p-y:medium" visual="bg:blue-600 hover:bg:blue-700 text:white text-size:large rounded:medium font:tw-semibold transition:colors duration:slow shadow:medium hover:shadow:big" class="group">
                Learn More About All Features <i space="m-l:small" visual="transition:transform" class="fas fa-arrow-right transform group-hover:translate-x-1"></i>
            </a>
        </div>
    </div>
</section>