@extends('layouts.app')

@section('title', 'Projects')

@section('content')
<section style="background-image: url('{{ asset('images/about/banner.webp') }}');" class="w-full bg-cover bg-center bg-no-repeat relative">
    <!-- Upper Gradient overly -->
  <div class="bg-linear-to-t from-(--background)/0 to-(--background) h-32 w-full absolute top-0 left-0 right-0 z-2"></div>
  <!-- Lower Gradient overly -->
  <div class="bg-linear-to-b from-(--background)/0 to-(--background) h-32 w-full absolute bottom-0 left-0 right-0 z-2"></div>
    <div class="absolute inset-0 z-0 bg-(--background)/85"></div>
    <div class="max-w-7xl mx-auto px-5 md:px-8 lg:px-5 pt-28 pb-16 md:pb-36 md:pt-42 relative z-10">
        <h1 class="text-3xl md:text-4xl lg:text-5xl font-normal uppercase text-(--primary) text-center leading-normal reveal-text">Real estate projects</h1>
        <div class="mt-4 md:mt-6 flex items-center justify-center gap-2 select-none" data-aos="fade-up" data-aos-delay="50">
            <a href="{{ route('home') }}" class="text-sm md:text-[15px] font-medium text-neutral-100 inline-block uppercase">Home</a>
            <p class="text-sm md:text-[15px]">/</p>
            <p class="text-sm md:text-[15px] font-medium text-neutral-400 inline-block uppercase">Projects</p>
        </div>
    </div>
</section>
<section class="mt-14 mb-20 md:mb-36">
  <div class="max-w-7xl mx-auto px-5 lg:px-5">
    <!-- Section Indicator -->
    <div class="flex justify-start items-center gap-3 border-b border-white/10 w-full pb-4">
      <span class="aspect-square w-2.5 bg-(--primary) rounded-full"></span>
      <p class="text-sm md:text-base font-medium uppercase">Our projects</p>
    </div>
    <!-- 2 column Row -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-y-5 md:gap-x-7 lg:gap-x-14 mt-10 md:mt-14">
      <!-- Left -->
      <div>
        <h2 class="text-3xl md:text-4xl lg:text-5xl font-normal uppercase text-(--primary) reveal-text">A Portfolio Defined
by Disciplined Development</h2>
      </div>
      <!-- Right -->
      <div class="lg:ps-24">
        <p class="text-base text-neutral-300 font-medium capitalize" data-aos="fade-up" data-aos-delay="0">Our projects reflect an advisory-led approach to real estate development—where regulatory readiness, land strategy, and disciplined execution guide outcomes. Each engagement represents a structured response to context, feasibility, and long-term value creation.</p>
        <a href="" class="mt-6 md:mt-5 inline-block border-1 lg:border-2 border-white rounded-full py-2.5 px-6 relative overflow-hidden group hover:border-(--primary) active:border-(--primary) transition-all duration-300" data-aos="fade-up" data-aos-delay="150">
              <div class="absolute top-0 -left-1/1 w-full h-full bg-(--primary) rounded-full z-0 group-active:left-0 group-hover:left-0 transition-all duration-300"></div>
              <div class="text-xs md:text-xs lg:text-base inline-flex items-center justify-center gap-2 uppercase font-medium relative z-10 text-white group-active:text-(--background) group-hover:text-(--background) transition-all duration-300">
                Explore Our Approach
                <svg class="size-3 md:size-3 lg:size-5 -rotate-90" width="15" height="20" viewBox="0 0 15 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6.14173 15.4299L1.86256 11.1508C1.76263 11.0473 1.64309 10.9648 1.51092 10.908C1.37875 10.8512 1.23659 10.8213 1.09275 10.8201C0.948903 10.8188 0.80625 10.8462 0.673112 10.9007C0.539974 10.9552 0.419018 11.0356 0.317301 11.1373C0.215584 11.239 0.135143 11.36 0.0806723 11.4931C0.0262014 11.6263 -0.00120906 11.7689 4.09027e-05 11.9128C0.00129087 12.0566 0.031176 12.1988 0.0879524 12.3309C0.144729 12.4631 0.22726 12.5827 0.330729 12.6826L6.45914 18.811C6.6623 19.0141 6.9378 19.1282 7.22506 19.1282C7.51232 19.1282 7.78782 19.0141 7.99098 18.811L14.1194 12.6826C14.3167 12.4783 14.4259 12.2046 14.4235 11.9206C14.421 11.6365 14.3071 11.3648 14.1062 11.1639C13.9053 10.9631 13.6336 10.8492 13.3496 10.8467C13.0655 10.8442 12.7919 10.9534 12.5876 11.1508L8.30839 15.4299V1.08333C8.30839 0.796016 8.19426 0.520465 7.99109 0.317301C7.78793 0.114137 7.51238 0 7.22506 0C6.93774 0 6.66219 0.114137 6.45903 0.317301C6.25586 0.520465 6.14173 0.796016 6.14173 1.08333V15.4299Z" fill="currentColor" />
                </svg>
              </div>
            </a>
      </div>
    </div>
    <!-- Section Indicator -->
    <div class="mt-24 flex justify-start items-center gap-3 border-b border-white/10 w-full pb-4">
      <span class="aspect-square w-2.5 bg-(--primary) rounded-full"></span>
      <p class="text-sm md:text-base font-medium uppercase">Recent Work</p>
    </div>
    <!-- Slider Section -->
    <div class="mt-16 md:mt-20 project_overflow overflow-hidden">
      <!-- Slider main container -->
      <div class="swiper hero_swiper">
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper items-center">
          <!-- Slides -->
          <!-- Slide One -->
          <div class="swiper-slide">
            <div class="">
              <div class="relative overflow-hidden">
                <div class="bg-(--background)/70 absolute inset-0 z-10 flex items-center justify-center">
                  <div class="w-md">
                    <p class="uppercase text-[10px] md:text-sm lg:text-lg font-medium text-center">LAND CONSOLIDATION PROJECT©2019</p>
                  </div>
                </div>
                <img class="aspect-video object-cover" src="{{ asset('images/Slides/hero/1.webp') }}" alt="">
              </div>
              <div class="grid grid-cols-3 gap-4 mt-4">
                <p class="uppercase text-[10px] md:text-sm lg:text-lg font-normal leading-tight">Sector Growth Corridor</p>
                <p class="uppercase text-[10px] md:text-sm lg:text-lg font-normal leading-tight text-center">North india</p>
                <p class="uppercase text-[10px] md:text-sm lg:text-lg font-normal leading-tight text-end">2019-2020</p>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="">
              <div class="relative overflow-hidden">
                <div class="bg-(--background)/70 absolute inset-0 z-10 flex items-center justify-center">
                  <div class="w-md">
                    <p class="uppercase text-[10px] md:text-sm lg:text-lg font-medium text-center">LAND CONSOLIDATION PROJECT©2019</p>
                  </div>
                </div>
                <img class="aspect-video object-cover" src="{{ asset('images/Slides/hero/2.webp') }}" alt="">
              </div>
              <div class="grid grid-cols-3 gap-4 mt-4">
                <p class="uppercase text-[10px] md:text-sm lg:text-lg font-normal leading-tight">Sector Growth Corridor</p>
                <p class="uppercase text-[10px] md:text-sm lg:text-lg font-normal leading-tight text-center">North india</p>
                <p class="uppercase text-[10px] md:text-sm lg:text-lg font-normal leading-tight text-end">2019-2020</p>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="">
              <div class="relative overflow-hidden">
                <div class="bg-(--background)/70 absolute inset-0 z-10 flex items-center justify-center">
                  <div class="w-md">
                    <p class="uppercase text-[10px] md:text-sm lg:text-lg font-medium text-center">LAND CONSOLIDATION PROJECT©2019</p>
                  </div>
                </div>
                <img class="aspect-video object-cover" src="{{ asset('images/Slides/hero/2.webp') }}" alt="">
              </div>
              <div class="grid grid-cols-3 gap-4 mt-4">
                <p class="uppercase text-[10px] md:text-sm lg:text-lg font-normal leading-tight">Sector Growth Corridor</p>
                <p class="uppercase text-[10px] md:text-sm lg:text-lg font-normal leading-tight text-center">North india</p>
                <p class="uppercase text-[10px] md:text-sm lg:text-lg font-normal leading-tight text-end">2019-2020</p>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="">
              <div class="relative overflow-hidden">
                <div class="bg-(--background)/70 absolute inset-0 z-10 flex items-center justify-center">
                  <div class="w-md">
                    <p class="uppercase text-[10px] md:text-sm lg:text-lg font-medium text-center">LAND CONSOLIDATION PROJECT©2019</p>
                  </div>
                </div>
                <img class="aspect-video object-cover" src="{{ asset('images/Slides/hero/2.webp') }}" alt="">
              </div>
              <div class="grid grid-cols-3 gap-4 mt-4">
                <p class="uppercase text-[10px] md:text-sm lg:text-lg font-normal leading-tight">Sector Growth Corridor</p>
                <p class="uppercase text-[10px] md:text-sm lg:text-lg font-normal leading-tight text-center">North india</p>
                <p class="uppercase text-[10px] md:text-sm lg:text-lg font-normal leading-tight text-end">2019-2020</p>
              </div>
            </div>
          </div>
        </div>

        <div class="flex items-center gap-x-8 md:gap-x-12 pt-10 md:pt-20 w-full max-w-xl mx-auto px-4 md:px-0">
          <!-- If we need navigation buttons -->
          <button class="hero_prev py-1.5 px-4 md:px-6 rounded-full text-white border-2 border-white flex items-center justify-center select-none flex-none">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4 md:size-5 lucide lucide-move-left-icon lucide-move-left">
              <path d="M6 8L2 12L6 16" />
              <path d="M2 12H22" />
            </svg>
          </button>
          <!-- If we need scrollbar -->
          <div class="hero_scroller_line relative w-full">
            <div class="swiper-scrollbar hero_scrollbar"></div>
          </div>
          <button class="hero_next rotate-180 py-1.5 px-4 md:px-6 rounded-full text-white border-2 border-white flex items-center justify-center select-none flex-none">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4 md:size-5 lucide lucide-move-left-icon lucide-move-left">
              <path d="M6 8L2 12L6 16" />
              <path d="M2 12H22" />
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>
</section>
<section class="mb-20 md:mb-36">
  <div class="max-w-7xl mx-auto px-5 lg:px-5">
    <!-- Section Indicator -->
    <div class="flex justify-start items-center gap-3 border-b border-white/10 w-full pb-4">
      <span class="aspect-square w-2.5 bg-(--primary) rounded-full"></span>
      <p class="text-sm md:text-base font-medium uppercase">Upcoming projects</p>
    </div>
    <!-- Slider Section -->
    <div class="mt-16 md:mt-20 project_overflow overflow-hidden">
      <!-- Slider main container -->
      <div class="swiper hero_swiper">
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper items-center">
          <!-- Slides -->
          <!-- Slide One -->
          <div class="swiper-slide">
            <div class="">
              <div class="relative overflow-hidden">
                <div class="bg-(--background)/70 absolute inset-0 z-10 flex items-center justify-center">
                  <div class="w-md">
                    <p class="uppercase text-[10px] md:text-sm lg:text-lg font-medium text-center">LAND CONSOLIDATION PROJECT©2019</p>
                  </div>
                </div>
                <img class="aspect-video object-cover" src="{{ asset('images/Slides/hero/1.webp') }}" alt="">
              </div>
              <div class="grid grid-cols-3 gap-4 mt-4">
                <p class="uppercase text-[10px] md:text-sm lg:text-lg font-normal leading-tight">Sector Growth Corridor</p>
                <p class="uppercase text-[10px] md:text-sm lg:text-lg font-normal leading-tight text-center">North india</p>
                <p class="uppercase text-[10px] md:text-sm lg:text-lg font-normal leading-tight text-end">2019-2020</p>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="">
              <div class="relative overflow-hidden">
                <div class="bg-(--background)/70 absolute inset-0 z-10 flex items-center justify-center">
                  <div class="w-md">
                    <p class="uppercase text-[10px] md:text-sm lg:text-lg font-medium text-center">LAND CONSOLIDATION PROJECT©2019</p>
                  </div>
                </div>
                <img class="aspect-video object-cover" src="{{ asset('images/Slides/hero/2.webp') }}" alt="">
              </div>
              <div class="grid grid-cols-3 gap-4 mt-4">
                <p class="uppercase text-[10px] md:text-sm lg:text-lg font-normal leading-tight">Sector Growth Corridor</p>
                <p class="uppercase text-[10px] md:text-sm lg:text-lg font-normal leading-tight text-center">North india</p>
                <p class="uppercase text-[10px] md:text-sm lg:text-lg font-normal leading-tight text-end">2019-2020</p>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="">
              <div class="relative overflow-hidden">
                <div class="bg-(--background)/70 absolute inset-0 z-10 flex items-center justify-center">
                  <div class="w-md">
                    <p class="uppercase text-[10px] md:text-sm lg:text-lg font-medium text-center">LAND CONSOLIDATION PROJECT©2019</p>
                  </div>
                </div>
                <img class="aspect-video object-cover" src="{{ asset('images/Slides/hero/2.webp') }}" alt="">
              </div>
              <div class="grid grid-cols-3 gap-4 mt-4">
                <p class="uppercase text-[10px] md:text-sm lg:text-lg font-normal leading-tight">Sector Growth Corridor</p>
                <p class="uppercase text-[10px] md:text-sm lg:text-lg font-normal leading-tight text-center">North india</p>
                <p class="uppercase text-[10px] md:text-sm lg:text-lg font-normal leading-tight text-end">2019-2020</p>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="">
              <div class="relative overflow-hidden">
                <div class="bg-(--background)/70 absolute inset-0 z-10 flex items-center justify-center">
                  <div class="w-md">
                    <p class="uppercase text-[10px] md:text-sm lg:text-lg font-medium text-center">LAND CONSOLIDATION PROJECT©2019</p>
                  </div>
                </div>
                <img class="aspect-video object-cover" src="{{ asset('images/Slides/hero/2.webp') }}" alt="">
              </div>
              <div class="grid grid-cols-3 gap-4 mt-4">
                <p class="uppercase text-[10px] md:text-sm lg:text-lg font-normal leading-tight">Sector Growth Corridor</p>
                <p class="uppercase text-[10px] md:text-sm lg:text-lg font-normal leading-tight text-center">North india</p>
                <p class="uppercase text-[10px] md:text-sm lg:text-lg font-normal leading-tight text-end">2019-2020</p>
              </div>
            </div>
          </div>
        </div>

        <div class="flex items-center gap-x-8 md:gap-x-12 pt-10 md:pt-20 w-full max-w-xl mx-auto px-4 md:px-0">
          <!-- If we need navigation buttons -->
          <button class="hero_prev py-1.5 px-4 md:px-6 rounded-full text-white border-2 border-white flex items-center justify-center select-none flex-none">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4 md:size-5 lucide lucide-move-left-icon lucide-move-left">
              <path d="M6 8L2 12L6 16" />
              <path d="M2 12H22" />
            </svg>
          </button>
          <!-- If we need scrollbar -->
          <div class="hero_scroller_line relative w-full">
            <div class="swiper-scrollbar hero_scrollbar"></div>
          </div>
          <button class="hero_next rotate-180 py-1.5 px-4 md:px-6 rounded-full text-white border-2 border-white flex items-center justify-center select-none flex-none">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4 md:size-5 lucide lucide-move-left-icon lucide-move-left">
              <path d="M6 8L2 12L6 16" />
              <path d="M2 12H22" />
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>
</section>
<section style="background-image: url('{{ asset('images/one-work/our-work-banner.webp') }}');" class="w-full bg-cover bg-center bg-no-repeat relative mb-8 md:mb-16 lg:mb-32 relative">
    <!-- Upper Gradient overly -->
  <div class="bg-linear-to-t from-(--background)/0 to-(--background) h-32 w-full absolute top-0 left-0 right-0 z-2"></div>
  <!-- Lower Gradient overly -->
  <div class="bg-linear-to-b from-(--background)/0 to-(--background) h-32 w-full absolute bottom-0 left-0 right-0 z-2"></div>
  <div class="absolute inset-0 z-0 bg-(--background)/85"></div>
  <div class="max-w-7xl mx-auto px-5 lg:px-5 py-24 md:py-32 relative z-10">
      <h3 class="text-3xl md:text-5xl lg:text-6xl font-normal uppercase text-(--primary) text-center max-w-3xl lg:max-w-5xl mx-auto reveal-text">Clarity Is a Strategic Advantage</h3>
      <div class="mt-6 md:mt-5 max-w-xl mx-auto flex flex-col justify-center items-center gap-6">
          <p class="text-center text-base md:text-lg" data-aos="fade-up" data-aos-delay="50">Reach out to discuss your project requirements and explore how structured project management can add value.</p>
          <a href="" class="inline-block border-1 lg:border-2 border-white rounded-full py-2.5 px-6 relative overflow-hidden group hover:border-(--primary) active:border-(--primary) transition-all duration-300" data-aos="fade-up" data-aos-delay="150">
              <div class="absolute top-0 -left-1/1 w-full h-full bg-(--primary) rounded-full z-0 group-active:left-0 group-hover:left-0 transition-all duration-300"></div>
              <div class="text-xs md:text-xs lg:text-base inline-flex items-center justify-center gap-2 uppercase font-medium relative z-10 text-white group-active:text-(--background) group-hover:text-(--background) transition-all duration-300">
                Explore Project Types
                <svg class="size-3 md:size-3 lg:size-5 -rotate-90" width="15" height="20" viewBox="0 0 15 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6.14173 15.4299L1.86256 11.1508C1.76263 11.0473 1.64309 10.9648 1.51092 10.908C1.37875 10.8512 1.23659 10.8213 1.09275 10.8201C0.948903 10.8188 0.80625 10.8462 0.673112 10.9007C0.539974 10.9552 0.419018 11.0356 0.317301 11.1373C0.215584 11.239 0.135143 11.36 0.0806723 11.4931C0.0262014 11.6263 -0.00120906 11.7689 4.09027e-05 11.9128C0.00129087 12.0566 0.031176 12.1988 0.0879524 12.3309C0.144729 12.4631 0.22726 12.5827 0.330729 12.6826L6.45914 18.811C6.6623 19.0141 6.9378 19.1282 7.22506 19.1282C7.51232 19.1282 7.78782 19.0141 7.99098 18.811L14.1194 12.6826C14.3167 12.4783 14.4259 12.2046 14.4235 11.9206C14.421 11.6365 14.3071 11.3648 14.1062 11.1639C13.9053 10.9631 13.6336 10.8492 13.3496 10.8467C13.0655 10.8442 12.7919 10.9534 12.5876 11.1508L8.30839 15.4299V1.08333C8.30839 0.796016 8.19426 0.520465 7.99109 0.317301C7.78793 0.114137 7.51238 0 7.22506 0C6.93774 0 6.66219 0.114137 6.45903 0.317301C6.25586 0.520465 6.14173 0.796016 6.14173 1.08333V15.4299Z" fill="currentColor" />
                </svg>
              </div>
            </a>
      </div>
  </div>    
</section>
@endsection