Create Saman Andish industrial website

Build a responsive Persian Next.js experience with product discovery and dedicated company contact pages.

Co-authored-by: Cursor <cursoragent@cursor.com>

app/about-us/page.tsx

@@ -0,0 +1,211 @@
+import type { Metadata } from "next";
+import {
+  ArrowLeft,
+  Award,
+  CheckCircle2,
+  Factory,
+  Gauge,
+  Globe2,
+  Handshake,
+  Target,
+  Users,
+} from "lucide-react";
+import Link from "next/link";
+import { InteriorFooter, InteriorHeader } from "../components/InteriorShell";
+
+const assetBase =
+  "https://meshkee-templates.sas.amin.parminstorage.ir/sites/user_themes/SamanAndish_OcHaRXRqAo/assets/files";
+
+export const metadata: Metadata = {
+  title: "درباره سامان اندیش | تجربه تخصصی صنعت سیم و کابل",
+  description:
+    "با تاریخچه، ارزش‌ها و توانمندی‌های تخصصی شرکت سامان اندیش در تأمین ماشین‌آلات صنعت سیم و کابل آشنا شوید.",
+};
+
+export default function AboutUsPage() {
+  return (
+    <main>
+      <InteriorHeader active="about" />
+
+      <section
+        className="inner-hero"
+        style={{ backgroundImage: `url("${assetBase}/s9zJRbKrhE.jpg")` }}
+      >
+        <div className="inner-hero__shade" />
+        <div className="container inner-hero__content">
+          <span>ABOUT SAMAN ANDISH</span>
+          <h1>درباره سامان اندیش</h1>
+          <p>
+            بیش از دو دهه تجربه در پیوند فناوری جهانی با صنعت سیم و کابل ایران
+          </p>
+          <div>
+            <Link href="/">صفحه اصلی</Link>
+            <i>/</i>
+            <strong>درباره ما</strong>
+          </div>
+        </div>
+      </section>
+
+      <section className="about-intro">
+        <div className="container about-intro__grid">
+          <div className="about-intro__visual">
+            <img
+              src={`${assetBase}/trEfzlNgmz.jpg`}
+              alt="ماشین‌آلات صنعت سیم و کابل"
+            />
+            <div>
+              <strong dir="ltr">25+</strong>
+              <span>سال تجربه تخصصی</span>
+            </div>
+          </div>
+          <div className="about-intro__copy">
+            <span className="inner-eyebrow">WHO WE ARE</span>
+            <h2>همراه صنعت، از انتخاب تا بهره‌برداری</h2>
+            <p className="lead">
+              سامان اندیش یک مجموعه مهندسی و بازرگانی تخصصی در حوزه ماشین‌آلات،
+              مواد اولیه و خدمات فنی صنعت سیم و کابل است.
+            </p>
+            <p>
+              ما با شناخت عمیق از فرآیندهای تولید و همکاری با سازندگان معتبر
+              بین‌المللی، به کارخانه‌ها کمک می‌کنیم مناسب‌ترین راهکار را بر اساس
+              ظرفیت تولید، بودجه و برنامه توسعه خود انتخاب کنند. همکاری ما با
+              فروش دستگاه پایان نمی‌یابد؛ ارزیابی فنی، حمل، نصب، راه‌اندازی و
+              پشتیبانی، بخش جدایی‌ناپذیر تعهد ماست.
+            </p>
+            <div className="about-checks">
+              {[
+                "ارزیابی فنی پیش از خرید",
+                "شبکه تأمین بین‌المللی",
+                "نصب و راه‌اندازی تخصصی",
+                "پشتیبانی بلندمدت",
+              ].map((item) => (
+                <span key={item}>
+                  <CheckCircle2 />
+                  {item}
+                </span>
+              ))}
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section className="about-stats">
+        <div className="container about-stats__grid">
+          {[
+            ["۲۵+", "سال تجربه"],
+            ["۱۲۰+", "ماشین‌آلات تأمین‌شده"],
+            ["۴۰+", "برند بین‌المللی"],
+            ["۸۰+", "مشتری صنعتی"],
+          ].map(([number, label]) => (
+            <div key={label}>
+              <strong>{number}</strong>
+              <span>{label}</span>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      <section className="mission">
+        <div className="container">
+          <div className="inner-section-title">
+            <span>OUR PURPOSE</span>
+            <h2>آنچه مسیر ما را می‌سازد</h2>
+          </div>
+          <div className="mission__grid">
+            <article>
+              <span>
+                <Target />
+              </span>
+              <small>01</small>
+              <h3>ماموریت ما</h3>
+              <p>
+                ارائه راهکارهای صنعتی قابل اتکا که بهره‌وری، کیفیت و پایداری
+                خطوط تولید مشتریان را افزایش دهد.
+              </p>
+            </article>
+            <article>
+              <span>
+                <Globe2 />
+              </span>
+              <small>02</small>
+              <h3>چشم‌انداز ما</h3>
+              <p>
+                تبدیل شدن به مرجع نخست تأمین و مهندسی ماشین‌آلات سیم و کابل در
+                بازار ایران و منطقه.
+              </p>
+            </article>
+            <article>
+              <span>
+                <Handshake />
+              </span>
+              <small>03</small>
+              <h3>تعهد ما</h3>
+              <p>
+                ساختن همکاری شفاف و بلندمدت؛ از نخستین مشاوره تا سال‌ها پس از
+                بهره‌برداری تجهیزات.
+              </p>
+            </article>
+          </div>
+        </div>
+      </section>
+
+      <section className="why-us">
+        <div className="container why-us__grid">
+          <div className="why-us__copy">
+            <span className="inner-eyebrow">WHY SAMAN ANDISH</span>
+            <h2>تخصصی که به تصمیم بهتر تبدیل می‌شود</h2>
+            <p>
+              هر پروژه را با شناخت دقیق نیاز تولید آغاز می‌کنیم و با ترکیب دانش
+              فنی، تجربه بازار و دسترسی به تأمین‌کنندگان جهانی، ریسک انتخاب و
+              خرید را کاهش می‌دهیم.
+            </p>
+            <div>
+              {[
+                [Factory, "شناخت فرآیند تولید", "تحلیل دقیق نیاز هر خط"],
+                [Gauge, "تمرکز بر بهره‌وری", "انتخاب اقتصادی و پایدار"],
+                [Award, "کیفیت قابل ارزیابی", "بازرسی و مستندسازی فنی"],
+                [Users, "تیم همراه", "پاسخ‌گویی در تمام مراحل"],
+              ].map(([Icon, title, text]) => {
+                const FeatureIcon = Icon as typeof Factory;
+                return (
+                  <article key={title as string}>
+                    <FeatureIcon />
+                    <span>
+                      <strong>{title as string}</strong>
+                      <small>{text as string}</small>
+                    </span>
+                  </article>
+                );
+              })}
+            </div>
+          </div>
+          <div className="why-us__image">
+            <img
+              src={`${assetBase}/rhipZeVqzD.jpg`}
+              alt="خدمات مهندسی سامان اندیش"
+            />
+            <div>
+              <strong>راهکار مناسب،</strong>
+              <span>برای خط تولید شما</span>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section className="inner-cta">
+        <div className="container">
+          <div>
+            <span>شروع یک همکاری مطمئن</span>
+            <h2>برای توسعه خط تولید خود با ما گفتگو کنید.</h2>
+          </div>
+          <Link className="button button--white" href="/contact-us">
+            تماس با کارشناسان
+            <ArrowLeft size={18} />
+          </Link>
+        </div>
+      </section>
+
+      <InteriorFooter />
+    </main>
+  );
+}

app/components/InteriorShell.tsx

@@ -0,0 +1,187 @@
+"use client";
+
+import {
+  ArrowUpLeft,
+  Camera,
+  ChevronLeft,
+  CircleUserRound,
+  Link as LinkIcon,
+  Mail,
+  MapPin,
+  Menu,
+  MessageCircle,
+  Phone,
+  Search,
+  Sparkles,
+  X,
+} from "lucide-react";
+import Link from "next/link";
+import { useState } from "react";
+
+const assetBase =
+  "https://meshkee-templates.sas.amin.parminstorage.ir/sites/user_themes/SamanAndish_OcHaRXRqAo/assets/files";
+
+const navItems = [
+  { label: "صفحه اصلی", href: "/" },
+  { label: "محصولات", href: "/#products" },
+  { label: "خدمات", href: "/#services" },
+  { label: "اخبار", href: "/#news" },
+  { label: "درباره ما", href: "/about-us", key: "about" },
+  { label: "تماس با ما", href: "/contact-us", key: "contact" },
+];
+
+export function InteriorHeader({
+  active,
+}: {
+  active?: "about" | "contact";
+}) {
+  const [mobileOpen, setMobileOpen] = useState(false);
+
+  return (
+    <>
+      <div className="topbar">
+        <div className="container topbar__inner">
+          <p>
+            <Sparkles size={14} />
+            شریک تخصصی صنعت سیم و کابل ایران
+          </p>
+          <div>
+            <a href="mailto:info@samanandish.com">
+              <Mail size={14} />
+              info@samanandish.com
+            </a>
+            <span />
+            <a href="tel:+982188530256" dir="ltr">
+              <Phone size={14} />
+              +98 21 8853 0256
+            </a>
+          </div>
+        </div>
+      </div>
+      <header className="header">
+        <div className="container header__inner">
+          <Link className="logo" href="/" aria-label="سامان اندیش">
+            <img src={`${assetBase}/KN83Drb6oI.png`} alt="سامان اندیش" />
+          </Link>
+          <nav className="desktop-nav" aria-label="ناوبری اصلی">
+            {navItems.map((item) => (
+              <Link
+                className={item.key === active ? "active" : ""}
+                href={item.href}
+                key={item.label}
+              >
+                {item.label}
+              </Link>
+            ))}
+          </nav>
+          <div className="header__actions">
+            <Link className="icon-button" href="/#smart-search" aria-label="جستجو">
+              <Search size={22} />
+            </Link>
+            <button className="icon-button user-button" aria-label="حساب کاربری">
+              <CircleUserRound size={22} />
+            </button>
+            <Link className="header__cta" href="/contact-us">
+              درخواست مشاوره
+              <ArrowUpLeft size={17} />
+            </Link>
+            <button
+              className="mobile-toggle"
+              onClick={() => setMobileOpen((open) => !open)}
+              aria-label="منو"
+            >
+              {mobileOpen ? <X /> : <Menu />}
+            </button>
+          </div>
+        </div>
+        {mobileOpen && (
+          <nav className="mobile-nav">
+            {navItems.map((item) => (
+              <Link
+                href={item.href}
+                key={item.label}
+                onClick={() => setMobileOpen(false)}
+              >
+                {item.label}
+                <ChevronLeft size={17} />
+              </Link>
+            ))}
+          </nav>
+        )}
+      </header>
+    </>
+  );
+}
+
+export function InteriorFooter() {
+  return (
+    <footer className="footer">
+      <div className="footer__pattern" />
+      <div className="container footer__grid">
+        <div className="footer__brand">
+          <img src={`${assetBase}/4eEq8S7FxV.png`} alt="سامان اندیش" />
+          <p>
+            تأمین‌کننده تخصصی ماشین‌آلات و راهکارهای فنی صنعت سیم و کابل، با
+            تمرکز بر کیفیت، بهره‌وری و همکاری بلندمدت.
+          </p>
+          <div>
+            <a href="#" aria-label="اینستاگرام">
+              <Camera />
+            </a>
+            <a href="#" aria-label="لینکدین">
+              <LinkIcon />
+            </a>
+            <a href="#" aria-label="تلگرام">
+              <MessageCircle />
+            </a>
+          </div>
+        </div>
+        <div className="footer__links">
+          <h3>دسترسی سریع</h3>
+          <Link href="/">صفحه اصلی</Link>
+          <Link href="/#products">ماشین‌آلات</Link>
+          <Link href="/about-us">درباره ما</Link>
+          <Link href="/contact-us">تماس با ما</Link>
+        </div>
+        <div className="footer__links">
+          <h3>خدمات ما</h3>
+          <Link href="/#services">تأمین ماشین‌آلات</Link>
+          <Link href="/#services">خدمات فنی و مهندسی</Link>
+          <Link href="/#services">مواد اولیه</Link>
+          <Link href="/contact-us">مشاوره خرید</Link>
+        </div>
+        <div className="footer__contact">
+          <h3>با ما در ارتباط باشید</h3>
+          <a href="tel:+982188530256">
+            <span>
+              <Phone />
+            </span>
+            <div>
+              <small>شماره تماس</small>
+              <strong dir="ltr">021 8853 0256</strong>
+            </div>
+          </a>
+          <a href="mailto:info@samanandish.com">
+            <span>
+              <Mail />
+            </span>
+            <div>
+              <small>ایمیل</small>
+              <strong>info@samanandish.com</strong>
+            </div>
+          </a>
+          <div className="address">
+            <span>
+              <MapPin />
+            </span>
+            <p>تهران، خیابان مطهری، خیابان ترکمنستان</p>
+          </div>
+        </div>
+      </div>
+      <div className="container footer__bottom">
+        <p>© ۱۴۰۵ سامان اندیش — تمامی حقوق محفوظ است.</p>
+        <span dir="ltr">ENGINEERED FOR INDUSTRY</span>
+      </div>
+    </footer>
+  );
+}

app/contact-us/ContactForm.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { ArrowLeft, CheckCircle2 } from "lucide-react";
+import type { FormEvent } from "react";
+import { useState } from "react";
+
+export default function ContactForm() {
+  const [submitted, setSubmitted] = useState(false);
+
+  const submit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setSubmitted(true);
+  };
+
+  if (submitted) {
+    return (
+      <div className="contact-success">
+        <CheckCircle2 />
+        <h3>پیام شما ثبت شد</h3>
+        <p>کارشناسان سامان اندیش در اولین فرصت با شما تماس خواهند گرفت.</p>
+        <button onClick={() => setSubmitted(false)}>ارسال پیام دیگر</button>
+      </div>
+    );
+  }
+
+  return (
+    <form className="contact-form" onSubmit={submit}>
+      <div className="form-row">
+        <label>
+          نام و نام خانوادگی
+          <input name="name" placeholder="نام شما" required />
+        </label>
+        <label>
+          شماره تماس
+          <input
+            name="phone"
+            inputMode="tel"
+            placeholder="09xx xxx xxxx"
+            dir="ltr"
+            required
+          />
+        </label>
+      </div>
+      <div className="form-row">
+        <label>
+          ایمیل
+          <input
+            name="email"
+            type="email"
+            placeholder="name@company.com"
+            dir="ltr"
+          />
+        </label>
+        <label>
+          موضوع درخواست
+          <select name="subject" defaultValue="">
+            <option value="" disabled>
+              انتخاب کنید
+            </option>
+            <option>خرید ماشین‌آلات</option>
+            <option>خدمات فنی و مهندسی</option>
+            <option>تأمین مواد اولیه</option>
+            <option>همکاری تجاری</option>
+            <option>سایر موارد</option>
+          </select>
+        </label>
+      </div>
+      <label>
+        پیام شما
+        <textarea
+          name="message"
+          rows={6}
+          placeholder="درباره دستگاه، برند، ظرفیت تولید یا خدمات مورد نیاز توضیح دهید..."
+          required
+        />
+      </label>
+      <button type="submit">
+        ارسال درخواست
+        <ArrowLeft size={18} />
+      </button>
+      <small>
+        با ارسال فرم، کارشناسان ما برای تکمیل اطلاعات با شما تماس می‌گیرند.
+      </small>
+    </form>
+  );
+}

app/contact-us/page.tsx

@@ -0,0 +1,158 @@
+import type { Metadata } from "next";
+import {
+  Clock3,
+  ExternalLink,
+  Mail,
+  MapPin,
+  MessageCircle,
+  Phone,
+} from "lucide-react";
+import Link from "next/link";
+import { InteriorFooter, InteriorHeader } from "../components/InteriorShell";
+import ContactForm from "./ContactForm";
+
+const assetBase =
+  "https://meshkee-templates.sas.amin.parminstorage.ir/sites/user_themes/SamanAndish_OcHaRXRqAo/assets/files";
+
+export const metadata: Metadata = {
+  title: "تماس با سامان اندیش | مشاوره ماشین‌آلات صنعتی",
+  description:
+    "برای مشاوره خرید ماشین‌آلات، خدمات فنی و تأمین مواد اولیه صنعت سیم و کابل با کارشناسان سامان اندیش تماس بگیرید.",
+};
+
+export default function ContactUsPage() {
+  return (
+    <main>
+      <InteriorHeader active="contact" />
+
+      <section
+        className="inner-hero inner-hero--contact"
+        style={{ backgroundImage: `url("${assetBase}/ZLxH2tZ4dR.jpg")` }}
+      >
+        <div className="inner-hero__shade" />
+        <div className="container inner-hero__content">
+          <span>GET IN TOUCH</span>
+          <h1>تماس با ما</h1>
+          <p>برای انتخاب بهترین راهکار صنعتی، کنار شما هستیم</p>
+          <div>
+            <Link href="/">صفحه اصلی</Link>
+            <i>/</i>
+            <strong>تماس با ما</strong>
+          </div>
+        </div>
+      </section>
+
+      <section className="contact-info">
+        <div className="container contact-info__grid">
+          <a href="tel:+982188530256">
+            <span>
+              <Phone />
+            </span>
+            <div>
+              <small>تماس مستقیم</small>
+              <strong dir="ltr">021 8853 0256</strong>
+              <p>پاسخ‌گویی شنبه تا چهارشنبه</p>
+            </div>
+          </a>
+          <a href="mailto:info@samanandish.com">
+            <span>
+              <Mail />
+            </span>
+            <div>
+              <small>ایمیل سازمانی</small>
+              <strong>info@samanandish.com</strong>
+              <p>برای ارسال مشخصات فنی و پیشنهادات</p>
+            </div>
+          </a>
+          <div>
+            <span>
+              <MapPin />
+            </span>
+            <div>
+              <small>دفتر مرکزی</small>
+              <strong>تهران، خیابان مطهری</strong>
+              <p>خیابان ترکمنستان، دفتر سامان اندیش</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section className="contact-main">
+        <div className="container contact-main__grid">
+          <div className="contact-main__copy">
+            <span className="inner-eyebrow">SEND A MESSAGE</span>
+            <h2>درخواست خود را با ما در میان بگذارید</h2>
+            <p>
+              برای استعلام ماشین‌آلات، دریافت مشاوره فنی یا شروع همکاری، فرم را
+              تکمیل کنید. اطلاعات شما مستقیماً به تیم مرتبط ارجاع می‌شود.
+            </p>
+            <ContactForm />
+          </div>
+
+          <aside className="contact-aside">
+            <div className="contact-aside__image">
+              <img src={`${assetBase}/rf3fNjazCx.png`} alt="موقعیت سامان اندیش" />
+              <a
+                href="https://www.google.com/maps/place/Saman+Andish/@35.7424283,51.4396725,17z"
+                target="_blank"
+                rel="noreferrer"
+              >
+                مشاهده در نقشه
+                <ExternalLink size={16} />
+              </a>
+            </div>
+            <div className="office-hours">
+              <h3>
+                <Clock3 />
+                ساعت کاری
+              </h3>
+              <div>
+                <span>شنبه تا چهارشنبه</span>
+                <strong>۸:۳۰ تا ۱۷:۰۰</strong>
+              </div>
+              <div>
+                <span>پنج‌شنبه</span>
+                <strong>با هماهنگی قبلی</strong>
+              </div>
+              <div>
+                <span>جمعه</span>
+                <strong>تعطیل</strong>
+              </div>
+            </div>
+            <a className="quick-contact" href="tel:+982188530256">
+              <MessageCircle />
+              <span>
+                <small>نیاز به پاسخ سریع دارید؟</small>
+                <strong>همین حالا تماس بگیرید</strong>
+              </span>
+            </a>
+          </aside>
+        </div>
+      </section>
+
+      <section className="contact-departments">
+        <div className="container">
+          <div className="inner-section-title">
+            <span>DIRECT CONTACT</span>
+            <h2>ارتباط با واحدهای تخصصی</h2>
+          </div>
+          <div>
+            {[
+              ["فروش ماشین‌آلات", "machinery@samanandish.com", "داخلی ۱۰۱"],
+              ["خدمات فنی", "service@samanandish.com", "داخلی ۱۰۲"],
+              ["همکاری تجاری", "commerce@samanandish.com", "داخلی ۱۰۳"],
+            ].map(([title, email, extension]) => (
+              <article key={title}>
+                <small>{extension}</small>
+                <h3>{title}</h3>
+                <a href={`mailto:${email}`}>{email}</a>
+              </article>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <InteriorFooter />
+    </main>
+  );
+}

app/layout.tsx

@@ -0,0 +1,20 @@
+import type { Metadata } from "next";
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: "سامان اندیش | ماشین‌آلات صنعت سیم و کابل",
+  description:
+    "تامین ماشین‌آلات، مواد اولیه و خدمات فنی مهندسی صنعت سیم و کابل",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="fa" dir="rtl">
+      <body>{children}</body>
+    </html>
+  );
+}

app/page.tsx

@@ -0,0 +1,701 @@
+"use client";
+
+import {
+  ArrowLeft,
+  ArrowUpLeft,
+  BriefcaseBusiness,
+  Camera,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  CircleUserRound,
+  FlaskConical,
+  Gauge,
+  Globe2,
+  Link,
+  Mail,
+  MapPin,
+  Menu,
+  MessageCircle,
+  Phone,
+  Search,
+  Settings,
+  ShieldCheck,
+  SlidersHorizontal,
+  Sparkles,
+  X,
+} from "lucide-react";
+import type { FormEvent } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
+
+const assetBase =
+  "https://meshkee-templates.sas.amin.parminstorage.ir/sites/user_themes/SamanAndish_OcHaRXRqAo/assets/files";
+
+const heroSlides = [
+  {
+    image: `${assetBase}/i8SsUDDMLv.jpg`,
+    eyebrow: "WIRE & CABLE MACHINERY",
+    title: "تجربه‌ای مطمئن در تأمین ماشین‌آلات صنعتی",
+    text: "راهکارهای تخصصی برای خطوط تولید سیم و کابل؛ از انتخاب و خرید تا نصب و راه‌اندازی.",
+  },
+  {
+    image: `${assetBase}/s9zJRbKrhE.jpg`,
+    eyebrow: "ENGINEERING THE FUTURE",
+    title: "مهندسی دقیق، عملکرد ماندگار",
+    text: "دسترسی به برندهای معتبر جهانی و مشاوره فنی متناسب با نیاز خط تولید شما.",
+  },
+  {
+    image: `${assetBase}/ZLxH2tZ4dR.jpg`,
+    eyebrow: "SAMAN ANDISH CO.",
+    title: "یک مسیر کوتاه‌تر تا خط تولید بهتر",
+    text: "ماشین‌آلات نو و کارکرده، مواد اولیه و خدمات مهندسی در یک مجموعه تخصصی.",
+  },
+];
+
+const categories = [
+  {
+    title: "ماشین‌آلات",
+    en: "MACHINERY",
+    image: `${assetBase}/MDJVsqMgHe.jpg`,
+    count: "+۱۲۰ دستگاه",
+  },
+  {
+    title: "خدمات فنی و مهندسی",
+    en: "TECHNICAL SERVICES",
+    image: `${assetBase}/68atRerNly.jpg`,
+    count: "از طراحی تا اجرا",
+  },
+  {
+    title: "مواد اولیه",
+    en: "RAW MATERIALS",
+    image: `${assetBase}/yxEFuyUDrT.jpg`,
+    count: "تأمین تخصصی",
+  },
+];
+
+const products = [
+  {
+    id: 1,
+    title: "دستگاه کوادینگ ۶۰۰ میلی‌متر",
+    en: "600mm Quadding Machine | QUA-21 | LESMO",
+    category: "دستگاه تابنده",
+    image:
+      "https://meshkee-storage.sas.amin.parminstorage.ir/saman_andish_2474/b597976c3ce6012f3a07e9f5c71a3c8c/conversions/WhatsApp-Image-2021-11-13-at-16.48.24-thumbnail.jpg",
+    code: "LESMO / QUA-21",
+  },
+  {
+    id: 2,
+    title: "بریدر ۱۶ کریر",
+    en: "16 Carriers Braider | 16N4 | SPIRKA",
+    category: "دستگاه بافنده",
+    image:
+      "https://meshkee-storage.sas.amin.parminstorage.ir/saman_andish_2474/24128c84241513596a1be1534a791c3b/conversions/IMG_20210911_125416-thumbnail.jpg",
+    code: "SPIRKA / 16N4",
+  },
+  {
+    id: 3,
+    title: "خط کشش ۰.۵–۰.۱۵ میلی‌متر",
+    en: "0.15–0.5 SQmm Drawing Line | TRB3 | SAMP",
+    category: "دستگاه کشش",
+    image:
+      "https://meshkee-storage.sas.amin.parminstorage.ir/saman_andish_2474/74e48c1a38cb4022d50c45dbd3be1f9a/conversions/WhatsApp-Image-2021-11-13-at-13.48.57-thumbnail.jpg",
+    code: "SAMP / TRB3",
+  },
+  {
+    id: 4,
+    title: "پی‌آف ۶۰۰ میلی‌متر",
+    en: "600mm Pay Off | TAP D-0800 | KDM",
+    category: "دستگاه پی‌آف",
+    image:
+      "https://meshkee-storage.sas.amin.parminstorage.ir/saman_andish_2474/86a2ebc1d9ebc0d693437b61502e03ce/conversions/Picture1-thumbnail.jpg",
+    code: "KDM / TAP D-0800",
+  },
+];
+
+const news = [
+  {
+    title: "شرکت مهندسی، مشاوره و بازرگانی HService",
+    date: "۰۸ خرداد ۱۴۰۲",
+    image:
+      "https://meshkee-storage.sas.amin.parminstorage.ir/saman_andish_2474/2f19d9aa2413f3265b58d130ca4865ea/conversions/SATV---Weblog-Cover-thumbnail.jpg",
+    tag: "همکاری تجاری",
+  },
+  {
+    title: "نمایشگاه‌های تجاری پیشرو Wire و Tube",
+    date: "۲۴ اردیبهشت ۱۴۰۲",
+    image:
+      "https://meshkee-storage.sas.amin.parminstorage.ir/saman_andish_2474/2434bffa9a1ba2b3f857680a8fbb5b4f/conversions/SATV---Blog-Cover---Wire-&-Tube-2022-thumbnail.jpg",
+    tag: "رویداد",
+  },
+  {
+    title: "انرژی پاک و بازار گواهی انرژی تجدیدپذیر",
+    date: "۱۲ اردیبهشت ۱۴۰۲",
+    image:
+      "https://meshkee-storage.sas.amin.parminstorage.ir/saman_andish_2474/862690c612c4c41a2ddceb9bf7a5c848/conversions/SATV---Blog-Cover---Green-Energy-thumbnail.jpg",
+    tag: "دانش فنی",
+  },
+];
+
+const customerLogos = [
+  "JkHpH80NQA.png",
+  "StBGKS3FHm.png",
+  "GAQiN0WIK5.png",
+  "lRkE9W3Pi0.png",
+  "mTdHxPHztj.png",
+  "JcGMFJ8Tv5.png",
+  "WIvmqxoUPv.png",
+  "XhaGH9MU5o.png",
+  "PypItIBoI0.png",
+  "0Y6asKSTsI.png",
+];
+
+function SectionTitle({
+  eyebrow,
+  title,
+  light = false,
+}: {
+  eyebrow: string;
+  title: string;
+  light?: boolean;
+}) {
+  return (
+    <div className={`section-title ${light ? "section-title--light" : ""}`}>
+      <span>{eyebrow}</span>
+      <h2>{title}</h2>
+      <i />
+    </div>
+  );
+}
+
+export default function Home() {
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const [activeSlide, setActiveSlide] = useState(0);
+  const [query, setQuery] = useState("");
+  const [searchOpen, setSearchOpen] = useState(false);
+  const searchInput = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    const timer = window.setInterval(
+      () => setActiveSlide((current) => (current + 1) % heroSlides.length),
+      6500,
+    );
+    return () => window.clearInterval(timer);
+  }, []);
+
+  const results = useMemo(() => {
+    const normalized = query.trim().toLowerCase();
+    if (!normalized) return products.slice(0, 3);
+    return products.filter((product) =>
+      [product.title, product.en, product.category, product.code]
+        .join(" ")
+        .toLowerCase()
+        .includes(normalized),
+    );
+  }, [query]);
+
+  const focusSearch = () => {
+    document.getElementById("smart-search")?.scrollIntoView({
+      behavior: "smooth",
+      block: "center",
+    });
+    window.setTimeout(() => {
+      searchInput.current?.focus();
+      setSearchOpen(true);
+    }, 500);
+  };
+
+  const submitSearch = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setSearchOpen(true);
+  };
+
+  return (
+    <main>
+      <div className="topbar">
+        <div className="container topbar__inner">
+          <p>
+            <Sparkles size={14} />
+            شریک تخصصی صنعت سیم و کابل ایران
+          </p>
+          <div>
+            <a href="mailto:info@samanandish.com">
+              <Mail size={14} />
+              info@samanandish.com
+            </a>
+            <span />
+            <a href="tel:+982188530256" dir="ltr">
+              <Phone size={14} />
+              +98 21 8853 0256
+            </a>
+          </div>
+        </div>
+      </div>
+
+      <header className="header">
+        <div className="container header__inner">
+          <a className="logo" href="#" aria-label="سامان اندیش">
+            <img src={`${assetBase}/KN83Drb6oI.png`} alt="سامان اندیش" />
+          </a>
+          <nav className="desktop-nav" aria-label="ناوبری اصلی">
+            <a className="active" href="#">
+              صفحه اصلی
+            </a>
+            <a href="#products">
+              محصولات
+              <ChevronDown size={14} />
+            </a>
+            <a href="#services">خدمات</a>
+            <a href="#news">اخبار</a>
+            <a href="/about-us">درباره ما</a>
+            <a href="/contact-us">تماس با ما</a>
+          </nav>
+          <div className="header__actions">
+            <button className="icon-button" onClick={focusSearch} aria-label="جستجو">
+              <Search size={22} />
+            </button>
+            <button className="icon-button user-button" aria-label="حساب کاربری">
+              <CircleUserRound size={22} />
+            </button>
+            <a className="header__cta" href="/contact-us">
+              درخواست مشاوره
+              <ArrowUpLeft size={17} />
+            </a>
+            <button
+              className="mobile-toggle"
+              onClick={() => setMobileOpen((open) => !open)}
+              aria-label="منو"
+            >
+              {mobileOpen ? <X /> : <Menu />}
+            </button>
+          </div>
+        </div>
+        {mobileOpen && (
+          <nav className="mobile-nav">
+            {[
+              ["صفحه اصلی", "#"],
+              ["محصولات", "#products"],
+              ["خدمات", "#services"],
+              ["اخبار", "#news"],
+              ["درباره ما", "/about-us"],
+              ["تماس با ما", "/contact-us"],
+            ].map(([label, href]) => (
+                <a key={label} href={href} onClick={() => setMobileOpen(false)}>
+                  {label}
+                  <ChevronLeft size={17} />
+                </a>
+              ))}
+          </nav>
+        )}
+      </header>
+
+      <section className="hero">
+        {heroSlides.map((slide, index) => (
+          <div
+            className={`hero__slide ${index === activeSlide ? "is-active" : ""}`}
+            key={slide.image}
+            style={{ backgroundImage: `url("${slide.image}")` }}
+          />
+        ))}
+        <div className="hero__overlay" />
+        <div className="hero__pattern" />
+        <div className="container hero__content">
+          <div className="hero__copy">
+            <p className="eyebrow">{heroSlides[activeSlide].eyebrow}</p>
+            <h1>{heroSlides[activeSlide].title}</h1>
+            <p className="hero__description">{heroSlides[activeSlide].text}</p>
+            <div className="hero__buttons">
+              <a className="button button--red" href="#products">
+                مشاهده محصولات
+                <ArrowLeft size={19} />
+              </a>
+              <a className="button button--glass" href="/about-us">
+                درباره سامان اندیش
+              </a>
+            </div>
+          </div>
+          <div className="hero__stats" dir="ltr">
+            <div>
+              <strong>25+</strong>
+              <span>YEARS EXPERIENCE</span>
+            </div>
+            <i />
+            <div>
+              <strong>120+</strong>
+              <span>INDUSTRIAL MACHINES</span>
+            </div>
+          </div>
+        </div>
+        <div className="hero__controls">
+          <button
+            onClick={() =>
+              setActiveSlide(
+                (activeSlide - 1 + heroSlides.length) % heroSlides.length,
+              )
+            }
+            aria-label="اسلاید قبلی"
+          >
+            <ChevronRight />
+          </button>
+          <div>
+            {heroSlides.map((slide, index) => (
+              <button
+                className={index === activeSlide ? "active" : ""}
+                key={slide.image}
+                onClick={() => setActiveSlide(index)}
+                aria-label={`اسلاید ${index + 1}`}
+              />
+            ))}
+          </div>
+          <button
+            onClick={() => setActiveSlide((activeSlide + 1) % heroSlides.length)}
+            aria-label="اسلاید بعدی"
+          >
+            <ChevronLeft />
+          </button>
+        </div>
+      </section>
+
+      <section className="search-panel" id="smart-search">
+        <div className="container">
+          <div className="search-card">
+            <div className="search-card__title">
+              <span>
+                <Search size={26} />
+              </span>
+              <div>
+                <strong>دنبال چه دستگاهی هستید؟</strong>
+                <small>نام، مدل، برند یا دسته‌بندی را وارد کنید</small>
+              </div>
+            </div>
+            <form onSubmit={submitSearch}>
+              <input
+                ref={searchInput}
+                type="search"
+                value={query}
+                onChange={(event) => {
+                  setQuery(event.target.value);
+                  setSearchOpen(true);
+                }}
+                onFocus={() => setSearchOpen(true)}
+                placeholder="مثلاً اکسترودر، دستگاه کشش یا Maillefer..."
+              />
+              <button type="submit">
+                جستجوی محصولات
+                <Search size={18} />
+              </button>
+            </form>
+            <div className="quick-search">
+              <span>جستجوی سریع:</span>
+              {["اکسترودر", "دستگاه کشش", "تیک‌آپ", "پی‌آف"].map((item) => (
+                <button
+                  key={item}
+                  onClick={() => {
+                    setQuery(item);
+                    setSearchOpen(true);
+                  }}
+                >
+                  {item}
+                </button>
+              ))}
+            </div>
+            {searchOpen && (
+              <div className="search-results">
+                <div className="search-results__head">
+                  <span>{results.length} نتیجه پیشنهادی</span>
+                  <button onClick={() => setSearchOpen(false)} aria-label="بستن">
+                    <X size={17} />
+                  </button>
+                </div>
+                {results.length ? (
+                  results.map((product) => (
+                    <a href="#products" key={product.id}>
+                      <img src={product.image} alt="" />
+                      <div>
+                        <strong>{product.title}</strong>
+                        <small dir="ltr">{product.en}</small>
+                      </div>
+                      <span>{product.category}</span>
+                      <ChevronLeft size={18} />
+                    </a>
+                  ))
+                ) : (
+                  <div className="empty-result">
+                    دستگاهی با این مشخصات پیدا نشد؛ برای راهنمایی با ما تماس بگیرید.
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+      </section>
+
+      <section className="categories" id="services">
+        <div className="container">
+          <SectionTitle
+            eyebrow="OUR EXPERTISE"
+            title="سه مسیر، یک راهکار کامل صنعتی"
+          />
+          <div className="category-grid">
+            {categories.map((category, index) => (
+              <a className="category-card" href="#" key={category.title}>
+                <img src={category.image} alt={category.title} />
+                <div className="category-card__shade" />
+                <span className="category-card__number">0{index + 1}</span>
+                <div className="category-card__content">
+                  <small>{category.en}</small>
+                  <h3>{category.title}</h3>
+                  <p>{category.count}</p>
+                </div>
+                <i>
+                  <ArrowUpLeft />
+                </i>
+              </a>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <section className="products section-gray" id="products">
+        <div className="container">
+          <div className="section-heading-row">
+            <SectionTitle eyebrow="SPECIAL MACHINERY" title="ماشین‌آلات منتخب" />
+            <a className="text-link" href="#">
+              مشاهده همه محصولات
+              <ArrowLeft size={18} />
+            </a>
+          </div>
+          <div className="product-grid">
+            {products.map((product) => (
+              <article className="product-card" key={product.id}>
+                <a className="product-card__image" href="#">
+                  <img src={product.image} alt={product.title} />
+                  <span>فروش ویژه</span>
+                  <i>
+                    <ArrowUpLeft />
+                  </i>
+                </a>
+                <div className="product-card__body">
+                  <small>{product.category}</small>
+                  <h3>{product.title}</h3>
+                  <p dir="ltr">{product.en}</p>
+                  <div>
+                    <code>{product.code}</code>
+                    <a href="tel:+982188530256">
+                      استعلام قیمت
+                      <Phone size={15} />
+                    </a>
+                  </div>
+                </div>
+              </article>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <section className="about" id="about">
+        <div className="container about__grid">
+          <div className="about__visual">
+            <img src={`${assetBase}/trEfzlNgmz.jpg`} alt="تجهیزات صنعتی سامان اندیش" />
+            <div className="about__small-image">
+              <img src={`${assetBase}/rhipZeVqzD.jpg`} alt="ماشین‌آلات صنعت کابل" />
+            </div>
+            <div className="experience-badge">
+              <strong>۲۵</strong>
+              <span>سال تجربه تخصصی</span>
+            </div>
+          </div>
+          <div className="about__content">
+            <SectionTitle eyebrow="ABOUT SAMAN ANDISH" title="فراتر از تأمین‌کننده ماشین‌آلات" />
+            <p className="about__lead">
+              سامان اندیش، همراه فنی و تجاری تولیدکنندگان سیم و کابل در انتخاب
+              هوشمندانه تجهیزات و توسعه خطوط تولید است.
+            </p>
+            <p>
+              با تکیه بر تجربه اجرایی، شبکه بین‌المللی و شناخت دقیق فرآیندهای
+              تولید، راهکاری متناسب با ظرفیت، بودجه و اهداف هر کارخانه ارائه
+              می‌کنیم.
+            </p>
+            <div className="about__features">
+              <div>
+                <ShieldCheck />
+                <span>
+                  <strong>تضمین اصالت</strong>
+                  ارزیابی فنی پیش از خرید
+                </span>
+              </div>
+              <div>
+                <Settings />
+                <span>
+                  <strong>پشتیبانی اجرایی</strong>
+                  نصب، راه‌اندازی و آموزش
+                </span>
+              </div>
+            </div>
+            <a className="button button--navy" href="/about-us">
+              بیشتر درباره ما
+              <ArrowLeft size={18} />
+            </a>
+          </div>
+        </div>
+      </section>
+
+      <section className="values">
+        <div className="container values__grid">
+          {[
+            [Globe2, "رقابت در بازار جهانی", "GLOBAL COMPETITION"],
+            [Gauge, "کیفیت استاندارد", "STANDARD QUALITY"],
+            [BriefcaseBusiness, "مهندسی نوآورانه", "SMART ENGINEERING"],
+            [FlaskConical, "تکنولوژی پیشرفته", "ADVANCED TECHNOLOGY"],
+          ].map(([Icon, title, en], index) => {
+            const ValueIcon = Icon as typeof Globe2;
+            return (
+              <div className="value-card" key={title as string}>
+                <span>0{index + 1}</span>
+                <ValueIcon />
+                <h3>{title as string}</h3>
+                <p>{en as string}</p>
+              </div>
+            );
+          })}
+        </div>
+      </section>
+
+      <section className="news" id="news">
+        <div className="container">
+          <div className="section-heading-row">
+            <SectionTitle eyebrow="INSIGHTS & NEWS" title="دانش روز صنعت" />
+            <a className="text-link" href="#">
+              مشاهده همه اخبار
+              <ArrowLeft size={18} />
+            </a>
+          </div>
+          <div className="news-grid">
+            {news.map((item, index) => (
+              <article className={`news-card ${index === 0 ? "news-card--featured" : ""}`} key={item.title}>
+                <a className="news-card__image" href="#">
+                  <img src={item.image} alt={item.title} />
+                </a>
+                <div className="news-card__body">
+                  <div>
+                    <span>{item.tag}</span>
+                    <time>{item.date}</time>
+                  </div>
+                  <h3>{item.title}</h3>
+                  <p>
+                    تازه‌ترین تحولات، فناوری‌ها و رویدادهای تخصصی صنعت سیم و
+                    کابل را با تحلیل کارشناسان سامان اندیش دنبال کنید.
+                  </p>
+                  <a href="#">
+                    ادامه مطلب
+                    <ArrowLeft size={17} />
+                  </a>
+                </div>
+              </article>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <section className="customers">
+        <div className="container">
+          <SectionTitle eyebrow="TRUSTED BY INDUSTRY" title="مشتریان ما" />
+          <div className="logo-marquee">
+            <div>
+              {[...customerLogos, ...customerLogos].map((logo, index) => (
+                <span key={`${logo}-${index}`}>
+                  <img src={`${assetBase}/${logo}`} alt="نشان مشتری سامان اندیش" />
+                </span>
+              ))}
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section className="cta-strip">
+        <div className="container cta-strip__inner">
+          <div>
+            <SlidersHorizontal />
+            <span>
+              <small>برای ارتقای خط تولید آماده‌اید؟</small>
+              <strong>ماشین مناسب را با کمک متخصصان ما پیدا کنید.</strong>
+            </span>
+          </div>
+          <a className="button button--white" href="/contact-us">
+            شروع گفتگو
+            <ArrowLeft size={18} />
+          </a>
+        </div>
+      </section>
+
+      <footer className="footer" id="contact">
+        <div className="footer__pattern" />
+        <div className="container footer__grid">
+          <div className="footer__brand">
+            <img src={`${assetBase}/4eEq8S7FxV.png`} alt="سامان اندیش" />
+            <p>
+              تأمین‌کننده تخصصی ماشین‌آلات و راهکارهای فنی صنعت سیم و کابل، با
+              تمرکز بر کیفیت، بهره‌وری و همکاری بلندمدت.
+            </p>
+            <div>
+              <a href="#" aria-label="اینستاگرام">
+                <Camera />
+              </a>
+              <a href="#" aria-label="لینکدین">
+                <Link />
+              </a>
+              <a href="#" aria-label="تلگرام">
+                <MessageCircle />
+              </a>
+            </div>
+          </div>
+          <div className="footer__links">
+            <h3>دسترسی سریع</h3>
+            <a href="#">صفحه اصلی</a>
+            <a href="#products">ماشین‌آلات</a>
+            <a href="#news">اخبار و مقالات</a>
+            <a href="/about-us">درباره ما</a>
+            <a href="/contact-us">تماس با ما</a>
+          </div>
+          <div className="footer__links">
+            <h3>خدمات ما</h3>
+            <a href="#">تأمین ماشین‌آلات</a>
+            <a href="#">خدمات فنی و مهندسی</a>
+            <a href="#">مواد اولیه</a>
+            <a href="/contact-us">مشاوره خرید</a>
+          </div>
+          <div className="footer__contact">
+            <h3>با ما در ارتباط باشید</h3>
+            <a href="tel:+982188530256">
+              <span>
+                <Phone />
+              </span>
+              <div>
+                <small>شماره تماس</small>
+                <strong dir="ltr">021 8853 0256</strong>
+              </div>
+            </a>
+            <a href="mailto:info@samanandish.com">
+              <span>
+                <Mail />
+              </span>
+              <div>
+                <small>ایمیل</small>
+                <strong>info@samanandish.com</strong>
+              </div>
+            </a>
+            <div className="address">
+              <span>
+                <MapPin />
+              </span>
+              <p>تهران، خیابان مطهری، خیابان ترکمنستان</p>
+            </div>
+          </div>
+        </div>
+        <div className="container footer__bottom">
+          <p>© ۱۴۰۵ سامان اندیش — تمامی حقوق محفوظ است.</p>
+          <span dir="ltr">ENGINEERED FOR INDUSTRY</span>
+        </div>
+      </footer>
+    </main>
+  );
+}