@extends('master')

@section('title', 'Home')

@section('head-metas')
	@parent
	<link rel="stylesheet" href="{{asset('main.css')}}">
@endsection

@section('content')
	@parent
	<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' href="/register">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>
	</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>
	</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>
	</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'>
		<h2>FAQ</h2>
		<div class="card">Amet officiis obcaecati et porro!</div>
		<div class="card">Dolor minus corporis labore error.</div>
		<div class="card">Ipsum nesciunt facilis veniam eos.</div>
		<div class="card">Ipsum adipisicing blanditiis magnam quasi sunt?</div>
		<div class="card">Sit quod nulla minima dignissimos itaque.</div>
		<div class="card">Sit quod nulla minima dignissimos itaque.</div>
	</section>
@endsection

@section('scripts')
	@parent
	<script src="main.js"></script>
@endsection