@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 Digicare<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/page.png')}}" style="width: 100%; margin-top: 20px">
                                    {{-- <img src="{{asset('assets/client/assets/img/page.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">“If you want to grow a giant redwood, you need to make sure the seeds are ok, nurture the sapling and work out what might potentially stop it from growing all the way along. Anything that breaks it at any point stops that growth.”</div>
                    <div class="h2 fs-1 text-white mb-4">—Elon Musk </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/page.png')}}" style="width: 100%; margin-top: 20px">
                                    {{-- <img src="{{asset('assets/client/assets/img/page.png')}}" style="width: 100%; margin-top: 20px"> --}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection