@extends('index')
@section('title', Helper::getSiteTitle('Home'))

@section('content')
<section class="hero-section ptb-120 bg-dark text-white" style="background: url('img/red_background.png') bottom left;">
    <div class="container">
        <div class="row align-items-center justify-content-lg-between">
            <div class="col-xl-5 col-lg-5">
                <div class="hero-content-wrap text-center text-xl-start text-lg-start mt-5 mt-lg-0 mt-xl-0" data-aos="fade-up">
                    <h1 class="fw-bold display-5">Bringing Blockchain to Your Favourite Online Games</h1>
                    <p class="lead">Mine virtual game currencies with your devices GPU</p>
                    <div class="hero-subscribe-form-wrap pt-4 position-relative m-auto m-xl-0 d-none d-md-block d-lg-block d-xl-block">
                        <div class="action-btn align-items-center d-block d-sm-flex d-lg-flex d-md-flex">
                            <a href="{{ route('register') }}" class="btn btn-primary me-3">Get Started</a>
                            <a href="" class="text-decoration-none popup-youtube d-inline-flex align-items-center watch-now-btn mt-3 mt-lg-0 mt-md-0"> <i class="fas fa-play"></i> Watch Tutorial </a>
                        </div>
                        <ul class="nav subscribe-feature-list mt-3 justify-content-lg-start justify-content-md-center">
                            <li class="nav-item">
                                <span class="ms-0"><i class="far fa-check-circle text-primary me-2"></i>No Sign Up Cost</span>
                            </li>
                            <li class="nav-item">
                                <span><i class="far fa-check-circle text-primary me-2"></i>No Payout Fees</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-xl-6 col-lg-6 mt-lg-5 mt-4">
                <div class="hero-img-wrap position-relative" data-aos="fade-up">
                    <div class="hero-screen-wrap">
                        <div class="phone-screen">
                            <img src="img/screen/phone-screen.png" alt="hero image" class="position-relative img-fluid" />
                        </div>
                        <div class="mac-screen">
                            <img src="img/laptop.png" alt="hero image" class="position-relative img-fluid rounded-custom" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="work-process ptb-120">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-10 col-lg-6">
                <div class="section-heading text-center" data-aos="fade-up">
                    <h2>How to Get Started</h2>
                </div>
            </div>
        </div>
        <div class="row d-flex align-items-center">
            <div class="col-md-6 col-lg-3">
                <div class="process-card text-center px-4 py-lg-5 py-4 rounded-custom shadow-hover mb-3 mb-lg-0" data-aos="fade-up" data-aos-delay="50">
                    <div class="process-icon border border-light bg-custom-light rounded-custom p-3">
                        <span class="h2 mb-0 text-primary fw-bold">1</span>
                    </div>
                    <h3 class="h5">Download</h3>
                    <p class="mb-0">Download and Install the Latest Version of AGG Desktop Miner to Your Windows or Ubuntu PC</p>
                </div>
            </div>
            <div class="dots-line first"></div>
            <div class="col-md-6 col-lg-3">
                <div class="process-card text-center px-4 py-lg-5 py-4 rounded-custom shadow-hover mb-3 mb-lg-0" data-aos="fade-up" data-aos-delay="100">
                    <div class="process-icon border border-light bg-custom-light rounded-custom p-3">
                        <span class="h2 mb-0 text-primary fw-bold">2</span>
                    </div>
                    <h3 class="h5">Register</h3>
                    <p class="mb-0">Create a Free Account to Gain Members Access to Your Dashboard and Miner</p>
                </div>
            </div>
            <div class="dots-line first"></div>
            <div class="col-md-6 col-lg-3">
                <div class="process-card text-center px-4 py-lg-5 py-4 rounded-custom shadow-hover mb-3 mb-lg-0 mb-md-0" data-aos="fade-up" data-aos-delay="150">
                    <div class="process-icon border border-light bg-custom-light rounded-custom p-3">
                        <span class="h2 mb-0 text-primary fw-bold">3</span>
                    </div>
                    <h3 class="h5">Earn</h3>
                    <p class="mb-0">Use the AGG Desktop Miner to Earn Currencies from Your Favourite Online Games</p>
                </div>
            </div>
            <div class="dots-line first"></div>
            <div class="col-md-6 col-lg-3">
                <div class="process-card text-center px-4 py-lg-5 py-4 rounded-custom shadow-hover mb-0" data-aos="fade-up" data-aos-delay="200">
                    <div class="process-icon border border-light bg-custom-light rounded-custom p-3">
                        <span class="h2 mb-0 text-primary fw-bold">4</span>
                    </div>
                    <h3 class="h5">Payout</h3>
                    <p class="mb-0">Request a Payout From the Wallet in Your Dashboard to Claim Earnings In-Game</p>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="cta-section bg-dark text-white ptb-120 position-relative overflow-hidden">
    <div class="container">
        <div class="row align-items-center justify-content-between">
            <div class="col-lg-5 col-md-12">
                <div class="position-relative z-5">
                    <h2>Why Choose AGG?</h2>
                    <p>We have developed a major stepping stone to introducing everyday life with a world of Blockchain and Web3 technology. We are gamers at heart, and rest assured that this will step up your game</p>
                    <a href="javascript:void(0)" class="btn btn-primary mt-4">Learn More</a>
                </div>
            </div>
            <div class="col-lg-6 col-md-12">
                <div class="row align-items-center justify-content-center position-relative z-2">
                    <div class="col-md-6">
                        <div class="cta-card rounded-custom text-center shadow p-5 bg-white my-4">
                            <h3 class="display-7 fw-bold">UNLIMITED</h3>
                            <p class="mb-0">You can use as many devices as you like</p>
                        </div>
                        <div class="cta-card rounded-custom text-center shadow p-5 bg-white my-4">
                            <h3 class="display-7 fw-bold">FREE</h3>
                            <p class="mb-0">Complete access to our platform with no cost</p>
                        </div>
                        <div class="cta-card rounded-custom text-center shadow p-5 bg-white my-4">
                            <h3 class="display-7 fw-bold">INCOME</h3>
                            <p class="mb-0">Generate a passive income for your favourite games</p>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="cta-card rounded-custom text-center shadow p-5 bg-white">
                            <h3 class="display-7 fw-bold">SUPPORT</h3>
                            <p class="mb-0">We are here to assist at any time</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="process-section bg-light ptb-120">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-6 col-md-12">
                <div class="section-heading text-center" data-aos="fade-up">
                    <h4 class="h5 text-primary">Here’s How to Cash In</h4>
                    <h2>Our Payout Process</h2>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div class="setup-process-wrap">
                    <ul class="setup-process-list list-unstyled text-center mb-0">
                        <li class="setup-process-item py-4 px-2" data-aos="fade-up">
                            <div class="setup-process-icon mb-4">
                                <i class="fas fa-coins fa-2x text-primary"></i>
                            </div>
                            <span class="process-tag badge bg-primary-soft py-1 px-3 small fw-bold text-primary rounded-custom">Step 1</span>
                            <h6 class="mt-3 mb-0">Request a Payout From Your User Dashboard</h6>
                        </li>
                        <li class="setup-process-item py-4 px-2" data-aos="fade-up" data-aos-delay="50">
                            <div class="setup-process-icon mb-4">
                                <i class="far fa-keyboard fa-2x text-primary"></i>
                            </div>
                            <span class="process-tag badge bg-primary-soft py-1 px-3 small fw-bold text-primary rounded-custom">Step 2</span>
                            <h6 class="mt-3 mb-0">Provide Your In-Game Name</h6>
                        </li>
                        <li class="setup-process-item py-4 px-2" data-aos="fade-up" data-aos-delay="100">
                            <div class="setup-process-icon mb-4">
                                <i class="far fa-comments fa-2x text-primary"></i>
                            </div>
                            <span class="process-tag badge bg-primary-soft py-1 px-3 small fw-bold text-primary rounded-custom">Step 3</span>
                            <h6 class="mt-3 mb-0">Automatically Connect with Your Payout Agent</h6>
                        </li>
                        <li class="setup-process-item py-4 px-2" data-aos="fade-up" data-aos-delay="150">
                            <div class="setup-process-icon mb-4">
                                <i class="far fa-handshake fa-2x text-primary"></i>
                            </div>
                            <span class="process-tag badge bg-primary-soft py-1 px-3 small fw-bold text-primary rounded-custom">Step 4</span>
                            <h6 class="mt-3 mb-0">Trade In-Game to Claim Your Earnings</h6>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="cta-section bg-dark text-white ptb-120 position-relative overflow-hidden">
    <div class="container">
        <div class="row align-items-center justify-content-between">
            <div class="col-lg-5 col-md-12">
                <div class="position-relative z-5">
                    <h2>How Much Can You Earn?</h2>
                    <p>Maths can be hard, so we have created this helpful calculator to estimate what your rig is currently capable of earning. Simply select your GPU and game currency to find out!</p>
                </div>
            </div>
            <div class="col-lg-6 col-md-12">
                <div class="row align-items-center justify-content-center position-relative z-2">
                    <div class="col-md-6">
                        <div class="cta-card rounded-custom text-center shadow p-5 bg-white my-4" style="box-shadow: 1px -1px 35px grey!important; padding-top: 15px!important; padding-bottom: 45px!important;">
                        <p class="mb-0 price mt-4">$122.95</p>
                            <select class="js-example-basic-multiple" name="states[]">
                                <option value="AL">Geforce RTX 3080</option>
                                <option value="WY">Wyoming</option>
                            </select>
                            <select class="js-example-basic-multiple" name="states[]">
                                <option value="AL">Geforce RTX 3080</option> 
                                <option value="WY">Wyoming</option>
                            </select>
                            <a class="btn btn-primary me-3">Calculate</a>
                            <img class="mt-4 col-md-12" src="/img/whiteboard_calc.png">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="work-process" style="padding: 70px 0;">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-6 col-md-10">
                <div class="section-heading text-center">
                    <h2>Secure and Trusted Platform</h2>
                    <p>We have carefully integrated industry leading standards into our platform to ensure a seamless and positive environment for our users to interact. Protecting your data is our priority.</p>
                </div>
            </div>
        </div>
        <div class="row align-items-center justify-content-between">
                      <div class="col-lg-6 col-md-12 order-0 order-lg-1">
                <ul class="work-process-list list-unstyled">
                    <li class="d-flex align-items-start mb-4">
                        <div class="process-icon-2 border border-2 rounded-custom bg-white me-4 mt-2">
                            <i class="fas fa-lock fa-2x"></i>
                        </div>
                        <div class="icon-content">
                            <span class="text-primary h6">SSL Encryption</span>
                            <h3 class="h5 mb-2">Secure Socket Layer</h3>
                            <p>We use a cryptographic communication protocol to ensure all data sent between our servers and your browser is safe and secure</p>
                        </div>
                    </li>
                    <li class="d-flex align-items-start mb-4">
                        <div class="process-icon-2 border border-2 rounded-custom bg-white me-4 mt-2">
                            <i class="fas fa-mobile-alt fa-2x"></i>
                        </div>
                        <div class="icon-content">
                            <span class="text-primary h6">2FA Account Security</span>
                            <h3 class="h5 mb-2">Multi-Factor Authentication</h3>
                            <p>We offer the addition of 2FA Authentication to strengthen and establish verified access to all user accounts</p>
                        </div>
                    </li>
                    <li class="d-flex align-items-start mb-4">
                        <div class="process-icon-2 border border-2 rounded-custom bg-white me-4 mt-2">
                            <i class="fab fa-cloudflare fa-2x"></i>
                        </div>
                        <div class="icon-content">
                            <span class="text-primary h6">Content Delivery</span>
                            <h3 class="h5 mb-2">Cloudflare Web Infrastructure</h3>
                            <p>Our security is backed up by Cloudflare, providing us with essential protections to our servers and client information.</p>
                        </div>
                    </li>
                    <li class="d-flex align-items-start mb-4 mb-lg-0">
                        <div class="process-icon-2 border border-2 rounded-custom bg-white me-4 mt-2">
                            <i class="fas fa-people-arrows fa-2x"></i>
                        </div>
                        <div class="icon-content">
                            <span class="text-primary h6">Secured API</span>
                            <h3 class="h5 mb-2">Application Programming Interface</h3>
                            <p>Our in-house API sets the framework of all interactions between our programs and services.</p>
                        </div>
                    </li>
                </ul>
                
            </div>
            <div class="col-lg-6 col-md-12 order-0 order-lg-1">
            <div class="img-wrap" data-aos="fade-up" data-aos-delay="50">
                    <img src="/img/secure.svg" alt="security" class="img-fluid rounded-custom">
                </div>
            </div>
        </div>
    </div>
</section>
@if(!$faqs->isEmpty())
<section class="faq-section bg-dark" style="padding: 80px 0;">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-7 col-12">
                <div class="section-heading mb-5 text-center">
                    <h2>Frequently Asked Questions</h2>
                </div>
            </div>
        </div>
        <div class="row justify-content-center">
            <div class="col-lg-7 col-12">
                <div class="accordion faq-accordion" id="accordionFaqs">
                    @foreach($faqs as $faq)
                    <div class="accordion-item border border-2 {{ $faq->id == $faqs->first()->id ? 'active' : '' }}">
                        <h5 class="accordion-header" id="faq-{{ $faq->id }}">
                            <button class="accordion-button {{ $faq->id == $faqs->first()->id ? '' : 'collapsed' }}" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-{{ $faq->id }}" aria-expanded="{{ $faq->id == $faqs->first()->id ? 'true' : 'false' }}">
                                {{ $faq->question }}
                            </button>
                        </h5>
                        <div id="collapse-{{ $faq->id }}" class="accordion-collapse collapse {{ $faq->id == $faqs->first()->id ? 'show' : '' }}" aria-labelledby="faq-{{ $faq->id }}" data-bs-parent="#accordionFaqs">
                            <div class="accordion-body">{{ $faq->answer }}</div>
                        </div>
                    </div>
                    @endforeach
                </div>
                <div class="text-center">
                <a href="{{ route('faqs') }}" class="mt-4 btn btn-primary me-3">Read More</a>
                </div>
            </div>
        </div>
    </div>
</section>
@endif
<!--
<section class="integration-section pt-60 pb-120">
    <div class="container">
        <div class="row align-items-center justify-content-lg-between">
            <div class="col-lg-6 col-md-12">
                <div class="section-heading" data-aos="fade-up">
                    <h4 class="h5 text-primary">Integration</h4>
                    <h2>Dreams take teamwork</h2>
                </div>
            </div>
            <div class="col-lg-4 col-md-12">
                <div class="text-lg-end mb-5 mb-lg-0" data-aos="fade-up">
                    <a href="{{ route('contact') }}" class="btn btn-primary">Have something to contribute</a>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div class="integration-wrapper position-relative w-100">
                    <ul class="position-absolute animate-element parallax-element shape-service z--1 d-none d-lg-none d-xl-block">
                        <li class="layer" data-depth="0.02">
                            <img src="img/color-shape/feature-2.svg" alt="shape" class="img-fluid position-absolute color-shape-2 z-5" />
                        </li>
                        <li class="layer" data-depth="0.03">
                            <img src="img/color-shape/feature-3.svg" alt="shape" class="img-fluid position-absolute color-shape-3" />
                        </li>
                    </ul>
                    <ul class="integration-list list-unstyled mb-0">
                        <li data-aos="fade-up" data-aos-delay="50">
                            <div class="single-integration">
                                <img src="img/integations/airbnb.png" alt="integration" class="img-fluid" />
                                <h6 class="mb-0 mt-4">Brand Name</h6>
                            </div>
                        </li>
                        <li data-aos="fade-up" data-aos-delay="50">
                            <div class="single-integration">
                                <img src="img/integations/figma.png" alt="integration" class="img-fluid" />
                                <h6 class="mb-0 mt-4">Brand Name</h6>
                            </div>
                        </li>
                        <li data-aos="fade-up" data-aos-delay="50">
                            <div class="single-integration">
                                <img src="img/integations/facebook.png" alt="integration" class="img-fluid" />
                                <h6 class="mb-0 mt-4">Brand Name</h6>
                            </div>
                        </li>
                        <li data-aos="fade-up" data-aos-delay="50">
                            <div class="single-integration">
                                <img src="img/integations/sales-force.png" alt="integration" class="img-fluid" />
                                <h6 class="mb-0 mt-4">Brand Name</h6>
                            </div>
                        </li>
                        <li data-aos="fade-up" data-aos-delay="50">
                            <div class="single-integration">
                                <img src="img/integations/atlassian.png" alt="integration" class="img-fluid" />
                                <h6 class="mb-0 mt-4">Brand Name</h6>
                            </div>
                        </li>
                        <li data-aos="fade-up" data-aos-delay="50">
                            <div class="single-integration">
                                <img src="img/integations/dropbox-2.png" alt="integration" class="img-fluid" />
                                <h6 class="mb-0 mt-4">Brand Name</h6>
                            </div>
                        </li>
                        <li data-aos="fade-up" data-aos-delay="100">
                            <div class="single-integration">
                                <img src="img/integations/dynamic-365.png" alt="integration" class="img-fluid" />
                                <h6 class="mb-0 mt-4">Brand Name</h6>
                            </div>
                        </li>
                        <li data-aos="fade-up" data-aos-delay="100">
                            <div class="single-integration">
                                <img src="img/integations/erecruiter.png" alt="integration" class="img-fluid" />
                                <h6 class="mb-0 mt-4">Brand Name</h6>
                            </div>
                        </li>
                        <li data-aos="fade-up" data-aos-delay="100">
                            <div class="single-integration">
                                <img src="img/integations/evernote.png" alt="integration" class="img-fluid" />
                                <h6 class="mb-0 mt-4">Brand Name</h6>
                            </div>
                        </li>
                        <li data-aos="fade-up" data-aos-delay="100">
                            <div class="single-integration">
                                <img src="img/integations/google-icon.png" alt="integration" class="img-fluid" />
                                <h6 class="mb-0 mt-4">Brand Name</h6>
                            </div>
                        </li>

                        <li data-aos="fade-up" data-aos-delay="100">
                            <div class="single-integration">
                                <img src="img/integations/slack.png" alt="integration" class="img-fluid" />
                                <h6 class="mb-0 mt-4">Brand Name</h6>
                            </div>
                        </li>

                        <li data-aos="fade-up" data-aos-delay="100">
                            <div class="single-integration">
                                <img src="img/integations/google-analytics.png" alt="integration" class="img-fluid" />
                                <h6 class="mb-0 mt-4">Brand Name</h6>
                            </div>
                        </li>

                        <li data-aos="fade-up" data-aos-delay="150">
                            <div class="single-integration">
                                <img src="img/integations/google-drive.png" alt="integration" class="img-fluid" />
                                <h6 class="mb-0 mt-4">Brand Name</h6>
                            </div>
                        </li>

                        <li data-aos="fade-up" data-aos-delay="150">
                            <div class="single-integration">
                                <img src="img/integations/hubspot.png" alt="integration" class="img-fluid" />
                                <h6 class="mb-0 mt-4">Brand Name</h6>
                            </div>
                        </li>

                        <li data-aos="fade-up" data-aos-delay="150">
                            <div class="single-integration">
                                <img src="img/integations/instagram.png" alt="integration" class="img-fluid" />
                                <h6 class="mb-0 mt-4">Brand Name</h6>
                            </div>
                        </li>
                        <li data-aos="fade-up" data-aos-delay="150">
                            <div class="single-integration">
                                <img src="img/integations/linkedin.png" alt="integration" class="img-fluid" />
                                <h6 class="mb-0 mt-4">Brand Name</h6>
                            </div>
                        </li>
                        <li data-aos="fade-up" data-aos-delay="150">
                            <div class="single-integration">
                                <img src="img/integations/mailchimp.png" alt="integration" class="img-fluid" />
                                <h6 class="mb-0 mt-4">Brand Name</h6>
                            </div>
                        </li>
                        <li data-aos="fade-up" data-aos-delay="150">
                            <div class="single-integration">
                                <img src="img/integations/marekto.png" alt="integration" class="img-fluid" />
                                <h6 class="mb-0 mt-4">Brand Name</h6>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>
-->
@endsection