120 lines
4.6 KiB
TypeScript
120 lines
4.6 KiB
TypeScript
import { products } from "@/data/home";
|
|
|
|
function ProductStars() {
|
|
return (
|
|
<div className="stars">
|
|
<i className="fa fa-star" />
|
|
<i className="fa fa-star" />
|
|
<i className="fa fa-star" />
|
|
<i className="fa fa-star" />
|
|
<i className="fa fa-star-o" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function ProductsSection() {
|
|
return (
|
|
<>
|
|
<div className="wb-frame" id="product_last">
|
|
<section
|
|
id="products"
|
|
className="product-area product-grid-area"
|
|
style={{ backgroundColor: "#f5f5f5" }}
|
|
>
|
|
<div className="container-xxl position-relative">
|
|
<div className="row align-items-center rtl">
|
|
<div className="col-7 col-lg-6 text-right">
|
|
<div className="section-title text-center">
|
|
<h2
|
|
className="title mb-1"
|
|
style={{
|
|
letterSpacing: 0,
|
|
fontWeight: 300,
|
|
textAlign: "right",
|
|
direction: "ltr",
|
|
fontSize: "25px",
|
|
color: "#252525",
|
|
}}
|
|
>
|
|
جدیدترین محصولات
|
|
</h2>
|
|
<div className="desc">
|
|
<p
|
|
style={{
|
|
letterSpacing: "5px",
|
|
fontWeight: 100,
|
|
textAlign: "justify",
|
|
fontSize: "10px",
|
|
fontFamily: "montserrat",
|
|
color: "#C1C1C1",
|
|
}}
|
|
>
|
|
LASTES PRODUCTS
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-5 col-lg-6 text-start">
|
|
<a className="btn-theme" href="#products">
|
|
<span style={{ letterSpacing: "0px", fontWeight: 0 }}>مشاهده بیشتر</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div className="row">
|
|
<div className="overflow-hidden position-relative-responsive py-3">
|
|
<div className="swiper gallery-slider-container">
|
|
<div className="swiper-wrapper">
|
|
{products.map((product) => (
|
|
<div key={product.id} className="swiper-slide">
|
|
<div className="product-item">
|
|
<div className="product-thumb">
|
|
<a href="#">
|
|
<img src={product.image} alt={product.title} />
|
|
</a>
|
|
<div className="product-action">
|
|
<a className="btn-theme" title={product.contactOnly ? "تماس با فروشگاه" : "افزودن به سبد خرید"} href="#">
|
|
{product.contactOnly ? "تماس با فروشگاه" : "افزودن به سبد خرید"}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div className="product-info">
|
|
<h3 className="title mb-0">
|
|
<a href="#">{product.title}</a>
|
|
</h3>
|
|
<ProductStars />
|
|
<div className="prices">
|
|
{product.contactOnly ? (
|
|
<div className="mt-auto">
|
|
<span className="callus">تماس بگیرید</span>
|
|
</div>
|
|
) : (
|
|
<div className="mt-auto">
|
|
<span className="price">{product.price}</span>
|
|
<span className="toman">تومان</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="swiper-btn-wrap">
|
|
<div className="swiper-btn-prev">
|
|
<i className="fa fa-angle-left" style={{ lineHeight: 0 }} />
|
|
</div>
|
|
<div className="swiper-btn-next">
|
|
<i className="fa fa-angle-right" style={{ lineHeight: 0 }} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
</>
|
|
);
|
|
}
|