<?php
/*
|--------------------------------------------------------------------------
| HYRO ONE Experience
|--------------------------------------------------------------------------
| Component : Homepage Products Section
|--------------------------------------------------------------------------
*/
?>

<section class="homepage-products-section" id="products">

    <div class="hyro-container">

        <div class="homepage-section-heading">

            <div class="homepage-section-eyebrow">
                OUR PRODUCTS
            </div>

            <h2>
                Software built for the way your business works
            </h2>

            <p>
                Start with the product you need today and expand
                with HYRO ONE as your business grows.
            </p>

        </div>

        <div class="homepage-products-grid">

            <article class="homepage-product-card featured">

                <div class="homepage-product-topline">

                    <div class="homepage-product-icon">
                        🌸
                    </div>

                    <span class="homepage-product-status live">
                        Available Now
                    </span>

                </div>

                <h3>HYRO ONE SPA</h3>

                <p>
                    Cloud software for spas and salons to manage
                    customers, appointments, services, packages,
                    billing and daily operations.
                </p>

                <ul class="homepage-product-features">
                    <li>Customer Management</li>
                    <li>Appointments & Walk-ins</li>
                    <li>POS & Invoicing</li>
                    <li>Packages & Inventory</li>
                </ul>

                <div class="homepage-product-actions">

                    <a
                        href="#free-trial"
                        class="hyro-button hyro-button-primary"
                    >
                        Start Free Trial
                    </a>

                    
                    <a
    href="/experience/spa.php"
    class="homepage-product-link"
>
    Explore HYRO ONE SPA →
</a>
                    
                </div>

            </article>

            <article class="homepage-product-card">

                <div class="homepage-product-topline">

                    <div class="homepage-product-icon">
                        🏋️
                    </div>

                    <span class="homepage-product-status live">
                        Available Now
                    </span>

                </div>

                <h3>HYRO ONE Gym</h3>

                <p>
                    Manage memberships, trainers, attendance,
                    subscriptions, payments and complete gym
                    operations from the cloud.
                </p>

                <ul class="homepage-product-features">
                    <li>Member Management</li>
                    <li>Membership Plans</li>
                    <li>Attendance Tracking</li>
                    <li>Payments & Reports</li>
                </ul>

                <div class="homepage-product-actions">

                    <a
                        href="#free-trial"
                        class="hyro-button hyro-button-primary"
                    >
                        Start Free Trial
                    </a>

                    <a
                        href="#book-demo"
                        class="homepage-product-link"
                    >
                        Book Demo →
                    </a>

                </div>

            </article>

            <article class="homepage-product-card">

                <div class="homepage-product-topline">

                    <div class="homepage-product-icon">
                        📊
                    </div>

                    <span class="homepage-product-status live">
                        Available Now
                    </span>

                </div>

                <h3>HYRO ONE Accounting</h3>

                <p>
                    Simple online accounting software for invoices,
                    expenses, payments, financial reports and daily
                    business control.
                </p>

                <ul class="homepage-product-features">
                    <li>Sales & Purchase</li>
                    <li>Receipts & Payments</li>
                    <li>Expense Management</li>
                    <li>Financial Reports</li>
                </ul>

                <div class="homepage-product-actions">

                    <a
                        href="#free-trial"
                        class="hyro-button hyro-button-primary"
                    >
                        Start Free Trial
                    </a>

                    <a
                        href="#book-demo"
                        class="homepage-product-link"
                    >
                        Book Demo →
                    </a>

                </div>

            </article>

        </div>

        <div class="homepage-coming-products">

            <div class="homepage-coming-heading">
                More products are coming to HYRO ONE
            </div>

            <div class="homepage-coming-grid">

                <div class="homepage-coming-item">
                    <span>🛍️</span>
                    <strong>Retail</strong>
                    <small>Coming Soon</small>
                </div>

                <div class="homepage-coming-item">
                    <span>🍽️</span>
                    <strong>Restaurant</strong>
                    <small>Coming Soon</small>
                </div>

                <div class="homepage-coming-item">
                    <span>🏫</span>
                    <strong>School</strong>
                    <small>Coming Soon</small>
                </div>

                <div class="homepage-coming-item">
                    <span>🤝</span>
                    <strong>CRM</strong>
                    <small>Coming Soon</small>
                </div>

                <div class="homepage-coming-item">
                    <span>🏥</span>
                    <strong>Clinic</strong>
                    <small>Coming Soon</small>
                </div>

                <div class="homepage-coming-item">
                    <span>👥</span>
                    <strong>HRM</strong>
                    <small>Coming Soon</small>
                </div>

            </div>

        </div>

    </div>

</section>
