61 lines
3.5 KiB
TypeScript
61 lines
3.5 KiB
TypeScript
import React from "react";
|
|
import SectionTitle from "@/components/common/SectionTitle";
|
|
|
|
const ChooseSection = () => (
|
|
<section className="choose-3-section p-relative section-space" style={{ backgroundImage: "url(/assets/imgs/bg/choose-bg-2.png)" }}>
|
|
<div className="shape-1" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-49.png)" }}></div>
|
|
<div className="small-container">
|
|
<div className="row">
|
|
<div className="col-xxl-6 col-xl-6 col-lg-6">
|
|
<div className="choose-3-image-area p-relative">
|
|
<div className="shape-1" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-29.png)" }}></div>
|
|
<figure className="image w-img pr-100">
|
|
<img src="/assets/imgs/resources/choose-2.jpg" alt="" />
|
|
</figure>
|
|
<div className="image-3-area">
|
|
<div className="image-3 p-relative">
|
|
<img src="/assets/imgs/about/about-2.jpg" alt="" />
|
|
<div className="play-btn">
|
|
<div className="video_player_btn">
|
|
<a href="https://www.youtube.com/watch?v=eEzD-Y97ges" className="popup-video"><i className="fa-solid fa-play"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<h1>Metatron</h1>
|
|
</div>
|
|
</div>
|
|
<div className="col-xxl-6 col-xl-6 col-lg-6">
|
|
<div className="choose-3-content-area pl-60 pt-20 p-relative">
|
|
<SectionTitle
|
|
tagline="WHY CHOOSE US"
|
|
title="Elevate Your Achievements Using Premier IT Solutions"
|
|
className="mb-25 wow fadeInLeft"
|
|
/>
|
|
<p>It is a long established fact that a reader will be distracted the readable content of a page when looking at layout the point of using lorem the is Ipsum less normal distribution of letters.</p>
|
|
<div className="row g-4 pt-35">
|
|
{[
|
|
{ icon: "fa-solid fa-microchip", label: "Quality Materials", isIcon: true },
|
|
{ icon: "icon-8.png", label: "Best Services", isIcon: false },
|
|
{ icon: "fa-solid fa-headset", label: "24/7 Call Support", isIcon: true },
|
|
{ icon: "fa-solid fa-award", label: "Award Winning", isIcon: true }
|
|
].map((item, i) => (
|
|
<div key={i} className="col-lg-6">
|
|
<div className="icon-box-area">
|
|
<div className="icon-box">
|
|
{item.isIcon ? <i className={item.icon}></i> : <img src={`/assets/imgs/icon/${item.icon}`} alt="img" />}
|
|
</div>
|
|
<h5><a href="#">{item.label}</a></h5>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
|
|
export default ChooseSection;
|