@extends('layouts.main')

@section('content')
@include('layouts.include.nav.main', ['fixed' => true])

<div class="d-block d-md-flex flex-column mbr hero liner-gb">
	<div class="d-block d-md-flex align-items-center justify-content-center">
		<!--<img src="/images/public/flop-bg-fluid.png" height="100%" class="flop-bg-fluid p-a op-h" />-->

		<div class="container set p-r pt-0 pt-md-5 mt-0 mt-md-5">
			<div class="row py-4 py-md-0 rl z">
				<div class="col-12 col-md-8 offset-md-2 text-center">
					<h1 class="flop-head f-bold sm">One link, <span class="gradient-text">many possibilities</span></h1>
					<h2 class="flop-desc mt-4 mt-md-4 m-f-ss op-q"><strong>Resite.link</strong> brings your links together with one main link – perfect for those websites that only allow one website URL!</h2>

					
					<div class="social-proof d-block d-md-flex">
						<div class="avatar-stack justify-content-center mb-3 mb-md-0" aria-hidden="true">
							<img src="https://i.resite.link/images/user/large/1.jpg?v=1793599015" />
							<img src="https://i.resite.link/images/user/large/3.jpg?v=1793601286" />
							<img src="https://i.resite.link/images/user/large/1003.png?v=1793486532" />
						</div>
						<span class="proof-line d-none d-md-block" aria-hidden="true"></span>
						<span><strong>Over 25,000 users</strong> trust Resite.link for their bio links</span>
					</div>

					@guest
					<div class="row mt-4 mt-md-5">
						<div class="col-12 col-md-8 offset-md-2">
							<form-username
							:custom="true"
							:hide-helper="true"
							:store-cookie="true"
							>
							</form-username>

							<a href="#" class="d-block text-center mt-3 color-black" data-toggle="modal" data-target="#connect-modal">
								Already on Resite.link? Log in
							</a>
						</div>
					</div>
					@endguest

					<phone-preview 
					class="mt-4 mt-md-4 pt-4"
					>	
					</phone-preview>

					<div class="after-phone-preview bg-white">
						<div class="row">
							<div class="col-12 col-md-6">

							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	@include('home.include.stage')
</div>

<section class="home-features bg-white bg-example d-none d-md-block pt-5">
	<div class="full">
		<div class="text-center">
			<h3 class="text-center mb-0">Real Users · Real Results</h3>
			<p class="op-h mt-1 p-half mb-0">See why many are making the switch</p>
		</div>
		<user-slider
		class="mt-5"
		:users="{{ json_encode($users) }}"
		:animations="{{ json_encode(\App\Animation::all()) }}"
		>
		</user-slider>
	</div>
</section>

<section class="home-features bg-white d-md-block pt-5">
	<div class="container">
		<div class="row">
			<div class="col-12 col-md-10 offset-md-1">
				<div class="row align-items-center mb-5 pb-2 mt-0 pt-3">
					<div class="col-12 text-left text-md-center">
						<h2 class="mb-3 lbld f-nm op-h">Start free. Grow with Pro.</h2>
						<h3 class="mb-0">Your links deserve a little more.</h3>
						<p class="op-h mt-3 p-half">Plans starting at $3.99/month.</p>
						<div class="mt-3">
							<a href="/pricing" class="mt-0">Compare Free and Pro</a>
                        </div>
					</div>
				</div>

				<div class="row align-items-center mb-4">
					<div class="col-12 col-md-6 text-center d-block d-md-none">
						<img src="/images/public/how-works/links.png" alt="Manage your links" width="100%" />
					</div>
					<div class="col-12 col-md-6">
						<h4 class="gradient-text">so many links - for free</h4>
						<h3>Up to {{ config('plans.free.links') }} links for free</h3>
						<p>Create up to {{ config('plans.free.links') }} links with Free, or {{ config('plans.pro.links') }} with Pro. Social links count toward your total.</p>
					</div>
					<div class="col-12 col-md-6 text-center d-none d-md-block">
						<img src="/images/public/how-works/links.png" class="fade-in-item right" alt="Manage your links" width="100%" />
					</div>
				</div>

				<div class="row align-items-center mb-4">
					<div class="col-12 col-md-6 text-center d-none d-md-block">
						<img src="/images/public/how-works/customize.png" class="fade-in-item left" alt="customize links" width="100%" />
					</div>

					<div class="col-12 col-md-6 text-center d-block d-md-none">
						<img src="/images/public/how-works/customize.png" alt="customize links" width="100%" />
					</div>

					<div class="col-12 col-md-6">
						<div class="pl-0 pl-md-5 pl-lg-0">
							<h4 class="gradient-text">To your desire</h4>
							<h3>Fully Customizable</h3>
							<p>From simple links to cards, full-backgrounds, headers, and fluid animations. Alter the colors of buttons, text and more!</p>
						</div>
					</div>
				</div>

				<div class="row align-items-center mb-4">
					<div class="col-12 col-md-6 text-center d-block d-md-none">
						<img src="/images/public/how-works/reports.png" alt="built-in reports" width="100%" />
					</div>

					<div class="col-12 col-md-6">
						<h4 class="gradient-text">easily track clicks and views</h4>
						<h3>Track Activity</h3>
						<p>Track clicks and page views with 7-day activity reports. Even export your clicks and views to a .csv file. </p>
					</div>

					<div class="col-12 col-md-6 text-center d-none d-md-block">
						<img src="/images/public/how-works/reports.png" class="fade-in-item right" alt="built-in reports" width="100%" />
					</div>
				</div>

				<div class="row align-items-center mb-4">
					<div class="col-12 col-md-6 text-center d-none d-md-block">
						<img src="/images/public/how-works/animation.png" class="fade-in-item left" alt="link animations" width="100%" />
					</div>

					<div class="col-12 col-md-6 text-center d-block d-md-none">
						<img src="/images/public/how-works/animation.png" alt="link animations" width="100%" />
					</div>

					<div class="col-12 col-md-6">
						<div class="pl-0 pl-md-5 pl-lg-0">
							<h4 class="gradient-text">draw attention to your links</h4>
							<h3>Link Animations</h3>
							<p>Animate your links to draw more attention. From fade-in to rubber band animations.</p>
						</div>
					</div>
				</div>

				<div class="row align-items-center mb-4">
					<div class="col-12 col-md-6 text-center d-block d-md-none">
						<img src="/images/public/how-works/accounts.png" alt="Manage multiple profiles with Pro" width="100%" />
					</div>

					<div class="col-12 col-md-6">
						<h4 class="gradient-text">for multiple accounts</h4>
						<h3>Multiple Accounts</h3>
						<p>Need more than one account? Pro lets you manage up to {{ config('plans.pro.accounts') }} profiles.</p>
					</div>

					<div class="col-12 col-md-6 text-center d-none d-md-block">
						<img src="/images/public/how-works/accounts.png" class="fade-in-item right" alt="Manage multiple profiles with Pro" width="100%" />
					</div>
				</div>

				<div class="row align-items-center mb-4">
					<div class="col-12 col-md-6 text-center d-none d-md-block">
						<img src="/images/public/how-works/schedule.png" class="fade-in-item left" alt="schedule links" width="100%" />
					</div>

					<div class="col-12 col-md-6 text-center d-block d-md-none">
						<img src="/images/public/how-works/schedule.png" alt="schedule links" width="100%" />
					</div>

					<div class="col-12 col-md-6">
						<div class="pl-0 pl-md-5 pl-lg-0">
							<h4 class="gradient-text">schedule based on minutes</h4>
							<h3>Schedule Links</h3>
							<p>Auto show or hide your links by date and time.</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>

<section class="bg-dblue mt-5 mt-md-5 py-5 d-none d-md-block">
	<div class="container py-5">
		<div class="row my-5 color-white">
			<div class="col-12 col-md-8 offset-md-2 text-center">
				<h2 class="mb-4 lbld f-p f-nm ttu">See what others are sayin</h2>

				<div id="carousel-reviews" class="carousel slide" data-ride="carousel">
						<div class="carousel-inner">
							<div class="carousel-item active">
							<h3 class="f-xxlg ldl mb-4">"Resite.link has been great. We're able to add as many links as we need, customize and keep track of views and clicks"</h3>
							<p class="mb-0 f-lg ldl f-p"><em>— Ware Repair Team</em></p>
						</div>

						<div class="carousel-item">
							<h3 class="f-xxlg ldl mb-4">"We've been looking for a free tool to help with additional links"</h3>
							<p class="mb-0 f-lg ldl f-p"><em>— G.O.C. Rocks</em></p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>

@include('layouts.include.footer')
@endsection