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>

src/app/globals.css

@@ -0,0 +1,220 @@
+@import "tailwindcss";
+
+@font-face {
+  font-family: "iran-yekan";
+  src: url("https://cdn.meshkee.com/web-builder/fonts/iran-yekan/iran-yekan-regular.ttf");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "iran-yekan";
+  src: url("https://cdn.meshkee.com/web-builder/fonts/iran-yekan/iran-yekan-medium.ttf");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "iran-yekan";
+  src: url("https://cdn.meshkee.com/web-builder/fonts/iran-yekan/iran-yekan-bold.ttf");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "iran-yekan";
+  src: url("https://cdn.meshkee.com/web-builder/fonts/iran-yekan/iran-yekan-extrabold.ttf");
+  font-weight: 800;
+  font-style: normal;
+  font-display: swap;
+}
+
+:root {
+  --background: #f2f5f8;
+  --foreground: #0f1720;
+  --muted: #5b6775;
+  --line: #d7e0ea;
+  --surface: #ffffff;
+  --brand: #006dd4;
+  --brand-deep: #004f9a;
+  --brand-ink: #06233f;
+  --steel: #8fa3b8;
+  --container: 1180px;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-muted: var(--muted);
+  --color-line: var(--line);
+  --color-surface: var(--surface);
+  --color-brand: var(--brand);
+  --color-brand-deep: var(--brand-deep);
+  --color-brand-ink: var(--brand-ink);
+  --color-steel: var(--steel);
+  --font-sans: "iran-yekan", Tahoma, sans-serif;
+  --font-display: var(--font-industrial), "Oswald", Impact, sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  margin: 0;
+  background: var(--background);
+  color: var(--foreground);
+  font-family: "iran-yekan", Tahoma, sans-serif;
+  font-size: 15px;
+  line-height: 1.75;
+}
+
+.latin-digits {
+  font-family: Tahoma, Arial, "iran-yekan", sans-serif;
+  unicode-bidi: isolate;
+  font-variant-numeric: lining-nums;
+}
+
+.font-industrial {
+  font-family: var(--font-industrial), "Oswald", Impact, sans-serif;
+  unicode-bidi: isolate;
+}
+
+a {
+  text-decoration: none;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+.container-page {
+  width: min(var(--container), calc(100% - 2rem));
+  margin-inline: auto;
+}
+
+.section {
+  padding-block: 4.5rem;
+}
+
+.section-head {
+  margin-bottom: 2rem;
+}
+
+.section-kicker {
+  font-family: var(--font-industrial), "Oswald", Impact, sans-serif;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--brand);
+  font-size: 0.78rem;
+  font-weight: 600;
+}
+
+.section-title {
+  margin: 0.35rem 0 0.5rem;
+  font-size: clamp(1.55rem, 2.4vw, 2.15rem);
+  font-weight: 800;
+  color: var(--brand-ink);
+  line-height: 1.35;
+}
+
+.section-desc {
+  margin: 0;
+  max-width: 36rem;
+  color: var(--muted);
+}
+
+.btn-primary {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  min-height: 3rem;
+  padding: 0.7rem 1.35rem;
+  background: var(--brand);
+  color: #fff;
+  font-weight: 700;
+  transition: background 0.25s ease, transform 0.25s ease;
+}
+
+.btn-primary:hover {
+  background: var(--brand-deep);
+}
+
+.btn-ghost {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  min-height: 3rem;
+  padding: 0.7rem 1.35rem;
+  border: 1px solid rgba(255, 255, 255, 0.45);
+  color: #fff;
+  font-weight: 600;
+  transition: background 0.25s ease, border-color 0.25s ease;
+}
+
+.btn-ghost:hover {
+  background: rgba(255, 255, 255, 0.1);
+  border-color: #fff;
+}
+
+@keyframes rise-in {
+  from {
+    opacity: 0;
+    transform: translateY(18px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes search-glow {
+  0%,
+  100% {
+    box-shadow: 0 0 0 0 rgba(0, 109, 212, 0.18);
+  }
+  50% {
+    box-shadow: 0 0 0 10px rgba(0, 109, 212, 0);
+  }
+}
+
+.animate-rise {
+  animation: rise-in 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.animate-rise-delay-1 {
+  animation-delay: 0.12s;
+}
+
+.animate-rise-delay-2 {
+  animation-delay: 0.24s;
+}
+
+.animate-rise-delay-3 {
+  animation-delay: 0.36s;
+}
+
+.search-shell:focus-within {
+  animation: search-glow 1.6s ease infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .animate-rise,
+  .animate-rise-delay-1,
+  .animate-rise-delay-2,
+  .animate-rise-delay-3,
+  .search-shell:focus-within {
+    animation: none;
+  }
+}

src/app/layout.tsx

@@ -0,0 +1,54 @@
+import type { Metadata, Viewport } from "next";
+import { Oswald } from "next/font/google";
+import "./globals.css";
+
+const oswald = Oswald({
+  subsets: ["latin"],
+  variable: "--font-industrial",
+  weight: ["400", "500", "600", "700"],
+});
+
+export const metadata: Metadata = {
+  metadataBase: new URL("https://www.mashinify.com"),
+  title: {
+    default: "ماشینیفای | بازار ماشین‌آلات سنگین و صنعتی",
+    template: "%s | ماشینیفای",
+  },
+  description:
+    "ماشینیفای، بستر خرید و فروش ماشین‌آلات صنعتی نو و کارکرده؛ جستجو و دسته‌بندی سریع دستگاه‌های سنگین و صنعتی.",
+  applicationName: "ماشینیفای",
+  icons: {
+    icon: [{ url: "/favicon.png", type: "image/png" }],
+    apple: [{ url: "/favicon.png", type: "image/png" }],
+  },
+  openGraph: {
+    type: "website",
+    locale: "fa_IR",
+    url: "https://www.mashinify.com",
+    siteName: "ماشینیفای",
+    title: "ماشینیفای | بازار ماشین‌آلات سنگین و صنعتی",
+    description:
+      "جستجو و خرید ماشین‌آلات صنعتی نو و کارکرده در ماشینیفای.",
+    images: [{ url: "/images/hero/banner.jpg", alt: "MASHINIFY" }],
+  },
+  robots: { index: true, follow: true },
+  alternates: { canonical: "/" },
+};
+
+export const viewport: Viewport = {
+  width: "device-width",
+  initialScale: 1,
+  themeColor: "#006DD4",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="fa" dir="rtl" className={`${oswald.variable} h-full`}>
+      <body className="min-h-full antialiased">{children}</body>
+    </html>
+  );
+}

src/app/page.tsx

@@ -0,0 +1,23 @@
+import { AboutCta } from "@/components/AboutCta";
+import { Articles } from "@/components/Articles";
+import { Categories } from "@/components/Categories";
+import { Footer } from "@/components/Footer";
+import { Header } from "@/components/Header";
+import { Hero } from "@/components/Hero";
+import { Products } from "@/components/Products";
+
+export default function Home() {
+  return (
+    <>
+      <Header />
+      <main>
+        <Hero />
+        <Categories />
+        <Products />
+        <AboutCta />
+        <Articles />
+      </main>
+      <Footer />
+    </>
+  );
+}

src/components/AboutCta.tsx

@@ -0,0 +1,56 @@
+import Image from "next/image";
+import { site, stats } from "@/data/home";
+
+export function AboutCta() {
+  return (
+    <section id="about" className="relative overflow-hidden">
+      <div className="grid lg:grid-cols-2">
+        <div className="relative min-h-[22rem] lg:min-h-[28rem]">
+          <Image
+            src="/images/cta/about.jpg"
+            alt="درباره ماشینیفای"
+            fill
+            className="object-cover"
+            sizes="(max-width: 1024px) 100vw, 50vw"
+          />
+        </div>
+
+        <div className="relative flex items-center bg-brand-ink px-6 py-14 text-white md:px-12">
+          <div className="absolute inset-0 bg-[linear-gradient(135deg,rgba(0,109,212,0.22),transparent_55%)]" />
+          <div className="relative max-w-xl">
+            <p className="section-kicker !text-brand">About Us</p>
+            <h2 className="mt-2 text-[clamp(1.6rem,2.5vw,2.2rem)] font-extrabold leading-snug">
+              همین حالا با ما تماس بگیرید
+            </h2>
+            <p className="mt-4 text-white/75">
+              {site.description} تیم پشتیبانی ما آماده پاسخگویی به پرسش‌های شما
+              درباره انتخاب، مقایسه و استعلام ماشین‌آلات است.
+            </p>
+
+            <div className="mt-8 grid grid-cols-3 gap-3 border-y border-white/15 py-5">
+              {stats.map((item) => (
+                <div key={item.label}>
+                  <div className="font-industrial text-xl font-bold tracking-wide text-brand md:text-2xl">
+                    {item.value}
+                  </div>
+                  <div className="mt-1 text-xs text-white/65 md:text-sm">
+                    {item.label}
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            <div className="mt-8 flex flex-wrap gap-3">
+              <a href="#contact" className="btn-primary">
+                تماس بگیرید
+              </a>
+              <a href="#categories" className="btn-ghost">
+                بیشتر بدانید
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/Articles.tsx

@@ -0,0 +1,47 @@
+import Image from "next/image";
+import { articles } from "@/data/home";
+
+export function Articles() {
+  return (
+    <section id="articles" className="section bg-surface">
+      <div className="container-page">
+        <div className="section-head">
+          <p className="section-kicker">Insights</p>
+          <h2 className="section-title">مقالات</h2>
+          <p className="section-desc">
+            نکات تخصصی برای خرید هوشمندانه و ارتقاء خطوط تولید صنعتی.
+          </p>
+        </div>
+
+        <div className="grid gap-5 md:grid-cols-3">
+          {articles.map((article) => (
+            <a
+              key={article.id}
+              href={article.href}
+              className="group block overflow-hidden border border-line transition hover:border-brand/40"
+            >
+              <div className="relative aspect-[16/10] overflow-hidden bg-[#e8eef4]">
+                <Image
+                  src={article.image}
+                  alt={article.title}
+                  fill
+                  className="object-cover transition duration-500 group-hover:scale-[1.04]"
+                  sizes="(max-width: 768px) 100vw, 33vw"
+                />
+              </div>
+              <div className="p-5">
+                <h3 className="text-base font-extrabold leading-7 text-brand-ink transition group-hover:text-brand">
+                  {article.title}
+                </h3>
+                <span className="mt-4 inline-flex items-center gap-2 text-sm font-bold text-brand">
+                  بیشتر بخوانید
+                  <span aria-hidden>←</span>
+                </span>
+              </div>
+            </a>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/Categories.tsx

@@ -0,0 +1,53 @@
+import Image from "next/image";
+import { categories } from "@/data/home";
+
+export function Categories() {
+  return (
+    <section id="categories" className="section bg-surface">
+      <div className="container-page">
+        <div className="section-head flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
+          <div>
+            <p className="section-kicker">Categories</p>
+            <h2 className="section-title">دسته‌بندی‌های اصلی</h2>
+            <p className="section-desc">
+              مسیر سریع به موجودی نو، کارکرده، خطوط سیم و کابل و محتوای آموزشی.
+            </p>
+          </div>
+          <a
+            href="#products"
+            className="font-industrial text-sm tracking-[0.12em] text-brand transition hover:text-brand-deep"
+          >
+            VIEW STOCK →
+          </a>
+        </div>
+
+        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+          {categories.map((cat, index) => (
+            <a
+              key={cat.id}
+              href={cat.href}
+              className="group relative block min-h-[22rem] overflow-hidden bg-brand-ink"
+              style={{ animationDelay: `${index * 0.08}s` }}
+            >
+              <Image
+                src={cat.image}
+                alt={cat.title}
+                fill
+                className="object-cover transition duration-700 ease-out group-hover:scale-105"
+                sizes="(max-width: 768px) 100vw, 25vw"
+              />
+              <div className="absolute inset-0 bg-[linear-gradient(180deg,rgba(6,35,63,0.15)_0%,rgba(6,35,63,0.88)_100%)]" />
+              <div className="absolute inset-x-0 bottom-0 p-5 text-white">
+                <p className="font-industrial text-[0.7rem] tracking-[0.16em] text-brand">
+                  {cat.titleEn}
+                </p>
+                <h3 className="mt-1 text-xl font-extrabold">{cat.title}</h3>
+                <p className="mt-2 text-sm text-white/75">{cat.description}</p>
+              </div>
+            </a>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/Footer.tsx

@@ -0,0 +1,68 @@
+import { footerLinks, site } from "@/data/home";
+
+export function Footer() {
+  return (
+    <footer id="contact" className="bg-brand-ink text-white">
+      <div className="container-page grid gap-10 py-14 md:grid-cols-2 lg:grid-cols-4">
+        <div className="lg:col-span-2">
+          <p className="font-industrial text-3xl font-bold tracking-[0.12em]">
+            {site.nameEn}
+          </p>
+          <p className="mt-2 text-lg font-bold">{site.name}</p>
+          <p className="mt-4 max-w-md text-sm leading-7 text-white/70">
+            {site.description}
+          </p>
+          <div className="mt-6 space-y-2 text-sm text-white/80">
+            <p>{site.address}</p>
+            <a
+              href={`tel:${site.phone}`}
+              className="latin-digits inline-block text-brand"
+              dir="ltr"
+            >
+              {site.phoneDisplay}
+            </a>
+          </div>
+        </div>
+
+        <div>
+          <h4 className="font-industrial mb-4 text-sm tracking-[0.14em] text-brand">
+            PAGES
+          </h4>
+          <ul className="space-y-2 text-sm text-white/75">
+            {footerLinks.pages.map((item) => (
+              <li key={item.label}>
+                <a href={item.href} className="transition hover:text-white">
+                  {item.label}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        <div>
+          <h4 className="font-industrial mb-4 text-sm tracking-[0.14em] text-brand">
+            CATEGORIES
+          </h4>
+          <ul className="space-y-2 text-sm text-white/75">
+            {footerLinks.categories.map((item) => (
+              <li key={item.label}>
+                <a href={item.href} className="transition hover:text-white">
+                  {item.label}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+
+      <div className="border-t border-white/10">
+        <div className="container-page flex flex-col items-start justify-between gap-3 py-5 text-xs text-white/50 sm:flex-row sm:items-center">
+          <p>
+            © {new Date().getFullYear()} {site.name} — {site.nameEn}
+          </p>
+          <p>پاسخگوی پرسش‌های شما هستیم</p>
+        </div>
+      </div>
+    </footer>
+  );
+}

src/components/Header.tsx

@@ -0,0 +1,125 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { navItems, site } from "@/data/home";
+
+export function Header() {
+  const [open, setOpen] = useState(false);
+  const [scrolled, setScrolled] = useState(false);
+
+  useEffect(() => {
+    const onScroll = () => setScrolled(window.scrollY > 24);
+    onScroll();
+    window.addEventListener("scroll", onScroll, { passive: true });
+    return () => window.removeEventListener("scroll", onScroll);
+  }, []);
+
+  useEffect(() => {
+    document.body.style.overflow = open ? "hidden" : "";
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [open]);
+
+  return (
+    <header
+      className={`fixed inset-x-0 top-0 z-50 transition-colors duration-300 ${
+        scrolled || open
+          ? "border-b border-white/10 bg-brand-ink/95 backdrop-blur-md"
+          : "bg-transparent"
+      }`}
+    >
+      <div className="container-page flex items-center justify-between gap-4 py-4 text-white">
+        <a href="/" className="group flex items-center gap-3 !text-white">
+          <span className="grid h-10 w-10 place-items-center border border-brand bg-brand/20 font-industrial text-lg font-bold tracking-wide text-brand transition group-hover:bg-brand group-hover:!text-white">
+            M
+          </span>
+          <span className="leading-none">
+            <span className="font-industrial block text-xl font-bold tracking-[0.14em] !text-white">
+              {site.nameEn}
+            </span>
+            <span className="mt-1 block text-xs !text-white/70">{site.name}</span>
+          </span>
+        </a>
+
+        <nav className="hidden items-center gap-1 lg:flex">
+          {navItems.map((item) => (
+            <a
+              key={item.label}
+              href={item.href}
+              className="px-3 py-2 text-sm !text-white/85 transition hover:!text-white"
+            >
+              {item.label}
+            </a>
+          ))}
+        </nav>
+
+        <div className="hidden items-center gap-4 lg:flex">
+          <a
+            href={`tel:${site.phone}`}
+            className="latin-digits text-sm !text-white/85 transition hover:!text-white"
+            dir="ltr"
+          >
+            {site.phoneDisplay}
+          </a>
+          <a
+            href={site.loginUrl}
+            className="btn-primary !min-h-10 !px-4 !text-sm"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            ورود فروشندگان
+          </a>
+        </div>
+
+        <button
+          type="button"
+          aria-label="منو"
+          className="grid h-10 w-10 place-items-center border border-white/25 !text-white lg:hidden"
+          onClick={() => setOpen((v) => !v)}
+        >
+          <span className="sr-only">منو</span>
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
+            {open ? (
+              <path
+                d="M6 6l12 12M18 6 6 18"
+                stroke="currentColor"
+                strokeWidth="1.8"
+              />
+            ) : (
+              <path
+                d="M4 7h16M4 12h16M4 17h16"
+                stroke="currentColor"
+                strokeWidth="1.8"
+              />
+            )}
+          </svg>
+        </button>
+      </div>
+
+      {open ? (
+        <div className="border-t border-white/10 bg-brand-ink lg:hidden">
+          <nav className="container-page flex flex-col gap-1 py-4">
+            {navItems.map((item) => (
+              <a
+                key={item.label}
+                href={item.href}
+                className="px-2 py-3 !text-white/90"
+                onClick={() => setOpen(false)}
+              >
+                {item.label}
+              </a>
+            ))}
+            <a
+              href={`tel:${site.phone}`}
+              className="latin-digits mt-2 px-2 py-3 !text-brand"
+              dir="ltr"
+            >
+              {site.phoneDisplay}
+            </a>
+          </nav>
+        </div>
+      ) : null}
+    </header>
+  );
+}

src/components/Hero.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import Image from "next/image";
+import { FormEvent, useState } from "react";
+import { searchSuggestions, site } from "@/data/home";
+
+export function Hero() {
+  const [query, setQuery] = useState("");
+
+  const onSubmit = (e: FormEvent) => {
+    e.preventDefault();
+    const q = query.trim();
+    if (!q) return;
+    window.location.hash = `products`;
+  };
+
+  return (
+    <section className="relative min-h-[100svh] overflow-hidden bg-brand-ink text-white">
+      <Image
+        src="/images/hero/search-bg.jpg"
+        alt="ماشین‌آلات صنعتی"
+        fill
+        priority
+        className="object-cover object-[center_35%] scale-105"
+        sizes="100vw"
+      />
+      <div className="absolute inset-0 bg-[linear-gradient(105deg,rgba(6,35,63,0.94)_0%,rgba(6,35,63,0.78)_52%,rgba(0,109,212,0.5)_100%)]" />
+      <div className="absolute inset-0 bg-[radial-gradient(circle_at_18%_18%,rgba(0,109,212,0.32),transparent_40%)]" />
+
+      <div className="relative z-10 flex min-h-[100svh] flex-col justify-end pb-16 pt-28 md:justify-center md:pb-24 md:pt-32">
+        <div className="container-page">
+          <p className="animate-rise section-kicker !text-[#7ec2ff]">
+            Heavy Machinery Marketplace
+          </p>
+
+          <h1 className="animate-rise animate-rise-delay-1 mt-3 max-w-4xl">
+            <span className="font-industrial block text-[clamp(3.2rem,11vw,7rem)] font-bold leading-[0.9] tracking-[0.06em]">
+              {site.nameEn}
+            </span>
+            <span className="mt-4 block max-w-2xl text-[clamp(1.2rem,2.6vw,1.75rem)] font-extrabold leading-snug text-white">
+              {site.tagline}
+            </span>
+          </h1>
+
+          <p className="animate-rise animate-rise-delay-2 mt-5 max-w-xl text-base text-white/80 md:text-lg">
+            {site.name}؛ جستجوی سریع ماشین‌آلات صنعتی نو و کارکرده برای
+            تولیدکنندگان و فروشندگان.
+          </p>
+
+          <form
+            onSubmit={onSubmit}
+            className="animate-rise animate-rise-delay-3 search-shell mt-8 max-w-3xl border border-white/15 bg-white/95 p-2 shadow-[0_20px_60px_rgba(0,0,0,0.28)] backdrop-blur-sm"
+          >
+            <div className="flex flex-col gap-2 sm:flex-row sm:items-stretch">
+              <label className="sr-only" htmlFor="machine-search">
+                جستجوی ماشین‌آلات
+              </label>
+              <input
+                id="machine-search"
+                name="q"
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+                placeholder="نام کالای مورد نظر خود را جستجو کنید"
+                className="min-h-14 flex-1 bg-transparent px-4 text-base text-brand-ink outline-none placeholder:text-[#8a97a6]"
+                required
+              />
+              <button type="submit" className="btn-primary min-h-14 px-8">
+                جستجو
+              </button>
+            </div>
+          </form>
+
+          <div className="mt-4 flex flex-wrap gap-2">
+            {searchSuggestions.map((item) => (
+              <button
+                key={item}
+                type="button"
+                onClick={() => setQuery(item)}
+                className="border border-white/20 bg-white/5 px-3 py-1.5 text-xs text-white/80 transition hover:border-brand hover:bg-brand/20 hover:text-white"
+              >
+                {item}
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/Products.tsx

@@ -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>
+  );
+}

src/data/home.ts

@@ -0,0 +1,151 @@
+export const site = {
+  name: "ماشینیفای",
+  nameEn: "MASHINIFY",
+  tagline: "بازار ماشین‌آلات سنگین و صنعتی",
+  description:
+    "ماشینیفای، بستر خرید و فروش ماشین‌آلات صنعتی نو و کارکرده؛ از دستگاه‌های سیم و کابل تا لیزر و اکسترودر.",
+  phone: "025-36700000",
+  phoneDisplay: "025-36700000",
+  address: "قم، سالاریه، میدان پیچک، ساختمان بنفشه",
+  loginUrl: "https://app.mashinify.com/auth/login",
+  supportLabel: "پشتیبانی",
+};
+
+export const navItems = [
+  { label: "خانه", href: "/" },
+  { label: "محصولات", href: "#products" },
+  { label: "دسته‌بندی‌ها", href: "#categories" },
+  { label: "مقالات", href: "#articles" },
+  { label: "درباره ما", href: "#about" },
+  { label: "تماس با ما", href: "#contact" },
+];
+
+export const searchSuggestions = [
+  "لیزر فایبر",
+  "اکسترودر سیم",
+  "گرانول‌ساز",
+  "مولتی وایر",
+  "ماشین‌آلات کارکرده",
+];
+
+export const categories = [
+  {
+    id: "used",
+    title: "محصولات کارکرده",
+    titleEn: "Used Products",
+    description: "ماشین‌آلات دست‌دوم بازرسی‌شده برای تولید مقرون‌به‌صرفه",
+    image: "/images/categories/used.jpg",
+    href: "#products",
+  },
+  {
+    id: "new",
+    title: "محصولات نو",
+    titleEn: "New Products",
+    description: "دستگاه‌های نو با گارانتی و پشتیبانی فروشنده",
+    image: "/images/categories/new.jpg",
+    href: "#products",
+  },
+  {
+    id: "wire-cable",
+    title: "ماشین‌آلات سیم و کابل",
+    titleEn: "Wire & Cable",
+    description: "اکسترودر، مولتی‌وایر و خطوط تولید سیم و کابل",
+    image: "/images/categories/wire-cable.jpg",
+    href: "#products",
+  },
+  {
+    id: "education",
+    title: "آموزشی",
+    titleEn: "Education",
+    description: "راهنما و مقالات تخصصی انتخاب و نگهداری دستگاه",
+    image: "/images/categories/education.jpg",
+    href: "#articles",
+  },
+];
+
+export const products = [
+  {
+    id: 21447,
+    title: "دستگاه لیزر فایبر برش فلزات",
+    titleEn: "Fiber Laser Cutting Machine",
+    category: "ماشین‌آلات برش",
+    condition: "نو",
+    image: "/images/products/fiber-laser.jpg",
+    href: "#products",
+    inquiry: true,
+  },
+  {
+    id: 21446,
+    title: "دستگاه گرانول‌ساز",
+    titleEn: "Plastic Granulator Machine",
+    category: "بازیافت پلاستیک",
+    condition: "نو",
+    image: "/images/products/granulator.jpg",
+    href: "#products",
+    inquiry: true,
+  },
+  {
+    id: 21427,
+    title: "دستگاه اکسترودر سیم",
+    titleEn: "Wire Extruder Machine",
+    category: "سیم و کابل",
+    condition: "کارکرده",
+    image: "/images/products/wire-extruder.jpg",
+    href: "#products",
+    inquiry: true,
+  },
+  {
+    id: 21426,
+    title: "دستگاه اکسترود تفلون",
+    titleEn: "Teflon Extruder Machine",
+    category: "سیم و کابل",
+    condition: "کارکرده",
+    image: "/images/products/teflon-extruder.jpg",
+    href: "#products",
+    inquiry: true,
+  },
+];
+
+export const stats = [
+  { value: "+100", label: "فروش موفق" },
+  { value: "24/7", label: "پشتیبانی تخصصی" },
+  { value: "New & Used", label: "موجودی متنوع" },
+];
+
+export const articles = [
+  {
+    id: 2898,
+    title:
+      "مزایای ارتقاء دستگاه‌های صنعتی قدیمی و تأثیر آن بر افزایش بهره‌وری",
+    image: "/images/articles/upgrade.jpg",
+    href: "#articles",
+  },
+  {
+    id: 2895,
+    title:
+      "چرا سرمایه‌گذاری در دستگاه‌های صنعتی هوشمند، آینده کسب‌وکار شما را تضمین می‌کند؟",
+    image: "/images/articles/smart-machines.jpg",
+    href: "#articles",
+  },
+  {
+    id: 2892,
+    title:
+      "ماشین‌آلات صنعتی دست دوم: فرصت هوشمندانه برای تولیدکنندگان با بودجه محدود",
+    image: "/images/articles/used-machines.jpg",
+    href: "#articles",
+  },
+];
+
+export const footerLinks = {
+  pages: [
+    { label: "صفحه اصلی", href: "/" },
+    { label: "محصولات", href: "#products" },
+    { label: "مقالات", href: "#articles" },
+    { label: "درباره ما", href: "#about" },
+    { label: "تماس با ما", href: "#contact" },
+  ],
+  categories: categories.map((c) => ({
+    label: c.title,
+    href: c.href,
+  })),
+};