tutoring/resources/views/home/marketing.blade.php

<x-app-layout>
  <!-- HERO with image + modal video -->
  <section x-data="{ open:false }" class="relative overflow-hidden bg-gradient-to-b from-indigo-50 to-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-24 grid lg:grid-cols-2 gap-10 items-center">
      <div>
        <h1 class="text-4xl sm:text-5xl font-extrabold tracking-tight text-gray-900">
          Complete A-Level Maths, taught clearly and step-by-step.
        </h1>
        <p class="mt-4 text-lg text-gray-600">
          Short videos, worked examples, and support when you need it—aligned to AQA, Edexcel, and OCR.
        </p>
        <div class="mt-8 flex flex-wrap gap-3">
          <a href="{{ route('register') }}" class="inline-flex items-center px-5 py-3 rounded-xl bg-indigo-600 text-white font-semibold shadow hover:bg-indigo-700">
            Start learning
          </a>
          <button @click="open=true" type="button" class="inline-flex items-center px-5 py-3 rounded-xl bg-white text-indigo-700 ring-1 ring-indigo-200 hover:ring-indigo-300">
            ▶ Watch sample (3 min)
          </button>
          <a href="#how-it-works" class="inline-flex items-center px-5 py-3 rounded-xl bg-white text-gray-700 ring-1 ring-gray-200 hover:ring-gray-300">
            How it works
          </a>
        </div>
      </div>

      <!-- Full-bleed image with play overlay -->
      <div class="relative">
        <div class="aspect-[4/3] sm:aspect-[16/10] lg:aspect-[16/9] rounded-2xl overflow-hidden shadow ring-1 ring-gray-200">
          <picture>
            <source srcset="/images/hero-poster.avif" type="image/avif">
            <source srcset="/images/hero-poster.webp" type="image/webp">
            <img src="/images/hero-poster.jpg" alt="Lesson preview" class="w-full h-full object-cover" loading="eager"/>
          </picture>
          <button @click="open=true" type="button" class="absolute inset-0 grid place-items-center bg-black/0 hover:bg-black/10 transition">
            <span class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/90 text-gray-900 font-semibold shadow">
              ▶ Play sample
            </span>
          </button>
        </div>
      </div>
    </div>

    <!-- Accessible modal with 16:9 player -->
    <div x-show="open" x-transition.opacity @keydown.escape.window="open=false" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4" style ="height:100%">
      <div @click.away="open=false" class="w-full max-w-3xl" style ="height:100%">
        <div class="aspect-video rounded-2xl overflow-hidden shadow-lg bg-black" style ="height:80%">
          <iframe
			style ="height:100%"
            src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ?rel=0&modestbranding=1&playsinline=1"
            title="Sample lesson" class="w-full h-full"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
            allowfullscreen></iframe>
        </div>

        <div class="mt-3 text-center">
          <button @click="open=false" type="button" class="px-4 py-2 text-sm rounded-lg bg-white text-gray-800 shadow hover:bg-gray-50">Close</button>
        </div>
      </div>
    </div>
  </section>

  <!-- HOW IT WORKS with subtle icons -->
  <section id="how-it-works" class="bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-14">
      <div class="grid sm:grid-cols-3 gap-6">
        <div class="group bg-white p-6 rounded-2xl shadow-sm ring-1 ring-gray-100 hover:shadow-md hover:-translate-y-0.5 transition">
          <div class="w-10 h-10 rounded-xl ring-1 ring-indigo-100 grid place-items-center mb-3">
            <svg viewBox="0 0 24 24" class="w-5 h-5"><path d="M3 12h18M12 3v18" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
          </div>
          <h3 class="font-semibold text-gray-900">Bite-sized lessons</h3>
          <p class="mt-2 text-gray-600">5–10 minute videos with clear, exam-ready explanations.</p>
        </div>
        <div class="group bg-white p-6 rounded-2xl shadow-sm ring-1 ring-gray-100 hover:shadow-md hover:-translate-y-0.5 transition">
          <div class="w-10 h-10 rounded-xl ring-1 ring-indigo-100 grid place-items-center mb-3">
            <svg viewBox="0 0 24 24" class="w-5 h-5"><path d="M4 6h16M4 12h10M4 18h7" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
          </div>
          <h3 class="font-semibold text-gray-900">Targeted practice</h3>
          <p class="mt-2 text-gray-600">Worked examples that build confidence on each topic.</p>
        </div>
        <div class="group bg-white p-6 rounded-2xl shadow-sm ring-1 ring-gray-100 hover:shadow-md hover:-translate-y-0.5 transition">
          <div class="w-10 h-10 rounded-xl ring-1 ring-indigo-100 grid place-items-center mb-3">
            <svg viewBox="0 0 24 24" class="w-5 h-5"><path d="M5 12l5 5L19 8" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
          </div>
          <h3 class="font-semibold text-gray-900">Book support</h3>
          <p class="mt-2 text-gray-600">1-to-1 help when you’re stuck—no waiting till next week.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- EXAM BOARDS strip with decorative blob -->
  <section class="bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
      <div class="relative overflow-hidden rounded-2xl ring-1 ring-gray-200 p-6 sm:p-8 bg-white">
        <div class="absolute -top-14 -right-14 w-64 h-64 rounded-full bg-indigo-50 blur-3xl"></div>
        <h2 class="text-2xl font-bold text-gray-900 relative">Mapped to UK exam boards</h2>
        <p class="mt-2 text-gray-600 relative">AQA • Edexcel • OCR — learn exactly what you’ll be examined on.</p>
      </div>
    </div>
  </section>

  </section>

  <!-- LIGHT ABOUT + TESTIMONIALS -->
  <section class="bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 grid lg:grid-cols-2 gap-8">
      <div class="bg-white rounded-2xl shadow-sm ring-1 ring-gray-100 p-6 grid grid-cols-[auto,1fr] gap-4 items-center">
        <img src="/images/richard-headshot.jpg" alt="Richard" class="w-16 h-16 rounded-full object-cover ring-2 ring-white shadow" loading="lazy">
        <div>
          <div class="font-semibold text-gray-900">Learn with Richard</div>
          <p class="mt-1 text-gray-600">Clear explanations and worked examples that stick—no fluff, just what helps you score.</p>
        </div>
      </div>

      <div class="bg-white rounded-2xl shadow-sm ring-1 ring-gray-100 p-6">
        <figure class="text-gray-700">
          <blockquote>“Clear and to the point—my son actually gets it now.”</blockquote>
          <figcaption class="mt-2 text-sm text-gray-500">— Parent</figcaption>
        </figure>
        <hr class="my-4 border-gray-100">
        <figure class="text-gray-700">
          <blockquote>“Went from a C to an A. The examples made it click.”</blockquote>
          <figcaption class="mt-2 text-sm text-gray-500">— Student</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <!-- CTA STRIP -->
  <section class="bg-indigo-600">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 text-center">
      <h3 class="text-2xl font-bold text-white">Ready to start your first lesson?</h3>
      <div class="mt-4">
        <a href="{{ route('register') }}" class="inline-flex items-center px-6 py-3 rounded-xl bg-white text-indigo-700 font-semibold shadow hover:bg-gray-100">
          Create a free account
        </a>
      </div>
    </div>
  </section>

  <!-- FOOTER with teacher login only -->
  <footer class="text-center text-sm text-gray-500 py-6">
    <a href="{{ url('/teacher/login') }}" class="hover:text-indigo-700">Teacher login</a>
  </footer>
</x-app-layout>