@extends('template.index')

@section('title', 'Projects')

@section('content')
    <section class="py-5">
        <div class="container mb-5">
            <div class="text-center mb-5 reveal-bottom">
                <h1 class="display-5 fw-bolder mb-0"><span class="text-gradient d-inline">Projects</span></h1>
            </div>
            <div class="row gx-5 justify-content-center reveal-bottom">
                <div class="col-lg-11 col-xl-9 col-xxl-8">
                    <!-- Project Card 1 -->
                    <div class="card shadow mb-5 reveal-bottom custom-border-radius">
                        <div class="card-body hover-gradient">
                            <div class="row align-items-center">
                                <div class="col-lg-4 text-center mb-3 mb-lg-0">
                                    <img class="img-fluid rounded-4" src="assets/spo.png" alt="Solusi Pajak Online" />
                                </div>
                                <div class="col-lg-8">
                                    <h2 class="fw-bolder">Solusi Pajak Online Website</h2>
                                    <p>Solusi Pajak Online is a tax consultant website that can make it easier for people to pay their taxes.</p>
                                    <div class="scroll-container" style="border-radius: 5px">
                                        <div class="scroll-content">
                                            <div class="scroll-item"><span class="text-gradient d-inline">Laravel</div>
                                            <div class="scroll-item"><span class="text-gradient d-inline">Bootstrap</div>
                                            <div class="scroll-item"><span class="text-gradient d-inline">PHP</div>
                                            <div class="scroll-item"><span class="text-gradient d-inline">JavaScript</div>
                                            <div class="scroll-item"><span class="text-gradient d-inline">Laravel</div>
                                            <div class="scroll-item"><span class="text-gradient d-inline">Bootstrap</div>
                                            <div class="scroll-item"><span class="text-gradient d-inline">PHP</div>
                                            <div class="scroll-item"><span class="text-gradient d-inline">JavaScript</div>

                                        </div>
                                    </div>
                                    <div class="text-lg-start mt-4"> <!-- Align the button to the left on larger screens -->
                                    <a href="http://solus.mhwmr.my.id/" class="btn btn-outline-dark btn-lg px-5 py-3 fs-6 fw-bolder">Discover</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Project Card 2 -->
                    <div class="card shadow mb-5 reveal-bottom custom-border-radius">
                        <div class="card-body hover-gradient">
                            <div class="row align-items-center">
                                <div class="col-lg-4 text-center mb-3 mb-lg-0">
                                    <img class="img-fluid rounded-4" src="assets/alkeslab.png" alt="Alkeslab Primatama" />
                                </div>
                                <div class="col-lg-8">
                                    <h2 class="fw-bolder">Alkeslab Primatama Website</h2>
                                    <p>Alkeslab Primatama was the first company website that I built on my own. I handled
                                        both the front-end and back-end myself.</p>
                                        <div class="scroll-container" style="border-radius: 5px">
                                            <div class="scroll-content">
                                                <div class="scroll-item"><span class="text-gradient d-inline">Laravel</div>
                                                <div class="scroll-item"><span class="text-gradient d-inline">Bootstrap</div>
                                                <div class="scroll-item"><span class="text-gradient d-inline">PHP</div>
                                                <div class="scroll-item"><span class="text-gradient d-inline">JavaScript</div>
                                                <div class="scroll-item"><span class="text-gradient d-inline">Laravel</div>
                                                <div class="scroll-item"><span class="text-gradient d-inline">Bootstrap</div>
                                                <div class="scroll-item"><span class="text-gradient d-inline">PHP</div>
                                                <div class="scroll-item"><span class="text-gradient d-inline">JavaScript</div>

                                            </div>
                                        </div>
                                        <div class="text-lg-start mt-4"> <!-- Align the button to the left on larger screens -->
                                        <a href="http://alkeslabprimatama.com/" class="btn btn-outline-dark btn-lg px-5 py-3 fs-6 fw-bolder">Discover</a>
                                        </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Project Card 3 -->
                    <div class="card shadow mb-5 reveal-bottom custom-border-radius">
                        <div class="card-body hover-gradient">
                            <div class="row align-items-center">
                                <div class="col-lg-4 text-center mb-3 mb-lg-0">
                                    <img class="img-fluid rounded-4" src="assets/BATS.png" alt="Alkeslab Primatama" />
                                </div>
                                <div class="col-lg-8">
                                    <h2 class="fw-bolder">BATS Website</h2>
                                    <p>I helped BATS for creating their own website.  </p>
                                        <div class="scroll-container" style="border-radius: 5px">
                                            <div class="scroll-content">
                                                <div class="scroll-item"><span class="text-gradient d-inline">Laravel</div>
                                                <div class="scroll-item"><span class="text-gradient d-inline">Bootstrap</div>
                                                <div class="scroll-item"><span class="text-gradient d-inline">PHP</div>
                                                <div class="scroll-item"><span class="text-gradient d-inline">JavaScript</div>
                                                <div class="scroll-item"><span class="text-gradient d-inline">Laravel</div>
                                                <div class="scroll-item"><span class="text-gradient d-inline">Bootstrap</div>
                                                <div class="scroll-item"><span class="text-gradient d-inline">PHP</div>
                                                <div class="scroll-item"><span class="text-gradient d-inline">JavaScript</div>

                                            </div>
                                        </div>
                                        <div class="text-lg-start mt-4"> <!-- Align the button to the left on larger screens -->
                                        <a href="http://demo-bhadra.mhwmr.my.id/" class="btn btn-outline-dark btn-lg px-5 py-3 fs-6 fw-bolder">Discover</a>
                                        </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>



    <!-- Call to action section-->
    <section class="py-5 bg-gradient-primary-to-secondary text-white reveal-bottom" style="border-radius: 25px">
        <div class="container px-5 my-5">
            <div class="text-center">
                <h2 class="display-4 fw-bolder mb-4">Let's get in touch!</h2>
                <a class="btn btn-outline-light btn-lg px-5 py-3 fs-6 fw-bolder" href="https://wa.me/6281281916862">Contact
                    me</a>
            </div>
        </div>
    </section>

    <div class="pb-5"></div>
    <!-- Scroller Section -->
    @include('template.scrooler')
@endsection