You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

59 lines
2.0 KiB
JavaScript

import React from 'react';
import { Container, Row, Col } from 'react-bootstrap';
import Banner from '../components/Banner';
import Footer from '../components/Footer';
import ProductCatalog from '../components/ProductCatalog';
const Home = () => {
const bannerData = {
images: [
{ src: '/assets/image1.jpg' },
{ src: '/assets/image2.png' },
],
};
return (
<>
<Banner data={bannerData} />
{/* Features Section */}
<Container className="mt-5">
<Row className="d-flex justify-content-center align-items-center">
{/* Trusted Couriers */}
<Col md={3} className="text-center mb-4">
<i className="bi bi-truck text-primary mb-3" style={{ fontSize: '4rem' }}></i>
<div className="text-uppercase" style={{ fontSize: '1.4rem' }}>Trusted Couriers</div>
<div className='text-opacity-10'>We ship nationwide</div>
</Col>
{/* 7 Days Replacement */}
<Col md={3} className="text-center mb-4">
<i className="bi bi-arrow-return-left text-primary mb-3" style={{ fontSize: '4rem' }}></i>
<div className="text-uppercase" style={{ fontSize: '1.4rem' }}>7 Days Replacement</div>
<div>If manufacturer defective</div>
</Col>
{/* Best Prices */}
<Col md={3} className="text-center mb-4">
<i className="bi bi-currency-dollar text-primary mb-3" style={{ fontSize: '4rem' }}></i>
<div className="text-uppercase" style={{ fontSize: '1.4rem' }}>Best Prices</div>
<div>Huge selections of items</div>
</Col>
{/* Trusted Store */}
<Col md={3} className="text-center mb-4">
<i className="bi bi-check-circle text-primary mb-3" style={{ fontSize: '4rem' }}></i>
<div className="text-uppercase" style={{ fontSize: '1.4rem' }}>Trusted Store</div>
<div>Tons of positive feedbacks</div>
</Col>
</Row>
<ProductCatalog />
</Container>
<Footer />
</>
);
};
export default Home;