127 lines
4.8 KiB
JavaScript
127 lines
4.8 KiB
JavaScript
import React from "react";
|
|
import { FormattedMessage } from 'react-intl';
|
|
|
|
// Images
|
|
import BillPayCounters from '../../assets/img/services/bill_pay_counters.png';
|
|
import CafeBars from '../../assets/img/services/cafe_bars.png';
|
|
import DeliveryDrivers from '../../assets/img/services/delivery_drivers.png';
|
|
import GasStations from '../../assets/img/services/gas_stations.png';
|
|
import Grocery from '../../assets/img/services/grocery.png';
|
|
import PhoneOrders from '../../assets/img/services/phone_orders.png';
|
|
import Restaurants from '../../assets/img/services/restaurants.png';
|
|
import Retail from '../../assets/img/services/retail.png';
|
|
|
|
/**
|
|
* The services section of the home page.
|
|
*/
|
|
function ServicesSection() {
|
|
return (
|
|
<section data-spy="scroll" data-target="#mainNav" id="services">
|
|
<div className="col-md-10 mx-md-auto text-box-top">
|
|
<div className="row">
|
|
<div className="col-lg-12 text-center">
|
|
<h2 className="section-heading">
|
|
<span id="sr_lang1">
|
|
<FormattedMessage id="home.services.section_title" />
|
|
</span>
|
|
</h2>
|
|
<hr className="my-4" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="containerfix text-box-bottom">
|
|
<div className="row" style={{ margin: 'auto' }}>
|
|
<div className="col-lg-3 col-md-6 text-center">
|
|
<div className="service-box mt-5 mx-auto">
|
|
<i className="fa fa-4x text-primary mb-3 sr-icons">
|
|
<img alt="Retail" src={Retail} />
|
|
</i>
|
|
<h3 className="mb-3">
|
|
<span id="sr_lang2"><FormattedMessage id="home.services.retail" /></span>
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="col-lg-3 col-md-6 text-center">
|
|
<div className="service-box mt-5 mx-auto">
|
|
<i className="fa fa-4x text-primary mb-3 sr-icons">
|
|
<img alt="Cafe/Bars" src={CafeBars} />
|
|
</i>
|
|
<h3 className="mb-3">
|
|
<span id="sr_lang3"><FormattedMessage id="home.services.cafe_bars" /></span>
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="col-lg-3 col-md-6 text-center">
|
|
<div className="service-box mt-5 mx-auto">
|
|
<i className="fa fa-4x text-primary mb-3 sr-icons">
|
|
<img alt="Restaurants" src={Restaurants} />
|
|
</i>
|
|
<h3 className="mb-3">
|
|
<span id="sr_lang4"><FormattedMessage id="home.services.restaurants" /></span>
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="col-lg-3 col-md-6 text-center">
|
|
<div className="service-box mt-5 mx-auto">
|
|
<i className="fa fa-4x text-primary mb-3 sr-icons">
|
|
<img alt="Gas Stations" src={GasStations} />
|
|
</i>
|
|
<h3 className="mb-3">
|
|
<span id="sr_lang5"><FormattedMessage id="home.services.gas_stations" /></span>
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="col-lg-3 col-md-6 text-center">
|
|
<div className="service-box mt-5 mx-auto">
|
|
<i className="fa fa-4x text-primary mb-3 sr-icons">
|
|
<img alt="Bill-Pay Counters" src={BillPayCounters} />
|
|
</i>
|
|
<h3 className="mb-3">
|
|
<span id="sr_lang6"><FormattedMessage id="home.services.bill_pay" /></span>
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="col-lg-3 col-md-6 text-center">
|
|
<div className="service-box mt-5 mx-auto">
|
|
<i className="fa fa-4x text-primary mb-3 sr-icons">
|
|
<img alt="Grocery" src={Grocery} />
|
|
</i>
|
|
<h3 className="mb-3">
|
|
<span id="sr_lang7"><FormattedMessage id="home.services.grocery" /></span>
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="col-lg-3 col-md-6 text-center">
|
|
<div className="service-box mt-5 mx-auto">
|
|
<i className="fa fa-4x text-primary mb-3 sr-icons">
|
|
<img alt="Delivery Drivers" src={DeliveryDrivers} />
|
|
</i>
|
|
<h3 className="mb-3">
|
|
<span id="sr_lang8"><FormattedMessage id="home.services.delivery_drivers" /></span>
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="col-lg-3 col-md-6 text-center">
|
|
<div className="service-box mt-5 mx-auto">
|
|
<i className="fa fa-4x text-primary mb-3 sr-icons">
|
|
<img alt="Phone Orders" src={PhoneOrders} />
|
|
</i>
|
|
<h3 className="mb-3">
|
|
<span id="sr_lang9"><FormattedMessage id="home.services.phone_orders" /></span>
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export { ServicesSection };
|