@extends('layouts.app')
 
@section('title', 'Home')
 
@section('contents')
<section class="home bd-grid" id="home">
                <div class="home__data">
                    <h1 class="home__title">Welcome,<br>Pose<span class="home__title-color"> Detection</span><br> Website</h1>

                    <a href="{{ route('realtime') }}" class="button">Coba Deteksi</a>
                </div>

                <div class="home__social">
                
                </div>

                <div class="home__img">
                    <svg class="home__blob" viewBox="0 0 479 467" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                        <mask id="mask0" mask-type="alpha">
                            <path d="M9.19024 145.964C34.0253 76.5814 114.865 54.7299 184.111 29.4823C245.804 6.98884 311.86 -14.9503 370.735 14.143C431.207 44.026 467.948 107.508 477.191 174.311C485.897 237.229 454.931 294.377 416.506 344.954C373.74 401.245 326.068 462.801 255.442 466.189C179.416 469.835 111.552 422.137 65.1576 361.805C17.4835 299.81 -17.1617 219.583 9.19024 145.964Z"/>
                        </mask>
                        <g mask="url(#mask0)">
                            <path d="M9.19024 145.964C34.0253 76.5814 114.865 54.7299 184.111 29.4823C245.804 6.98884 311.86 -14.9503 370.735 14.143C431.207 44.026 467.948 107.508 477.191 174.311C485.897 237.229 454.931 294.377 416.506 344.954C373.74 401.245 326.068 462.801 255.442 466.189C179.416 469.835 111.552 422.137 65.1576 361.805C17.4835 299.81 -17.1617 219.583 9.19024 145.964Z"/>
                            <image class="home__blob-img" x="90" y="30" href="{{asset('assets/img/silat.png')}}"/>
                        </g>
                    </svg>
                </div>
            </section>
            <!--===== ABOUT =====-->
            <section class="about section " id="about">
                <h2 class="section-title">About</h2>
                 <div class="about__container bd-grid">
                    <div class="about__img">
                        <img src="{{asset('assets/img/silat.png')}}" alt="">
                    </div>
                    
                    <div>
                        <h2 class="about__subtitle">PoseAI</h2>
                        <p class="about__text">Merupakan website untuk deteksi 7 gerakan pada jurus 1 tangan kosong IPSI. Menggunakan teknologi AI yaitu Mediapipe untuk model deteksinya.</p>           
                    </div>                                   
                </div>
            </section>
@endsection