@extends('layouts.basePage', [
    'title' => _env('APP_NAME', 'aNetwork Gaming Community'),
    'breadcrumbs' => [
        [
            'title' => 'Home',
            'href' => '/',
        ]
    ]
])

@section('content')
		
	@include('components/header')

	<main>

		<section class="anetwork-hero">
			<div class="container container--no-botgap">
				<section class="row">
					<section class="col col-sm-12 col-8 col--align-center">
						<h1 style="font-size: 42px;"><span class="site-title">aNetwork</span> Gaming Community</h1>
						<p>A community that runs several gaming servers. If there's something we don't host; Let us know over in the <a href="/discord">aNetwork Discord</a>. If there's enough want, we'll set it up.</p>
						<br>
						<a class="button button--hero" href="#">View Servers</a>
						<a class="button button--blue" href="#">Join Discord &rarr;</a>
						<a class="button button--disabled" href="#">Disabled</a>
					</section>

					<!-- row col, if it's a column that wants to have flex/inner-columns -->
					<section class="row col col-sm-12 col-4 col--align-center">
						<div class="col col-sm-6"><img src="@assets('img/discord.png')" width="128" height="128"></div>
						<div class="col col-sm-6"><img src="@assets('img/mc.png')" width="128" height="128"></div>
						<div class="col col-sm-6"><img src="@assets('img/factorio.png')" width="128" height="128"></div>
						<div class="col col-sm-6"><img src="@assets('img/terraria.png')" width="128" height="128"></div>
					</section>
				</section>
			</div>
		</section>
		

		<div class="container">
			<section id="about">

				<header class="row">
					<div class="col col-12">
						<h2>A community of gamers</h2>
						<p>Looking for place to play, and connect with friends new and old?</p>
					</div>
				</header>

				<div class="row row--cards">
					<div class="col col-4">
						<div class="card">
							<div class="card__body">
								<h3>Formed in 2021</h3>
								<p>Card content*</p>
								<p><small>*with small content</small></p>
							</div>
						</div>
					</div>
					<div class="col col-4">
						<div class="card card__body">  <!-- Since nothing else, can just slam body onto the card  -->
							<h3>Public Servers</h3>
							<p>Card content</p>
							<p><span class="tag">Swag</span> <span class="tag tag--border">Awesome</span></p>
						</div>
					</div>
					<div class="col col-4">
						<div class="card card__body">
							<h3>Community Events</h3>
							<p>Card content</p>
						</div>
					</div>
				</div>

			</section>
		</div>

		<!-- @@includeIf includes file if it exists. Useful for non-essential, but @@include for required -->
		<!-- @@includeWhen to include on a truthy, @@includeFirst to include items in a coalesce  -->
		@includeIf('components/server-banner')

		@includeIf('components/discord-banner')

		@includeIf('components/faq')

	</main>

	@includeIf('components/footer')
	
@endsection