@extends('layouts.app')
@section('content')
<section class="bg-white py-28 dark:bg-gray-900 bg-[url('https://flowbite.s3.amazonaws.com/docs/jumbotron/hero-pattern.svg')] dark:bg-[url('https://flowbite.s3.amazonaws.com/docs/jumbotron/hero-pattern-dark.svg')]">
    <div class="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16 z-10 relative">
        @if (!auth()->user())
          <a href="{{ route('register') }}" class="inline-flex justify-between items-center py-1 px-1 pr-4 mb-7 text-sm text-blue-700 bg-blue-100 rounded-full dark:bg-blue-900 dark:text-blue-300 hover:bg-blue-200 dark:hover:bg-blue-800">
            <span class="text-xs bg-blue-600 rounded-full text-white px-4 py-1.5 mr-3">Registrasi</span> <span class="text-sm font-medium">Klik di sini untuk membuat akun baru</span>
            <svg aria-hidden="true" class="ml-2 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
          </a>
        @else
          <a href="{{ route('logout') }}" class="inline-flex justify-between items-center py-1 px-1 pr-4 mb-7 text-sm text-blue-700 bg-blue-100 rounded-full dark:bg-blue-900 dark:text-blue-300 hover:bg-blue-200 dark:hover:bg-blue-800">
            <span class="text-xs bg-blue-600 rounded-full text-white px-4 py-1.5 mr-3">Keluar</span> <span class="text-sm font-medium">Klik di sini untuk mengakhiri sesi login</span>
            <svg aria-hidden="true" class="ml-2 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
          </a>
        @endif
        <h1 class="mb-4 text-4xl font-extrabold tracking-tight leading-none text-gray-900 md:text-5xl lg:text-6xl dark:text-white">Solusi Efektif Meningkatkan Keamanan dan Kesejahteraan Bersama</h1>
        <p class="mb-8 text-lg font-normal text-gray-500 lg:text-xl sm:px-16 lg:px-48 dark:text-gray-200">Tectcrime: Mendeteksi Pelaku Kejahatan dengan Teknologi Terdepan.</p>
        <div class="flex flex-col space-y-4 sm:flex-row sm:justify-center sm:space-y-0 sm:space-x-4">
            <a href="#about-tectcrime" class="inline-flex justify-center items-center py-3 px-5 text-base font-medium text-center text-white rounded-lg bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-900">
                Selengkapnya
                <svg aria-hidden="true" class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
            </a>
        </div>
    </div>
    <div class="bg-gradient-to-b from-blue-50 to-transparent dark:from-blue-900 w-full h-full absolute top-0 left-0 z-0"></div>
    <div id="about-tectcrime"></div>
</section>

<section class="flex px-28 py-24 bg-blue-700" >
  <video class="w-2/5 rounded-xl shadow-xl" autoplay loop>
    <source src="{{ asset('assets/videos/face-scanner-detection.mp4') }}" type="video/mp4">
    Your browser does not support the video tag.
  </video>
  <div class="flex w-2/3 flex-col gap-y-2 pl-16">
      <h2 class="text-4xl font-semibold text-white">Selamat datang di <span class="text-accent1">Tectcrime</span>
      </h2>
      <p class="mb-2 text-lg text-justify text-white">Tectcrime (Detect Criminals) adalah sebuah aplikasi inovatif yang bertujuan untuk memberikan solusi dalam pengungkapan kejahatan. Dengan menggunakan teknologi pengenalan wajah dan metode K-Nearest Neighbor, Tectcrime memungkinkan pengguna untuk mendeteksi dan mengidentifikasi pelaku kejahatan secara efisien dan akurat.</p>
      <a href="{{ route('tentang') }}" class="group relative inline-block w-fit text-sm font-medium text-white focus:outline-none focus:ring active:text-indigo-500">
        <button type="button" class="text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700 font-semibold">Selengkapnya tentang Tectcrime</button>
      </a>
  </div>
</section>
@endsection