@extends('layouts.app')

@section('content')
	<section id="hero" class="p-t-50 position-relative">
        @if (session()->has('success'))
            <script>
                Swal.fire({
                    title: 'Thank you for contacting us!',
                    text: 'We will get in touch with you soon.',
                    icon: 'success',
                    showConfirmButton: false,
                    timer: 3000
                })
            </script>
        @endif
		<div class="container-xl">
            <div class="phone-graphics">
                <div class="head-phone phone-left"><img src="images/mockup_header_left.png" width="100%" alt="feature" class="" /><h1 class="phone-cap left-cap">Musician</h1></div>
                <div class="head-phone phone-right"><img src="images/mockup_header.png" width="100%" alt="feature" class="" /><h1 class="phone-cap right-cap">Hirer</h1></div>
            </div>
			<div class="row hero-text">
				<div class="col-lg-8 offset-lg-2 col-12">
					<div class="text-center">
                    <h1 class="headingH1 p-b-100 text-container">Welcome to Music Buddy</h1>
                    <div class="phone-graphics2">
                        <img src="images/mobile_header.png" width="100%" alt="feature" class="" />
                    </div>
					<p class="f-20 text-container p-b-16">The App where you can live stream your music as a Musician to paying customers.. from anywhere to anyone</p>
					<p class="p-b-50 f-20 text-container">Sign up today as a Musician and Livestream your Music through the Music Buddy App to paying Customers</p>
					<div class="m-b-216">
						<p class="fw-bold p-b-50">Available on</p>
						<a href="https://apps.apple.com/nz/app/music-buddy/id1525061757"><img src="/images/btn_apple_appstore@2x.png" width="260px" class="download-icons"/></a>
					</div>
					</div>
				</div>
			</div>
		</div>
	</section>
    </header>

	<section id="about" class="p-t-80 p-b-100 about-section">
		<div class="container">
			<div class="row text-center">
				<div class="col-12 px-lg-5 px-1">
					<h2 class="headingH2 p-b-40">About us</h2>
					<p class="f-20">Music Buddy is a live streaming App for Musicians to play their Music to paying Customers. It Enables Musicians to build a profile and take bookings from customers to perform live Music from anywhere directly to the customer through the App.
                    <br />Customers can browse the Occasions and Genres and choose something that suits their taste in Music or choose a special request.
					<br />The Musician gets paid via Stripe</p>
				</div>
			</div>
		</div>
	</section>

	<section class="p-b-100 p-t-100 feature-section" id="features">
        <div class="container-xl">
            <div class="heading text-center p-b-50">
                <h5 class="headingH2">Features</h5>
            </div>
			<div class="row align-items-center">
                <div class="col-lg-4 pb-4 pb-lg-0">
					<div class="text-center feature-phone">
						<img src="images/mockup_feature.png" width="100%" alt="feature" class="feature-img" />
                        <h1 class="feature-title top">Hirer</h1>
                        <h1 class="feature-title side">Musician</h1>
					</div>
				</div>
                <div class="col-lg-8">
                    <div class="row equal-height-row">
                        <div class="col-lg-6 mb-4">
                            <div class="feature-card">
                                <div class="d-flex align-items-center mb-2"><i class="far fa-dot-circle f-44 me-2"></i><h3 class="f-20 fw-bold">Musicians</h3></div>
                                <ul class="liststyle pt-3">
                                    <li>Build your profile and connect your stripe account</li>
                                    <li>Choose your Genres, Occasions and Instruments you play</li>
                                    <li>Select when you are available to play and set up your Live Stream through the Music Buddy app</li>
                                    <li>Let your followers know on your Social media platforms that they can book you for gigs</li>
                                    <li>Take as many bookings as you like ..when you like!</li>
                                    <li>The Hirer pays you directly through Stripe</li>
                                    <li>An excellent way to earn more money as a Musician!</li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-lg-6 mb-4">
                            <div class="feature-card">
                                <div class="d-flex align-items-center mb-2"><i class="far fa-dot-circle f-44 me-2"></i><h3 class="f-20 fw-bold">Hirers</h3></div>
                                <ul class="liststyle pt-3">
                                    <li>Download the Music Buddy App and scroll through all the Musicians profiles</li>
                                    <li>Select a Genre or Occasion and Musician you like</li>
                                    <li>Choose a date and time for when you would like to see the Musician and Book them</li>
                                    <li>Add your card to make a payment to the Musician via Stripe</li>
                                    <li>Wait till the time of you gig and click on Go Live and enjoy the show. You can even cast the gig to your TV!</li>
                                    <li>The Music Buddy App is a great way to support Musicians worldwide!</li>
                                    <li>A must-have app for Music enthusiasts everywhere</li>
                                </ul>
                            </div>
                        </div>
                       <!--  <div class="col-lg-6 mb-4">
                            <div class="feature-card">
                            <div class="d-flex align-items-center mb-2"><i class="far fa-dot-circle f-44 me-2"></i><h3 class="f-20 fw-bold">Live Stream</h3></div>
                                <p>Set up your location for live streaming your performances, mount your phone on a stand suitable and adjusting the lighting
                                <br />Test the sound and video, connect your phone through a digital interface if you like or just play through the camera and microphone on your phone ..ready to perform! </p>
                            </div>
                        </div>
                        <div class="col-lg-6 mb-4">
                            <div class="feature-card">
                                <div class="d-flex align-items-center mb-2"><i class="far fa-dot-circle f-44 me-2"></i><h3 class="f-20 fw-bold">Get more gigs</h3></div>
                                <p>Make sure you share your Music Buddy Musicians Profile on all your Social Media so customers know to get the Music buddy app and start booking you today!</p>
                            </div>
                        </div> -->
                    </div>
                </div>
			</div>

            </div>
    </section>


	<section class="p-b-50 pt-4 screen-section" id="screens">
		<div class="container position-relative">
			<div class="heading text-center">
                <h5 class="headingH2">Screens</h5>
            </div>
			<div class="swiper mySwiper">
			<div class="swiper-wrapper">
				<div class="swiper-slide"><img src="/images/3.1.png" alt="slider image" /></div>
				<div class="swiper-slide"><img src="/images/3.2.png" alt="slider image" /></div>
				<div class="swiper-slide"><img src="/images/3.3.png" alt="slider image" /></div>
				<div class="swiper-slide"><img src="/images/3.4.png" alt="slider image" /></div>
				<div class="swiper-slide"><img src="/images/4.2.png" alt="slider image" /></div>
				<div class="swiper-slide"><img src="/images/5.4.png" alt="slider image" /></div>
                <div class="swiper-slide"><img src="/images/6.0.png" alt="slider image" /></div>
                <div class="swiper-slide"><img src="/images/6.1.png" alt="slider image" /></div>
                <div class="swiper-slide"><img src="/images/1.4.png" alt="slider image"/></div>
			</div>
			</div>
                <div class="swiper-button-next"><i class="fa fa-arrow-right d5"></i></div>
                <div class="swiper-button-prev"><i class="fa fa-arrow-left d5"></i></div>
		</div>


    </section>

	<section id="contact" class="">
		<div class="container-xl contact-card">
			<div class="row">
                <div class="col-lg-8">
				<h2 class="headingH2">Contact Us</h2>
                <p class="p-b-32">Need support?</p>
					<form id="contact-form" action="{{ route('contact-us.store') }}" method="POST" class="form-horizontal">
						{{ csrf_field() }}

						<div class="row">
                            <div class="col-md-12 m-b-32">
                                <p>You are a</p>
                            </div>
                            <div class="col-md-3 m-b-32">
								<input type="radio" name="userradio" class="form-radio" value="Musician" checked/> Musician
							</div>
                            <div class="col-md-3 m-b-32">
								<input type="radio" name="userradio" class="form-radio" value="Hirer" /> Hirer
							</div>
                            <div class="col-md-6">
							</div>
							<div class="col-md-6 mb-3">
								<input type="text" name="name" placeholder="Name" class="form-text" value="{{ old('name') }}" required/>
							</div>

							<div class="col-md-6 mb-3">
								<input type="email" name="email" placeholder="Email" class="form-text" value="{{ old('email') }}" required/>
							</div>

							<div class="col-md-12 mb-3">
								<textarea name="userMessage" class="form-text-area"  placeholder="Message" rows="5" maxlength="255">{{ old('userMessage') }}</textarea>
							</div>


							@if (config('features.security.recaptcha_enabled'))

								<div class="col-md-9 col-md-offset-3 m-b-32">
									<div class="g-recaptcha" data-sitekey="{{ env('RECAPTCHA_SITE_KEY') }}"></div>
								</div>

							@endif


							<div class="col-md-12">
								<button type="submit" class="nav-button">Submit</button>
							</div>
						</div>

					</form>
                </div>
                <div class="col-lg-4">
                    <div class=" ps-0 ps-lg-5">
						<div class="p-b-50"><a href="mailto:hello@themusicbuddyapp.com" class="d5"><i class="fa fa-envelope icons a1"></i>hello@themusicbuddyapp.com</a></div>
                        <!-- <div class="mb-5"><a href="" class="d5"><i class="fa fa-phone-alt icons a1 me-2"></i>123 456 789</a></div> -->
                        <p class="fw-bold">Follow Us</p>
						<div class="social-media pt-3">
                            <a href="https://www.tiktok.com/@musicbuddy_app" rel="nofollow" target="_blank" class="d5"><i class="fab fa-tiktok icons a1"></i></a>
							<a href="https://www.instagram.com/musicbuddy_app/" rel="nofollow" target="_blank" class="d5"><i class="fab fa-instagram-square icons a1"></i></a>
							<a href="https://www.facebook.com/themusicbuddyapp" rel="nofollow" target="_blank" class="d5"><i class="fab fa-facebook-f icons a1"></i></a>
                            <!-- <a href="{{ \EMedia\AppSettings\Facades\Setting::get('FACEBOOK_URL') }}" rel="nofollow" target="_blank" class="d5"><i class="fab fa-youtube icons a1"></i></a> -->
                            <a href="https://twitter.com/musicbuddy_app" rel="nofollow" target="_blank" class="d5"><i class="fab fa-twitter icons a1"></i></a>
						</div>
					</div>
                </div>
			</div>
		</div>
	</section>

@endsection