Initial commit: Safeteb Next.js website.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-14 13:33:09 +03:30
commit 424e339986
188 changed files with 31563 additions and 0 deletions
@@ -0,0 +1,119 @@
+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>
+
+    </>
+  );
+}