@extends('frontend.layouts.app')

@section('title')
Projects | Philippine Green Building Initiative (PGBI)
@endsection

@section('seo')
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Projects | Philippine Green Building Initiative (PGBI)" />
<meta property="og:url" content="{{ url('projects') }}" />
<meta property="og:site_name" content="Projects | Philippine Green Building Initiative (PGBI)" />
<meta property="og:image" content="{{ asset('images/meta-thumbnail.jpg') }}" />
<meta property="og:thumbnail" content="{{ asset('images/meta-thumbnail.jpg') }}" />
@endsection

@section('content')
{{-- BANNER --}}
<div class="container-fluid px-0 mb-5 text-center mb-5">
  @if ($products->category == 'EDGE')
    <img src="{{ asset('images/banner-edge.jpg') }}" class="img-fluid" alt="">
  @elseif ($products->category == 'GREEEN')
    <img src="{{ asset('images/banner-greeens.jpg') }}" class="img-fluid" alt="">
  @elseif ($products->category == 'ASHRAE')
    <img src="{{ asset('images/banner-ashrae.jpg') }}" class="img-fluid" alt="">
  @elseif ($products->category == 'BUILDING EQ')
    <img src="{{ asset('images/banner-beq.jpg') }}" class="img-fluid" alt="">
  @endif
</div>

<div class="container overflow-hidden mb-5">
  <h2 class="fw-bold mb-5" data-aos="fade-up" data-aos-duration="1500">Products Portfolio</h2>

  <div class="text-center mb-4">
    <img src="{{ asset('products/' . $products->image) }}" class="img-fluid" alt="">
  </div>

  <div class="text-center mb-4">
    <h3 class="fw-bold mb-2">{{ $products->title }}</h3>
    <p class="mb-0">{{ $products->category }}</p>
  </div>

  <div>
    {!! $products->description !!}
  </div>

  <div class="d-md-block d-none" style="margin-bottom: 5rem"></div>
</div>
@endsection