<?php
/*
|--------------------------------------------------------------------------
| HYRO ONE Experience
|--------------------------------------------------------------------------
| Component : Homepage Product Preview
|--------------------------------------------------------------------------
*/
?>

<section class="homepage-preview-section" id="solutions">

    <div class="hyro-container">

        <div class="homepage-preview-layout">

            <div class="homepage-preview-content">

                <div class="homepage-section-eyebrow">
                    SIMPLE. POWERFUL. CONNECTED.
                </div>

                <h2>
                    Everything your business needs,
                    beautifully organized
                </h2>

                <p>
                    HYRO ONE brings customers, sales, appointments,
                    payments and daily operations together in one
                    simple cloud workspace.
                </p>

                <div class="homepage-preview-benefits">

                    <div class="homepage-preview-benefit">
                        <span>✓</span>

                        <div>
                            <strong>One clear dashboard</strong>

                            <small>
                                See the most important information
                                without opening multiple screens.
                            </small>
                        </div>
                    </div>

                    <div class="homepage-preview-benefit">
                        <span>✓</span>

                        <div>
                            <strong>Easy for your team</strong>

                            <small>
                                A clean interface designed for fast
                                daily business operations.
                            </small>
                        </div>
                    </div>

                    <div class="homepage-preview-benefit">
                        <span>✓</span>

                        <div>
                            <strong>Access from any device</strong>

                            <small>
                                Use HYRO ONE from your computer,
                                tablet or mobile device.
                            </small>
                        </div>
                    </div>

                </div>

                <a
                    href="#book-demo"
                    class="hyro-button hyro-button-primary"
                >
                    See HYRO ONE in Action →
                </a>

            </div>

            <div class="homepage-app-window">

                <div class="homepage-app-toolbar">

                    <div class="homepage-app-dots">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>

                    <div class="homepage-app-address">
                        app.hyroone.com
                    </div>

                    <div class="homepage-app-cloud">
                        ● Online
                    </div>

                </div>

                <div class="homepage-app-body">

                    <aside class="homepage-app-sidebar">

                        <div class="homepage-app-logo">
                            HYRO ONE
                        </div>

                        <div class="homepage-app-menu active">
                            Dashboard
                        </div>

                        <div class="homepage-app-menu">
                            Customers
                        </div>

                        <div class="homepage-app-menu">
                            Appointments
                        </div>

                        <div class="homepage-app-menu">
                            Sales
                        </div>

                        <div class="homepage-app-menu">
                            Reports
                        </div>

                    </aside>

                    <div class="homepage-app-content">

                        <div class="homepage-app-header">

                            <div>
                                <small>Welcome back</small>
                                <strong>Business Dashboard</strong>
                            </div>

                            <div class="homepage-app-avatar">
                                H
                            </div>

                        </div>

                        <div class="homepage-app-stats">

                            <div class="homepage-app-stat">
                                <span>Customers</span>
                                <strong>1,248</strong>
                                <small>+12% this month</small>
                            </div>

                            <div class="homepage-app-stat">
                                <span>Appointments</span>
                                <strong>36</strong>
                                <small>Today</small>
                            </div>

                            <div class="homepage-app-stat">
                                <span>Revenue</span>
                                <strong>AED 18,450</strong>
                                <small>This month</small>
                            </div>

                        </div>

                        <div class="homepage-app-panels">

                            <div class="homepage-app-panel large">

                                <div class="homepage-app-panel-title">
                                    Business Performance
                                </div>

                                <div class="homepage-chart-bars">
                                    <span style="height:38%"></span>
                                    <span style="height:55%"></span>
                                    <span style="height:44%"></span>
                                    <span style="height:72%"></span>
                                    <span style="height:64%"></span>
                                    <span style="height:86%"></span>
                                    <span style="height:76%"></span>
                                </div>

                            </div>

                            <div class="homepage-app-panel">

                                <div class="homepage-app-panel-title">
                                    Today
                                </div>

                                <div class="homepage-app-list-item">
                                    <span>09:30</span>
                                    <strong>Customer Booking</strong>
                                </div>

                                <div class="homepage-app-list-item">
                                    <span>11:00</span>
                                    <strong>Service Appointment</strong>
                                </div>

                                <div class="homepage-app-list-item">
                                    <span>02:30</span>
                                    <strong>New Customer</strong>
                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

</section>
