@extends('layouts.app')



@section('content')
    {{-- Hero --}}
    <section class="page-hero">
        <div class="page-hero-bg"
            style="background-image:url('https://images.unsplash.com/photo-1486325212027-8081e485255e?w=1920&q=80')"></div>
        <div class="page-hero-overlay"></div>
        <div class="container page-hero-content">
            <div class="page-hero-title">{{ $pageTitle ?? 'Our Projects' }}</div>
            <div class="breadcrumb-nav">
                <a href="{{ route('home') }}">Home</a>
                <span class="sep"><i class="bi bi-chevron-right"></i></span>
                <span class="current">{{ $pageTitle ?? 'Projects' }}</span>
            </div>
        </div>
    </section>



    <section class="section-pad bg-white" id="projects">
        <div class="container">
            <div data-aos="fade-up">
                <div class="text-center mb-2">
                    <span class="section-badge-dubble">Projects</span>
                </div>
                <h1 class="section-title text-center">All <span>Projects</span></h1>
                <p class="section-subtitle text-center">
                    Explore our diverse portfolio of premium residential and commercial developments across the region.
                </p>
            </div>


            {{-- Filter Tabs --}}
            <div class="filter-tabs">
                <button class="filter-tab active" data-filter="all">All Projects</button>
                <button class="filter-tab" data-filter="handover">Handover</button>
                <button class="filter-tab" data-filter="ongoing">On Going</button>
                <button class="filter-tab" data-filter="ready">Ready to Sale</button>
                <button class="filter-tab" data-filter="upcoming">Up Coming</button>
            </div>

            <div class="row gy-4 gx-md-4">
                @include('components.handover-projects')
                @include('components.on-going-projects')
                @include('components.upcoming-projects')
            </div>

        </div>
    </section>





    {{-- CTA --}}
    @include('components.call-to-action')
@endsection