<div class="title-1 pb-0">
  <span class="label label-gradient color-1">sale</span>
  <h2>Latest For Sale</h2>
  <hr>
</div>
                                  

                                    
<div class="title-2">
  <h2>Latest Property Listing</h2>
  <p class="mb-0">Discover New York’s best things to do, restaurants, theatre, nightlife and more</p>
</div>
                                  

                                    
<div class="title-3 mb-0">
  <svg class="title-svg">
    <use xlinkHref="/svg/icons.svg#title-line"></use>
  </svg>
  <h2>
    Provided <span>Services</span>
  </h2>
  <p class="font-roboto">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod..</p>
</div>
                                  

  
<section class="ratio2_3 pb-0">
  <div class="row portfolio-section zoom-gallery-multiple gy-md-4 gy-3">
    <div class="grid-item col-lg-3 col-sm-6">
      <div class="grid-box">
        <div class="overlay">
          <div class="portfolio-image">
            <a class="bg-size">
              <img src="assets/images/portfolio/1.jpg" class="bg-img" alt="image">
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="grid-item col-lg-3 col-sm-6">
      <div class="grid-box">
        <div class="overlay">
          <div class="portfolio-image">
            <a class="bg-size">
              <img src="assets/images/portfolio/2.jpg" class="bg-img" alt="image">
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="grid-item col-lg-3 col-sm-6">
      <div class="grid-box">
        <div class="overlay">
          <div class="portfolio-image">
            <a class="bg-size">
              <img src="assets/images/portfolio/3.jpg" class="bg-img" alt="image">
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="grid-item col-lg-3 col-sm-6">
      <div class="grid-box">
        <div class="overlay">
          <div class="portfolio-image">
            <a class="bg-size">
              <img src="assets/images/portfolio/4.jpg" class="bg-img" alt="image">
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

                                  

  

<section class="ratio_square pb-0">
  <div class="row portfolio-section zoom-gallery-multiple gy-md-4 gy-3">
    <div class="grid-item col-lg-3 col-sm-6">
      <div class="grid-box">
        <div class="overlay">
          <div class="portfolio-image">
            <a class="bg-size">
              <img src="assets/images/portfolio/1.jpg" class="bg-img" alt="image">
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="grid-item col-lg-3 col-sm-6">
      <div class="grid-box">
        <div class="overlay">
          <div class="portfolio-image">
            <a class="bg-size">
              <img src="assets/images/portfolio/2.jpg" class="bg-img" alt="image">
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="grid-item col-lg-3 col-sm-6">
      <div class="grid-box">
        <div class="overlay">
          <div class="portfolio-image">
            <a class="bg-size">
              <img src="assets/images/portfolio/3.jpg" class="bg-img" alt="image">
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="grid-item col-lg-3 col-sm-6">
      <div class="grid-box">
        <div class="overlay">
          <div class="portfolio-image">
            <a class="bg-size">
              <img src="assets/images/portfolio/4.jpg" class="bg-img" alt="image">
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
                                  

  

<section class="ratio_portrait">
  <div class="row portfolio-section zoom-gallery-multiple gy-md-4 gy-3">
    <div class="grid-item col-lg-3 col-sm-6">
      <div class="grid-box">
        <div class="overlay">
          <div class="portfolio-image">
            <a class="bg-size">
              <img src="assets/images/portfolio/1.jpg" class="bg-img" alt="image">
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="grid-item col-lg-3 col-sm-6">
      <div class="grid-box">
        <div class="overlay">
          <div class="portfolio-image">
            <a class="bg-size">
              <img src="assets/images/portfolio/2.jpg" class="bg-img" alt="image">
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="grid-item col-lg-3 col-sm-6">
      <div class="grid-box">
        <div class="overlay">
          <div class="portfolio-image">
            <a class="bg-size">
              <img src="assets/images/portfolio/3.jpg" class="bg-img" alt="image">
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="grid-item col-lg-3 col-sm-6">
      <div class="grid-box">
        <div class="overlay">
          <div class="portfolio-image">
            <a class="bg-size">
              <img src="assets/images/portfolio/4.jpg" class="bg-img" alt="image">
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
                                  

  
  <div id="overviewchart">
    <apx-chart [series]="salesOverViewChartData.series" [chart]="salesOverViewChartData.chart" [markers]="salesOverViewChartData.markers" [dataLabels]="salesOverViewChartData.dataLabels"
               [stroke]="salesOverViewChartData.stroke" [legend]="salesOverViewChartData.legend" [colors]="salesOverViewChartData.colors" [fill]="salesOverViewChartData.fill"
               [grid]="salesOverViewChartData.grid" [responsive]="salesOverViewChartData.responsive" [yaxis]="salesOverViewChartData.yaxis" [xaxis]="salesOverViewChartData.xaxis"
               [tooltip]="salesOverViewChartData.tooltip">
    </apx-chart>
  </div>
                                  

  
import { Component } from '@angular/core';
import { salesOverviewChart } from '../../../../../shared/data/charts/dashboard-charts';

@Component({
  selector: 'app-sales-overview',
  imports: [NgApexchartsModule],
  templateUrl: './sales-overview.component.html',
  styleUrls: ['./sales-overview.component.scss'],
})
export class SalesOverviewComponent {

  public salesOverViewChartData = salesOverviewChart;
  
}

                                  

                            
series: [
    {
      name: '$2530.00',
      data: [20, 25, 20, 30, 20, 50, 30, 35, 25, 60, 0],
    },
  ],
  chart: {
    height: 280,
    type: 'area',
    dropShadow: {
      enabled: true,
      top: 10,
      left: 0,
      blur: 3,
      color: '#720f1e',
      opacity: 0.15,
    },
    toolbar: {
      show: false,
    },
    zoom: {
      enabled: false,
    },
  },
  markers: {
    strokeWidth: 4,
    strokeColors: '#ffffff',
    hover: {
      size: 9,
    },
  },
  dataLabels: {
    enabled: false,
  },
  stroke: {
    curve: 'smooth',
    lineCap: 'butt',
    width: 4,
  },
  legend: {
    show: false,
  },
  colors: ['#ff5c41'],
  fill: {
    type: 'gradient',
    gradient: {
      shadeIntensity: 1,
      opacityFrom: 0.5,
      opacityTo: 0.4,
      stops: [0, 90, 100],
    },
  },
  grid: {
    xaxis: {
      lines: {
        borderColor: 'transparent',
        show: false,
      },
    },
    yaxis: {
      lines: {
        borderColor: 'transparent',
        show: false,
      },
    },
    padding: {
      right: -112,
      bottom: 0,
      left: 15,
    },
  },
  responsive: [
    {
      breakpoint: 1200,
      options: {
        grid: {
          padding: {
            right: -95,
          },
        },
      },
    },
    {
      breakpoint: 992,
      options: {
        grid: {
          padding: {
            right: -69,
          },
        },
      },
    },
  ],
  yaxis: {
    labels: {
      formatter: function (value: string) {
        return value + 'K';
      },
    },
    axisBorder: {
      low: 0,
      offsetX: 0,
      show: false,
    },
    axisTicks: {
      show: false,
    },
    crosshairs: {
      show: false,
    },
  },
  xaxis: {
    categories: [
      'Jan',
      'Feb',
      'Mar',
      'Apr',
      'May',
      'Jun',
      'Jul',
      'Aug',
      'Sep',
      'Oct',
      'Nov',
      'Dec',
    ],
    range: undefined,
    axisBorder: {
      low: 0,
      offsetX: 0,
      show: false,
    },
    axisTicks: {
      show: false,
    },
    crosshairs: {
      show: true,
      position: 'back',
      stroke: {
        color: '#ff5c41',
        width: 1,
        dashArray: 0,
      },
    },
  },
  tooltip: {
    formatter: undefined,
  },
                          
                                                            

  
  <div class="map" id="map">
    <google-map width="100%" height="500px">
     @for(marker of markers; track marker){
        <map-marker [position]="marker.position" [label]="marker.label"></map-marker>
      }
    </google-map>
 </div>

                                  

                            
import { Component } from '@angular/core';
import { GoogleMapsModule } from '@angular/google-maps';
import { markersData } from '../../../../../shared/interface/property';

@Component({
  selector: 'app-google-map',
  imports: [GoogleMapsModule],
  templateUrl: './google-map.component.html',
  styleUrls: ['./google-map.component.scss'],
})
export class GoogleMapComponent {
 
  public markers: markersData[] = [];

  ngOnInit() {
    this.markers.push({
      position: {
        lat: 48.8615515,
        lng: 2.3112233,
      },
      label: {
        color: 'black',
        text: 'Paris',
      },
    });
  }
}

                          
                                                            

  
<div class="col-xl-5  map-section">
  <div class="map" id="mapleaf">
    <div class="map-container" style="height: 690px; z-index: 0;" leaflet [leafletOptions]="options"></div>
  </div>
</div> 
                                  

                              
import { Component } from '@angular/core';
import * as L from 'leaflet';
import { LeafletModule } from '@bluehalo/ngx-leaflet';

@Component({
  selector: 'app-common-leaflet-map';
  imports: [LeafletModule],
  templateUrl: './common-leaflet-map.component.html',
  styleUrls: ['./common-leaflet-map.component.scss']
})
export class CommonLeafletMapComponent {

  public options: L.MapOptions = {
    layers: [
      L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: '...',
      }),
    ],
    zoom: 12,
    center: L.latLng(20.5937, 78.9629),
  };

  constructor(){
  }
}