Initial Mashinify homepage rebuild in Next.js.

FA/RTL marketplace home with search-first hero, categories, and stock data from mashinify.com. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-11 20:29:34 +04:30 · 2026-08-10 01:03:30 +03:30
commit e74e5ca45f
67 changed files with 7931 additions and 0 deletions
@@ -0,0 +1,65 @@
+import Image from "next/image";
+import { products } from "@/data/home";
+
+export function Products() {
+  return (
+    <section id="products" className="section">
+      <div className="container-page">
+        <div className="section-head">
+          <p className="section-kicker">Stock Machines</p>
+          <h2 className="section-title">محصولات موجود</h2>
+          <p className="section-desc">
+            منتخب ماشین‌آلات سنگین و صنعتی از فروشگاه ماشینیفای؛ برای جزئیات و
+            قیمت، استعلام بگیرید.
+          </p>
+        </div>
+
+        <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
+          {products.map((product) => (
+            <article
+              key={product.id}
+              className="group flex h-full flex-col overflow-hidden border border-line bg-surface transition duration-300 hover:-translate-y-1 hover:border-brand/40"
+            >
+              <a href={product.href} className="relative block aspect-[4/3] overflow-hidden bg-[#e8eef4]">
+                <Image
+                  src={product.image}
+                  alt={product.title}
+                  fill
+                  className="object-cover transition duration-500 group-hover:scale-[1.04]"
+                  sizes="(max-width: 768px) 100vw, 25vw"
+                />
+                <span className="absolute left-3 top-3 bg-brand-ink/90 px-2.5 py-1 text-xs text-white">
+                  {product.condition}
+                </span>
+              </a>
+
+              <div className="flex flex-1 flex-col p-4">
+                <p className="font-industrial text-[0.68rem] tracking-[0.14em] text-brand">
+                  {product.titleEn}
+                </p>
+                <h3 className="mt-1 text-base font-extrabold leading-7 text-brand-ink">
+                  <a href={product.href}>{product.title}</a>
+                </h3>
+                <p className="mt-2 text-sm text-muted">{product.category}</p>
+                <div className="mt-auto pt-4">
+                  <a
+                    href="#contact"
+                    className="inline-flex w-full items-center justify-center border border-brand px-3 py-2.5 text-sm font-bold text-brand transition hover:bg-brand hover:text-white"
+                  >
+                    استعلام از فروشنده
+                  </a>
+                </div>
+              </div>
+            </article>
+          ))}
+        </div>
+
+        <div className="mt-8 text-center">
+          <a href="#contact" className="btn-primary">
+            محصولات بیشتر
+          </a>
+        </div>
+      </div>
+    </section>
+  );
+}