@extends('layouts.master')

@push('additional-css')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

    @vite(['resources/css/theme-comply.css'])
@endpush

@push('additional-js')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js"></script>

    @vite(['resources/js/theme-comply.js'])
@endpush

@section('page-content')

<!--header-->
<nav class="navbar navbar-expand-md navbar-dark fixed-top sticky-navigation bg-primary-color">
    <button class="navbar-toggler navbar-toggler-right border-0" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <i class="bi bi-list"></i>
    </button>
    <a class="navbar-brand hero-heading" href="#">{{ env('APP_NAME') }}</a>
    <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item mr-3">
                <a class="nav-link page-scroll" href="#introduction">{{__('app.pages.home.sections.introduction.title')}} <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item mr-3">
                <a class="nav-link page-scroll" href="#features">{{__('app.pages.home.sections.features.title')}} </a>
            </li>
            <li class="nav-item mr-3">
                <a class="nav-link page-scroll" href="#contact">{{__('app.pages.home.sections.contact.title')}} </a>
            </li>
        </ul>
    </div>
</nav>

<!--intro-->
<section class="bg-primary-color hero" id="introduction">
    <div class="container">
        <div class="row d-md-flex brand">
            <div class="col-md-6 hidden-sm-down wow fadeIn">
                <img class="img-fluid mx-auto d-block img-intro" src="{{asset('resources/img/illustrations/logo 02.png')}}"/>
            </div>
            <div class="col-md-6 col-sm-12 text-white wow fadeIn">
                <h2 class="pt-4">{!!__('app.pages.home.sections.introduction.catch-phrase')!!}</h2>
                <p class="mt-5">
                    {!!__('app.pages.home.sections.introduction.description')!!}
                </p>
                <p class="mt-5">
                    @guest
                        <a href='{{route("login")}}' class="btn btn-primary mr-2 mb-2 page-scroll">{{__('app.pages.home.sections.introduction.log-in')}}</a>
                        <a href='{{route("register")}}' class="btn btn-white mb-2 page-scroll">{{__('app.pages.home.sections.introduction.register')}}</a>
                    @endguest
                    @auth
                    <a href='{{route("datastores")}}' class="btn btn-primary mr-2 mb-2 page-scroll">{{__('app.pages.home.sections.introduction.goto-datastores')}}</a>
                    @endauth
                </p>
            </div>
        </div>
    </div>
</section>

<!--features-->
<section class="bg-light" id="features">
    <div class="container">
        <div class="row mb-3">
            <div class="col-md-6 col-sm-8 mx-auto text-center wow fadeIn">
                <h2 class="text-primary">{!!__('app.pages.home.sections.features.catch-phrase')!!}</h2>
                <p class="lead mt-4">
                    {!!__('app.pages.home.sections.features.description')!!}
                </p>
            </div>
        </div>
        <div class="row mt-5 text-center">
            @foreach(__('app.pages.home.sections.features.elements') as $element)
            <div class="col-md-4 wow fadeIn">
                <div class="card">
                    <div class="card-body">
                        <div class="icon-box">
                            <em class="ion-ios-game-controller-b-outline icon-md"></em>
                        </div>
                        <h6>{!!$element['title']!!}</h6>
                        <p>
                            {!!$element['description']!!} 
                        </p>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>

<!--contact-->
<section class="bg-texture-collage p-0" id="contact">
    <div class="container">
        <div class="row d-md-flex text-white text-center wow fadeIn">
            <div class="col-sm-12 p-5">
                <p><em class="ion-ios-email-outline icon-md"></em></p>
                <p class="lead"><a href="mailto:contact@hoku.be">contact@hoku.be</a></p>
            </div>
        </div>
    </div>
</section>

<!--footer-->
<section class="bg-footer" id="connect">
    <div class="container">
        <div class="row">
            <div class="col-md-6 offset-md-3 col-sm-8 offset-sm-2 col-xs-12 text-center wow fadeIn">
                <h1>HOKU.be</h1>
                <p class="pt-2 text-muted">
                    &copy; 2025 HOKU.be. A personnal website developed by <b>SDV</b>
                </p>
            </div>
        </div>
    </div>
</section>


@endsection