@extends('client.layouts.app')

@section('content')
    <!-- Mashead header-->
    <header class="masthead">
        <div class="container px-5">
            <div class="row gx-5 align-items-center">
                <div class="col-lg-6">
                    <!-- Mashead text and app badges-->
                    <div class="mb-5 mb-lg-0 text-center text-lg-start">
                        <h1 class="display-1 lh-1">Apps for Elefan <br></h1><h2 class="display-2 lh-1 mb-3">Office Operations </h2>
                        <p class="lead fw-normal text-muted mb-5">Attendance, Activity Monitoring, <br>Accounting Finance, etc </p>
                    </div>
                </div>
                <div class="col-lg-6">
                    <!-- Masthead device mockup feature-->
                    <div class="masthead-device-mockup">
                        <svg class="circle" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
                            <defs>
                                <linearGradient id="circleGradient" gradientTransform="rotate(45)">
                                    <stop class="gradient-start-color" offset="0%"></stop>
                                    <stop class="gradient-end-color" offset="100%"></stop>
                                </linearGradient>
                            </defs>
                            <circle cx="50" cy="50" r="50"></circle>
                        </svg>
                        <svg class="shape-1 d-none d-sm-block" viewBox="0 0 240.83 240.83" xmlns="http://www.w3.org/2000/svg">
                            <rect x="-32.54" y="78.39" width="305.92" height="84.05" rx="42.03" transform="translate(120.42 -49.88) rotate(45)"></rect>
                            <rect x="-32.54" y="78.39" width="305.92" height="84.05" rx="42.03" transform="translate(-49.88 120.42) rotate(-45)"></rect>
                        </svg>
                        <svg class="shape-2 d-none d-sm-block" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50"></circle></svg>
                        <div class="device-wrapper">
                            <div class="device" data-device="iPhoneX" data-orientation="portrait" data-color="black">
                                <div class="screen bg-black">
                                    {{-- <video muted="muted" autoplay="" loop="" style="max-width: 100%; height: 100%"><source src="{{ asset('assets/client/assets/img/demo-screen.mp4') }}" type="video/mp4" /></video> --}}
                                    <img src="{{asset('assets/client/assets/img/page1.png')}}" style="width: 100%; margin-top: 20px">
                                    {{-- <img src="{{asset('assets/client/assets/img/page2.png')}}" style="width: 100%; margin-top: 20px"> --}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <!-- Quote/testimonial aside-->
    <aside class="text-center bg-gradient-primary-to-secondary">
        <div class="container px-5">
            <div class="row gx-5 justify-content-center">
                <div class="col-xl-8">
                    <div class="h2 fs-1 text-white mb-4">"Always do your best. <br>What you plant now, you will harvest later." </div>
                    <div class="h2 fs-1 text-white mb-4">—Og Mandino </div>

                </div>
            </div>
        </div>
    </aside>
    <!-- App features section-->
    <section id="features">
        <div class="container px-5">
            <div class="row gx-5 align-items-center">
                <div class="col-lg-8 order-lg-1 mb-5 mb-lg-0">
                    <div class="container-fluid px-5">
                        <div class="row gx-5">
                            <div class="col-md-6 mb-5">
                                <!-- Feature item-->
                                <div class="text-center">
                                    <i class="bi-bookmark-check icon-feature text-gradient d-block mb-3"></i>
                                    <h3 class="font-alt">Attendance</h3>
                                    <p class="text-muted mb-0">Presensi, izin, cuti karyawan!</p>
                                </div>
                            </div>
                            <div class="col-md-6 mb-5">
                                <!-- Feature item-->
                                <div class="text-center">
                                    <i class="bi-briefcase icon-feature text-gradient d-block mb-3"></i>
                                    <h3 class="font-alt">Activity</h3>
                                    <p class="text-muted mb-0">Pantau evidence kegiatan karyawan!</p>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-5 mb-md-0">
                                <!-- Feature item-->
                                <div class="text-center">
                                    <i class="bi-cash-coin icon-feature text-gradient d-block mb-3"></i>
                                    <h3 class="font-alt">Finance</h3>
                                    <p class="text-muted mb-0">Catatan keuangan perusahaan!</p>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <!-- Feature item-->
                                <div class="text-center">
                                    <i class="bi-bell icon-feature text-gradient d-block mb-3"></i>
                                    <h3 class="font-alt">Notification</h3>
                                    <p class="text-muted mb-0">Notifikasi ke seluruh pegawai!</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 order-lg-0">
                    <!-- Features section device mockup-->
                    <div class="features-device-mockup">
                        <svg class="circle" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
                            <defs>
                                <linearGradient id="circleGradient" gradientTransform="rotate(45)">
                                    <stop class="gradient-start-color" offset="0%"></stop>
                                    <stop class="gradient-end-color" offset="100%"></stop>
                                </linearGradient>
                            </defs>
                            <circle cx="50" cy="50" r="50"></circle>
                        </svg>
                        <svg class="shape-1 d-none d-sm-block" viewBox="0 0 240.83 240.83" xmlns="http://www.w3.org/2000/svg">
                            <rect x="-32.54" y="78.39" width="305.92" height="84.05" rx="42.03" transform="translate(120.42 -49.88) rotate(45)"></rect>
                            <rect x="-32.54" y="78.39" width="305.92" height="84.05" rx="42.03" transform="translate(-49.88 120.42) rotate(-45)"></rect>
                        </svg>
                        <svg class="shape-2 d-none d-sm-block" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50"></circle></svg>
                        <div class="device-wrapper">
                            <div class="device" data-device="iPhoneX" data-orientation="portrait" data-color="black">
                                <div class="screen bg-black">
                                    {{-- <video muted="muted" autoplay="" loop="" style="max-width: 100%; height: 100%"><source src="{{ asset('assets/client/assets/img/demo-screen.mp4') }}" type="video/mp4" /></video> --}}
                                    <img src="{{asset('assets/client/assets/img/page1.png')}}" style="width: 100%; margin-top: 20px">
                                    {{-- <img src="{{asset('assets/client/assets/img/page2.png')}}" style="width: 100%; margin-top: 20px"> --}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection