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>

.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

AGENTS.md

@@ -0,0 +1,9 @@
+<!-- BEGIN:nextjs-agent-rules -->
+
+# This is NOT the Next.js you know
+
+This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` (resolved from this file's directory; in monorepos the `next` package may not be visible from the repo root) before writing any code. Heed deprecation notices.
+
+This block is written and re-added by `next dev` — verify at `node_modules/next/dist/server/lib/generate-agent-files.js`. Removing it from a diff only re-creates the uncommitted change; committing it with your work keeps the tree clean.
+
+<!-- END:nextjs-agent-rules -->

CLAUDE.md

@@ -0,0 +1 @@
+@AGENTS.md

README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

eslint.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;

package.json

@@ -0,0 +1,26 @@
+{
+  "name": "mashinify",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "next": "16.3.0",
+    "react": "19.2.8",
+    "react-dom": "19.2.8"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.3.0",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}

postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

prompt.txt

@@ -0,0 +1,15 @@
+Please make a new version of this website
+https://www.mashinify.com/
+The website sells stock heavy machinery
+
+You can make it better anywhere you want
+Lang: fa
+Dir: rtl
+Use next js
+Download image from main website without any change and put in src/images with proper foldering if required
+You can use unsplash photos 
+Build only home page for now
+Use the data from main website
+Color Pallete is blue (#006DD4)
+Use an English industrial font
+Search and categories are main part of this website

public/file.svg

@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>

public/globe.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

public/next.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

public/vercel.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>

public/window.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>

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

tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
+  "exclude": ["node_modules"]
+}