@extends('layouts.home')

@section('content')
  <div id="preloader"> … </div>

  <main class="main main--home" style="opacity:0">
    <canvas class="noise" id="noise"></canvas>

    <div class="scroll">
      <div class="home-page">

        {{-- 1️⃣ Section titles (text only) --}}
        <div class="page-title show">
          <ul>
            <li><div class="title">What is Polisplexity?</div><div class="number">1.0</div></li>
            <li><div class="title">Live Projects</div><div class="number">2.0</div></li>
            <li><div class="title">Recognitions</div><div class="number">3.0</div></li>
            <li><div class="title">What Partners Say</div><div class="number">4.0</div></li>
            <li><div class="title">Timeline</div><div class="number">5.0</div></li>
            <li><div class="title">Research & Insights</div><div class="number">6.0</div></li>
            <li><div class="title">Let’s Collaborate</div><div class="number">7.0</div></li>
          </ul>
          <canvas class="noise noise--inner" id="noise_menu"></canvas>
        </div>

        {{-- 2️⃣ Section containers with sticky-title + content --}}
        <div class="scrollable">
          <section class="home">
            <div class="sticky-title">
              <ul><li><div>What is Polisplexitys?</div><div>1.0</div></li></ul>
            </div>
              @include('home.sections.home')
          </section>
        </div>

        <div class="scrollable">
          <section class="projects">
            <div class="sticky-title">
              <ul><li><div>Live Projects</div><div>2.0</div></li></ul>
            </div>
              @include('home.sections.projects')
          </section>
        </div>

        <div class="scrollable">
          <section class="awards">
            <div class="sticky-title">
              <ul><li><div>Recognitions</div><div>3.0</div></li></ul>
            </div>
              @include('home.sections.awards')
          </section>
        </div>

        <div class="scrollable">
          <section class="testimonials">
            <div class="sticky-title">
              <ul><li><div>What Partners Say</div><div>4.0</div></li></ul>
            </div>
              @include('home.sections.testimonials')
          </section>
        </div>

        <div class="scrollable">
          <section class="experience">
            <div class="sticky-title">
              <ul><li><div>Timeline</div><div>5.0</div></li></ul>
            </div>
              @include('home.sections.experience')
          </section>
        </div>

        <div class="scrollable">
          <section class="news">
            <div class="sticky-title">
              <ul><li><div>Research & Insights</div><div>6.0</div></li></ul>
            </div>
              @include('home.sections.news')
          </section>
        </div>

        <div class="scrollable">
          <section class="contacts">
            <div class="sticky-title">
              <ul><li><div>Let’s Collaborate</div><div>7.0</div></li></ul>
            </div>
              @include('home.sections.contacts')
          </section>
        </div>

      </div>
    </div>
  </main>
@endsection