@extends('master')

@section('title', 'Home')

@section('head-metas')
	@parent
	<link rel="stylesheet" href="css/app.css">
@endsection

@section('content')
	@parent
	<main>
	<div id="app" class="register-area">
	<Register-Form></Register-Form>
			<img v-if="loading" type="image/svg+xml" class="loading-icon" src="images/loading.svg" alt=""/>
	</div>
	<div class='landing-hero'>
		<div class='hero-filter'>
			<h2>The web's #1 content promoter</h2>
			<p>Give your brand the boost it needs for oganic growth with the
			web's most trusted social media marketing panel.</p>
			<a class='register-btn'>Register Now</a>
		</div>
	</div>
	<div class='blue-background'><section class="about-us">
		<p>
		We're a social media content promoter based in Canada, helping
		entertainers and brands perfect their marketing campaigns through
		targeted views and engagements. By providing organic impressions and
		retention
		from real people in your area, we'll boost your search engine
		rankings and get you noticed.
		</p>
	</section>
	<section class='services-cards'>
	<h2>Our Services</h2>
	<div class="cards">
	<div class="card">
	<img src="/images/youtube.svg" alt="youtube-icon">
	<h3>Youtube</h3>
	<ul>
		<li>Elit odit voluptas unde ex adipisicing! Nulla</li>
		<li>Ipsum quibusdam magni laboriosam sit.</li>
		<li>Adipisicing nisi porro voluptatum excepturi repudiandae Corrupti
		quam</li>
		<li>Elit repellat consequuntur.</li>
	</ul>
	<button>Select</button>
	</div>
	<div class="card">
	<img src="/images/spotify.svg" alt="spotify-icon">
	<h3>Spotify</h3>
	<ul>
		<li>Elit odit voluptas unde ex adipisicing! Nulla</li>
		<li>Ipsum quibusdam magni laboriosam sit.</li>
		<li>Adipisicing nisi porro voluptatum excepturi repudiandae Corrupti quam</li>
		<li>Elit repellat consequuntur.</li>
	</ul>
	<button>Select</button>
	</div>
	<div class="card">
	<img src="/images/twitter.svg" alt="twitter-icon">
	<h3>Twitter</h3>
	<ul>
		<li>Elit odit voluptas unde ex adipisicing! Nulla</li>
		<li>Ipsum quibusdam magni laboriosam sit.</li>
		<li>Adipisicing nisi porro voluptatum excepturi repudiandae Corrupti quam</li>
		<li>Elit repellat consequuntur.</li>
	</ul>
	<button>Select</button>
	</div>
		
		</div></div>
	</section>
	<section class='features-info'>
	<h2>Why We Are the Best</h2>
	<div class="circle-prop">
	<svg height="100%" preserveAspectRatio="none" viewBox="0 0 500 500"fill='white' version="1.1" id="Layer_1" x="0px" y="0px"
		 xml:space="preserve">
			<path stroke-width="20" fill="none" stroke="#ddd" d="M0,10 C400,0,500,256,250,500"/>
			<!- <path fill="none" stroke="white" d="M256,10C115.03,0,0,115.05,0,256c0,140.97,115.05,256,256,256c140.97,0,256-115.05,256-256C512,115.03,396.95,0,256,0z "/> -->
	</svg>
	<img src="/images/desk.svg" alt="teamwork">
	</div>
<div class="info-cards">
	<div class="info-card"><p>
	Dolor sint maiores soluta culpa voluptatem ea Similique facere perspiciatis
	in quos suscipit. Atque velit dolor repudiandae nesciunt ullam Blanditiis
	asperiores eius quos aliquid ex Rem rem quo facilis commodi.
	</p>
</div>
	<div class="info-card"><p>
	Elit aliquam velit ad incidunt in porro laborum? Unde eligendi dolores ad
	iure quia doloremque! Aliquid pariatur autem sed iure ipsam? Et ipsam
	architecto dolorum sapiente facilis quos Aut quasi</p>
</div>
	<div class="info-card"><p>
	Ipsum incidunt non illum mollitia omnis! Minima possimus eveniet autem non
	modi? Molestiae aspernatur provident at mollitia veniam? Ad aliquid esse ipsam
	animi minus Excepturi est unde atque debitis consectetur.
</p>
</div>
	<div class="info-card"><p>
	Consectetur repudiandae ad blanditiis non corrupti Aliquam quae eveniet
	corrupti quibusdam nisi maiores Dignissimos quas est explicabo laudantium
	excepturi Officia fugit fugiat sit officia sed ipsa accusantium? Minus eum
	porro</p>
</div></div>
	</section>
	<section class='panel-infos'>
		<h2>A User-Friendly Control Panel</h2>
		<img class="panel-preview" src="/images/host-panel.webp" alt="panel-preview">
		<div class="panel-info">
		<img src="/images/tap.svg" alt="">
		<h3>Easy to Use</h3>
		<p>Ipsum aperiam magni ad quos lorem Aperiam quia</p>
		</div>
		<div class="panel-info">
		<img src="/images/goal.svg" alt="">
		<h3>Powerful</h3>
		<p>Ipsum aperiam magni ad quos lorem Aperiam quia</p>
		</div>
		<div class="panel-info">
		<img src="/images/diagram.svg" alt="">
		<h3>Scalable</h3>
		<p>Ipsum aperiam magni ad quos lorem Aperiam quia</p>
		</div>
	</section>
	<section class='benefits-info'>
		<h2>Benefits of Buying Views</h2>
		<div>
		<p>
			Amet voluptatem quod tenetur in tempora! Ducimus nobis praesentium
			dolorum culpa corrupti Ipsum enim a vel veniam assumenda. Consequatur animi
			praesentium debitis aliquam autem? Optio consectetur nostrum rerum et
			exercitationem? lorem
		</p>
		<p>
			Amet ratione a atque libero cumque, tempore, corporis! Dolor
			debitis aut error provident suscipit. Sunt quam asperiores dicta ab nobis?
			Laboriosam accusamus officia expedita quidem possimus Dolor labore ullam omnis.
		</p>
		
		</div>
	</section>
	<section class='faq-info'>
		<h2>FAQ</h2>
		<div class="collapsibles">
		<div class="collapsible"><button>Adipisicing a placeat.</button>
		<div class="content"><p>
		Consectetur numquam nobis consequatur cupiditate iste, nulla dolorum dolore
		omnis? Recusandae aut rerum doloremque cupiditate nulla soluta? Deserunt illo
		dicta fugit ducimus perferendis? At fuga vitae error cupiditate amet magnam.
		</p></div></div>
		<div class="collapsible"><button>Adipisicing a placeat.</button>
		<div class="content"><p>
		Consectetur numquam nobis consequatur cupiditate iste, nulla dolorum dolore
		omnis? Recusandae aut rerum doloremque cupiditate nulla soluta? Deserunt illo
		dicta fugit ducimus perferendis? At fuga vitae error cupiditate amet magnam.
		</p></div></div>
		<div class="collapsible"><button>Adipisicing a placeat.</button>
		<div class="content"><p>
		Consectetur numquam nobis consequatur cupiditate iste, nulla dolorum dolore
		omnis? Recusandae aut rerum doloremque cupiditate nulla soluta? Deserunt illo
		dicta fugit ducimus perferendis? At fuga vitae error cupiditate amet magnam.
		</p></div></div>
		<div class="collapsible"><button>Adipisicing a placeat.</button>
		<div class="content"><p>
		Consectetur numquam nobis consequatur cupiditate iste, nulla dolorum dolore
		omnis? Recusandae aut rerum doloremque cupiditate nulla soluta? Deserunt illo
		dicta fugit ducimus perferendis? At fuga vitae error cupiditate amet magnam.
		</p></div></div>
		</div>
	</section>
	</main>
@endsection

@section('scripts')
	@parent
	<script src="js/app.js"></script>
	<script src="js/chunk-vendors.js"></script>
	<!-- <script src="main.js"></script> -->
@endsection