@extends('layouts.app')

@section('content')
    <section class="mb-40">
        <nav class="navbar navbar-expand-lg shadow-md py-0 bg-white relative flex items-center w-full justify-between">
        </nav>


        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="absolute block w-full"
            style="margin: auto; z-index: -10;" height="680" preserveAspectRatio="none" viewBox="0 0 1920 880">
            <g transform="translate(960,440) scale(1,1) translate(-960,-440)">
                <linearGradient id="lg-0.047955344060927496" x1="0" x2="1" y1="0" y2="0">
                    <stop stop-color="hsl(145, 63%, 40%)" offset="0"></stop>
                    <stop stop-color="hsl(137, 100%, 45%)" offset="1"></stop>
                </linearGradient>
                <path d="" fill="url(#lg-0.047955344060927496)" opacity="0.4">
                    <animate attributeName="d" dur="33.333333333333336s" repeatCount="indefinite" keyTimes="0;0.333;0.667;1"
                        calcmod="spline" keySplines="0.2 0 0.2 1;0.2 0 0.2 1;0.2 0 0.2 1" begin="0s"
                        values="M0 0L 0 804.2328934685746Q 320 597.3613372284876  640 571.0708916590191T 1280 512.0661063245175T 1920 301.8788007488083L 1920 0 Z;M0 0L 0 877.6839081951588Q 320 668.0720922803877  640 649.0018928349388T 1280 328.7087077664202T 1920 162.95038242563396L 1920 0 Z;M0 0L 0 724.9886210051687Q 320 661.4364572061575  640 623.2173947479624T 1280 359.20353038907734T 1920 135.51673041732283L 1920 0 Z;M0 0L 0 804.2328934685746Q 320 597.3613372284876  640 571.0708916590191T 1280 512.0661063245175T 1920 301.8788007488083L 1920 0 Z">
                    </animate>
                </path>
                <path d="" fill="url(#lg-0.047955344060927496)" opacity="0.4">
                    <animate attributeName="d" dur="33.333333333333336s" repeatCount="indefinite" keyTimes="0;0.333;0.667;1"
                        calcmod="spline" keySplines="0.2 0 0.2 1;0.2 0 0.2 1;0.2 0 0.2 1" begin="-6.666666666666667s"
                        values="M0 0L 0 765.7607191473613Q 320 641.7853945676919  640 624.2534689988059T 1280 365.27264408032966T 1920 190.38947978522663L 1920 0 Z;M0 0L 0 842.1984196370487Q 320 570.6690721707517  640 540.6844954979398T 1280 439.92879442880593T 1920 200.29713960445451L 1920 0 Z;M0 0L 0 796.6802345094818Q 320 721.9216894353016  640 696.8815669355181T 1280 373.6367381440213T 1920 196.63169821789495L 1920 0 Z;M0 0L 0 765.7607191473613Q 320 641.7853945676919  640 624.2534689988059T 1280 365.27264408032966T 1920 190.38947978522663L 1920 0 Z">
                    </animate>
                </path>
                <path d="" fill="url(#lg-0.047955344060927496)" opacity="0.4">
                    <animate attributeName="d" dur="33.333333333333336s" repeatCount="indefinite" keyTimes="0;0.333;0.667;1"
                        calcmod="spline" keySplines="0.2 0 0.2 1;0.2 0 0.2 1;0.2 0 0.2 1" begin="-13.333333333333334s"
                        values="M0 0L 0 801.7562714943509Q 320 634.0247183381232  640 605.7090791951217T 1280 503.9393370140325T 1920 224.7551247480177L 1920 0 Z;M0 0L 0 821.0401780336218Q 320 670.8690783540507  640 637.0744123031742T 1280 456.40745286432224T 1920 278.1294357804296L 1920 0 Z;M0 0L 0 744.0534225112256Q 320 637.6425395409125  640 593.2079605185819T 1280 457.03995196824286T 1920 254.87693899994804L 1920 0 Z;M0 0L 0 801.7562714943509Q 320 634.0247183381232  640 605.7090791951217T 1280 503.9393370140325T 1920 224.7551247480177L 1920 0 Z">
                    </animate>
                </path>
                <path d="" fill="url(#lg-0.047955344060927496)" opacity="0.4">
                    <animate attributeName="d" dur="33.333333333333336s" repeatCount="indefinite" keyTimes="0;0.333;0.667;1"
                        calcmod="spline" keySplines="0.2 0 0.2 1;0.2 0 0.2 1;0.2 0 0.2 1" begin="-20s"
                        values="M0 0L 0 817.8603658675457Q 320 592.9404308081629  640 559.1126621853513T 1280 428.9912604821798T 1920 209.017381620229L 1920 0 Z;M0 0L 0 802.0504889976935Q 320 561.3963273210122  640 537.6024084387631T 1280 430.41283267566695T 1920 256.1972069733954L 1920 0 Z;M0 0L 0 789.4448177495887Q 320 561.9675446430498  640 531.6192318019404T 1280 414.76018143244175T 1920 265.9163329632971L 1920 0 Z;M0 0L 0 817.8603658675457Q 320 592.9404308081629  640 559.1126621853513T 1280 428.9912604821798T 1920 209.017381620229L 1920 0 Z">
                    </animate>
                </path>
                <path d="" fill="url(#lg-0.047955344060927496)" opacity="0.4">
                    <animate attributeName="d" dur="33.333333333333336s" repeatCount="indefinite" keyTimes="0;0.333;0.667;1"
                        calcmod="spline" keySplines="0.2 0 0.2 1;0.2 0 0.2 1;0.2 0 0.2 1" begin="-26.666666666666668s"
                        values="M0 0L 0 844.0541574423102Q 320 623.0697081316591  640 592.8483890737847T 1280 469.85448734523794T 1920 190.81850676853674L 1920 0 Z;M0 0L 0 871.4928294956283Q 320 618.9784567388518  640 593.1183717103518T 1280 376.5051942642811T 1920 141.32293927545027L 1920 0 Z;M0 0L 0 782.0118384610068Q 320 727.3267836497654  640 694.0476176759635T 1280 518.1545471640493T 1920 276.0053882957168L 1920 0 Z;M0 0L 0 844.0541574423102Q 320 623.0697081316591  640 592.8483890737847T 1280 469.85448734523794T 1920 190.81850676853674L 1920 0 Z">
                    </animate>
                </path>
            </g>
        </svg>

        <div class="container mx-auto px-6 md:px-12 xl:px-32">
            <div class="text-center text-gray-800">
                <div class="block rounded-lg shadow-lg px-6 py-12 md:py-16 md:px-12"
                    style="margin-top: 180px; background-color: hsla(0, 0%, 100%, 0.8);backdrop-filter: saturate(200%) blur(25px);">
                    <h1 class="text-5xl md:text-6xl xl:text-7xl font-bold tracking-tight mb-12">Innovative Agricultural Tech
                        Solutions <br /><span class="text-green-600">by IndabaX Hackathon 2022</span></h1>


                </div>
            </div>
        </div>
    </section>
    <!-- Container for demo purpose -->
    <div class="container my-24 px-6 mx-auto">

        <!-- Section: Design Block -->
        <section class="mb-32 text-gray-800 text-center lg:text-left">
            <style>
                @media (min-width: 992px) {
                    .rotate-lg-6 {
                        transform: rotate(6deg);
                    }
                }

                /* These are the KEY styles - you can add them directly to any object you want in your project */
                .fancy-border-radius {
                    border-radius: 53% 47% 52% 48% / 36% 41% 59% 64%;
                }
            </style>

            <!-- Jumbotron -->
            <div class="container mx-auto xl:px-32 text-center lg:text-left">
                <div class="grid lg:grid-cols-2 flex items-center">
                    <div class="mb-12 lg:mb-0">
                        <div class="relative block rounded-lg shadow-lg px-6 py-12 md:px-12 lg:-mr-14"
                            style="background: hsla(0, 0%, 100%, 0.55); backdrop-filter: blur(30px); z-index: 1">
                            <div>
                                <a href="{{ url('/project') }}">
                                    <img src="{{ asset('images/projects/Dr Maiz.png') }}"
                                        class="w-20 shadow-lg fancy-border-radius rotate-lg-9" alt="" />
                                </a>
                            </div>
                            <h2 class="text-3xl font-bold mb-4 display-5">Dr. mAIze</h2>
                            <p class="text-gray-500 mb-12">
                                A computer vision model to detect diseases in maize plants.
                            </p>

                            <div class="grid md:grid-cols-3 gap-x-6">
                                <div class="mb-12 md:mb-0">
                                    <h2 class="text-3xl font-bold text-dark mb-4">71%</h2>
                                    <h5 class="text-lg font-medium text-gray-500 mb-0">Accuracy</h5>
                                </div>

                                <div class="mb-12 md:mb-0">
                                    <h2 class="text-3xl font-bold text-dark mb-4">86%</h2>
                                    <h5 class="text-lg font-medium text-gray-500 mb-0">Precision</h5>
                                </div>

                                <div class="">
                                    <h2 class="text-3xl font-bold text-dark mb-4">65%</h2>
                                    <h5 class="text-lg font-medium text-gray-500 mb-0">Precision</h5>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div>
                        <img src="{{ asset('images/projects/home page.png') }}"
                            class="w-full shadow-lg border-radius rotate-lg-6" alt="" />
                    </div>
                </div>
            </div>
            <!-- Jumbotron -->
        </section>
        <!-- Section: Design Block -->

    </div>
    <!-- Container for demo purpose -->
@endsection
