@extends('frontend.layouts.home')
@section('content')

<section class="index-bg">
	<img src="{{asset('frontend/img/pattern2024.png') }}" alt="" class="img-fluid">
</section>
<section class="hero index">
  <div class="container">
    <div class="row align-items-center justify-content-between">
      <div class="col-lg-6 order-2 order-md-1 mb-3 mb-lg-0">
      	<h1>Achieve Top GCSE Grades</h1>
        <ul>
					<li><i class='bx bxs-check-circle'></i> Online Science Tuitions</li>
					<li><i class='bx bxs-check-circle'></i> Videos & Quizzes</li>
					<li><i class='bx bxs-check-circle'></i> Exam Resources</li>
					<li><i class='bx bxs-check-circle'></i> Created by Teachers</li>
				</ul>
        <div>
          <a data-bs-toggle="modal" data-bs-target="#signup-modal" target="_blank" class="btn btn-white">Start Free Trial</a>
        </div>
      </div>
      <div class="col-lg-6 order-1 order-md-2">
        <div class="banner-video" style="background: url({{ url('frontend/img/banner2.png') }}); background-size:cover">
					<div class="btn btn-play" data-bs-toggle="modal" data-bs-target="#videoModal"><i class='bx bx-play'></i>
				</div>
      </div>
    </div>
  </div>
</section>
<section class="section grid">
  <div class="container">
		<div class="text-center">
			<h2 class="sec-title">KayScience For Students: The Best Science Homework Platform</h2>
		</div>
    <div class="row align-items-center justify-content-between py-5">
      <div class="col-lg-6">
				<div class="vid-box">
					<video autoplay muted loop>
						<source src="{{asset('frontend/video/1. Tuition.mp4') }}" type="video/mp4">
					</video>
				</div>
      </div>
      <div class="col-lg-6">
				<div class="content">
					<h2>Live Online Science Tuition</h2>
					<ul>
						<li><i class='bx bxs-message-square-check'></i> Live Biology, chemistry and physics lessons</li>
						<li><i class='bx bxs-message-square-check'></i> Access lessons using KayScience account</li>
						<li><i class='bx bxs-message-square-check'></i> Sessions repeated five times per evening</li>
					</ul>
					<div class="ms-0 ms-md-5 ps-0 ps-md-5 text-center text-md-start"><a href="{{ url('tuition-timetable') }}" class="btn btn-blue ms-0 ms-md-5">Tution Timetable</a></div>
				</div>
      </div>
    </div>
    <div class="row align-items-center justify-content-between py-5">
      <div class="col-lg-6 order-1 order-md-2">
				<div class="vid-box">
					<video autoplay muted loop>
						<source src="{{asset('frontend/video/2. VIDEOS_ Student HW videos and Quiz.mp4') }}" type="video/mp4">
					</video>
				</div>
      </div>
      <div class="col-lg-6 order-2 order-md-1">
				<div class="content">
					<h2>GCSE Science Videos & Quizzes</h2>
					<ul>
						<li><i class='bx bxs-message-square-check'></i> 850+ GCSE science videos & exam questions</li>
						<li><i class='bx bxs-message-square-check'></i> Specialist videos to teach students</li>
						<li><i class='bx bxs-message-square-check'></i> Over 10,000 trackable quiz questions</li>
					</ul>
					<div class="ms-0 ms-md-5 ps-0 ps-md-5 text-center text-md-start"><a href="{{ url('course/biology') }}" class="btn btn-blue ms-0 ms-md-5">Watch Our Videos</a></div>
				</div>
      </div>
    </div>
    <div class="row align-items-center justify-content-between py-5">
      <div class="col-lg-6">
				<div class="vid-box">
					<img src="{{asset('frontend/video/3. resources.png') }}" alt="" class="img-fluid">
					<!-- <video autoplay muted loop>
						<source src="{{asset('frontend/video/3. resources.mp4') }}" type="video/mp4">
					</video> -->
				</div>
      </div>
      <div class="col-lg-6">
				<div class="content">
					<h2>GCSE Past Papers for GCSE Revision</h2>
					<ul>
						<li><i class='bx bxs-message-square-check'></i> GCSE biology, chemistry & physics past papers</li>
						<li><i class='bx bxs-message-square-check'></i> KayScience exam question booklets</li>
						<li><i class='bx bxs-message-square-check'></i> Mark schemes included to provide feedback</li>
					</ul>
					<div class="ms-0 ms-md-5 ps-0 ps-md-5 text-center text-md-start"><a href="{{ url('exam-questions') }}" class="btn btn-blue ms-0 ms-md-5">See Exam Resources</a></div>
				</div>
      </div>
    </div>
    <div class="row align-items-center justify-content-between py-5">
      <div class="col-lg-6 order-1 order-md-2">
				<div class="vid-box">
					<video autoplay muted loop>
						<source src="{{asset('frontend/video/4. exam practice.mp4') }}" type="video/mp4">
					</video>
				</div>
      </div>
      <div class="col-lg-6 order-2 order-md-1">
				<div class="content">
					<h2>Extended Response Exam Practice</h2>
					<ul>
						<li><i class='bx bxs-message-square-check'></i> Practice answering 3-6 mark exam questions</li>
						<li><i class='bx bxs-message-square-check'></i> Exam questions directly linked to videos</li>
						<li><i class='bx bxs-message-square-check'></i> Instant exam-style feedback to get a grade 9</li>
					</ul>
					<div class="ms-0 ms-md-5 ps-0 ps-md-5 text-center text-md-start"><a  href="{{ url('/register')}}" target="_blank" class="btn btn-blue ms-0 ms-md-5">Free Student Trial</a></div>
				</div>
      </div>
    </div>
  </div>
</section>
<section class="section grid pt-5" style="background:#E9EEF5">
  <div class="container">
		<div class="text-center">
			<h2 class="sec-title">KayScience For Teachers: Reduce Teacher Workload</h2>
		</div>
    <div class="row align-items-center justify-content-between py-5">
      <div class="col-lg-6">
				<div class="vid-box">
					<video autoplay muted loop>
						<source src="{{asset('frontend/video/5. set tasks.mp4') }}" type="video/mp4">
					</video>
				</div>
      </div>
      <div class="col-lg-6">
				<div class="content">
					<h2>Set Videos & Quizzes For Homework</h2>
					<ul>
						<li><i class='bx bxs-message-square-check'></i> Track minutes watched and quiz scores</li>
						<li><i class='bx bxs-message-square-check'></i> KS4 and KS3 videos and resources</li>
						<li><i class='bx bxs-message-square-check'></i> Automated quiz marking to save time</li>
					</ul>
					<div class="ms-0 ms-md-5 ps-0 ps-md-5 text-center text-md-start"><a href="{{ url('https://calendly.com/kayscience/') }}" class="btn btn-blue ms-0 ms-md-5">Free School Trial</a></div>
				</div>
      </div>
    </div>
    <div class="row align-items-center justify-content-between py-5">
      <div class="col-lg-6 order-1 order-md-2">
				<div class="vid-box">
					<video autoplay muted loop>
						<source src="{{asset('frontend/video/6. Question level analysis.mp4') }}" type="video/mp4">
					</video>
				</div>
      </div>
      <div class="col-lg-6 order-2 order-md-1">
				<div class="content">
					<h2>Question Level Analysis</h2>
					<ul>
						<li><i class='bx bxs-message-square-check'></i> Identify misconceptions and weak topics</li>
						<li><i class='bx bxs-message-square-check'></i> See what the students got wrong</li>
						<li><i class='bx bxs-message-square-check'></i> Data to inform your teaching</li>
					</ul>
					<div class="ms-0 ms-md-5 ps-0 ps-md-5 text-center text-md-start"><a href="{{ url('/teacher/register')}}" target="_blank" class="btn btn-blue ms-0 ms-md-5">Free Teacher Trial</a></div>
				</div>
      </div>
    </div>
    <div class="row align-items-center justify-content-between py-5">
      <div class="col-lg-6">
				<div class="vid-box">
					<video autoplay muted loop>
						<source src="{{asset('frontend/video/7. retrieval practice.mp4') }}" type="video/mp4">
					</video>
				</div>
      </div>
      <div class="col-lg-6">
				<div class="content">
					<h2>Retrieval Practice / Do Now's</h2>
					<ul>
						<li><i class='bx bxs-message-square-check'></i> Create 5 or 10 questions in seconds</li>
						<li><i class='bx bxs-message-square-check'></i> Reduce teacher workload and be happier</li>
						<li><i class='bx bxs-message-square-check'></i> Spend time doing more important things</li>
					</ul>
					<div class="ms-0 ms-md-5 ps-0 ps-md-5 text-center text-md-start"><a href="{{ url('schools/#school-trial-form') }}" class="btn btn-blue ms-0 ms-md-5">School Pricing</a></div>
				</div>
      </div>
    </div>
    <div class="row align-items-center justify-content-between py-5">
      <div class="col-lg-6 order-1 order-md-2">
				<div class="vid-box">
					<video autoplay muted loop>
						<source src="{{asset('frontend/video/8. worksheet generator.mp4') }}" type="video/mp4">
					</video>
				</div>
      </div>
      <div class="col-lg-6 order-2 order-md-1">
				<div class="content">
					<h2>PDF Worksheet Generator</h2>
					<ul>
						<li><i class='bx bxs-message-square-check'></i> Create and edit worksheets in seconds</li>
						<li><i class='bx bxs-message-square-check'></i> Use our KS4 and KS3 question bank</li>
						<li><i class='bx bxs-message-square-check'></i> Print worksheets for lessons and homework</li>
					</ul>
					<div class="ms-0 ms-md-5 ps-0 ps-md-5 text-center text-md-start">
						<button class="btn btn-blue" data-bs-toggle="modal" data-bs-target="#howto">How KayScience Works</button>
					</div>
				</div>
      </div>
    </div>
  </div>
</section>
<section class="py-4 bg-kay">
	<div class="container-fluid text-center">
		<h2 class="text-white fs-1 fw-bold">Over 5 million views & 75 million questions answered</h2>
	</div>
</section>
@include('frontend.layouts.calendly')
<div class="modal fade" id="howto" tabindex="-1" aria-labelledby="" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered modal-lg">
		<div class="modal-content">
			<div class="modal-body">
				<iframe width="100%" height="430" src="https://www.youtube.com/embed/fuQgW4QN5jw" tilte="How KayScience Works" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
			</div>
		</div>
	</div>
</div>
<!-- @include('frontend.layouts.feature') -->
<!-- @include('frontend.layouts.highlight') -->
<!-- @include('frontend.layouts.compare') -->
<!-- @include('frontend.layouts.benefits')-->
<!-- @include('frontend.layouts.steps')-->
<!-- @include('frontend/layouts/mobile-app') -->
<!-- @include('frontend.layouts.trust-pilot')-->
<!-- @include('frontend.layouts.subject')-->
@include('frontend/pages/modal')
@endsection
@push('inner-scripts')
<script>
	
  /**
   * Video pause on close
   */
    
    $('#howto').on('hidden.bs.modal', function () {
      $("#howto iframe").attr("src", $("#howto iframe").attr("src"));
    });
  $(document).ready(function () {
      $('[data-bs-toggle="tooltip"]').tooltip();
  });
</script>
<script>
  $(document).ready(function () {
      $('[data-bs-toggle="tooltip"]').tooltip();