Add about/contact pages, real social icons, and gallery scroll fix

- Add /about (business-info driven, falls back to existing copy) and /contact (business-info contact details + a working form posting to the contact-submissions API) - Point header/footer "About"/"Contact" links at the new pages instead of homepage anchors - Replace the hand-drawn social icons with the real brand SVGs from public/icons (Instagram, Telegram, WhatsApp, Bale, Eitaa), inlined with currentColor so hover states work; shared via a single socialLinks list used by both header and footer - Remove the horizontal scrollbar under the product gallery thumbnails by wrapping them instead of scrolling
2026-08-24 15:06:35 +03:30
parent f10af62573
commit aba78b76a1
16 changed files with 479 additions and 82 deletions
@@ -0,0 +1,111 @@
+"use client";
+
+import { useState, type FormEvent } from "react";
+import { submitContactForm } from "@/lib/api";
+import { CheckIcon } from "./icons";
+
+type Status = "idle" | "loading" | "success" | "error";
+
+const inputClass =
+  "w-full rounded-lg border border-line bg-surface px-4 h-11 text-sm outline-none focus:border-brand transition-colors";
+
+export default function ContactForm() {
+  const [status, setStatus] = useState<Status>("idle");
+
+  async function handleSubmit(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    const form = e.currentTarget;
+    const data = new FormData(form);
+
+    const name = String(data.get("name") || "").trim();
+    const title = String(data.get("title") || "").trim();
+    const text = String(data.get("text") || "").trim();
+    const email = String(data.get("email") || "").trim();
+    const cellNumber = String(data.get("cellNumber") || "").trim();
+
+    if (!name || !title || !text) return;
+
+    setStatus("loading");
+    try {
+      await submitContactForm({
+        name,
+        title,
+        text,
+        email: email || undefined,
+        cellNumber: cellNumber || undefined,
+      });
+      setStatus("success");
+      form.reset();
+    } catch {
+      setStatus("error");
+    }
+  }
+
+  if (status === "success") {
+    return (
+      <div className="rounded-xl border border-brand/30 bg-brand-light p-6 text-center">
+        <span className="mx-auto flex items-center justify-center size-11 rounded-full bg-brand text-white mb-3">
+          <CheckIcon className="size-5" />
+        </span>
+        <p className="text-sm font-bold text-brand">پیام شما با موفقیت ارسال شد.</p>
+        <p className="mt-1 text-xs text-body">به‌زودی با شما تماس می‌گیریم.</p>
+      </div>
+    );
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+        <div>
+          <label htmlFor="name" className="block text-xs font-bold text-ink mb-1.5">
+            نام و نام خانوادگی *
+          </label>
+          <input id="name" name="name" required className={inputClass} />
+        </div>
+        <div>
+          <label htmlFor="title" className="block text-xs font-bold text-ink mb-1.5">
+            موضوع *
+          </label>
+          <input id="title" name="title" required className={inputClass} />
+        </div>
+        <div>
+          <label htmlFor="email" className="block text-xs font-bold text-ink mb-1.5">
+            ایمیل
+          </label>
+          <input id="email" name="email" type="email" dir="ltr" className={inputClass} />
+        </div>
+        <div>
+          <label htmlFor="cellNumber" className="block text-xs font-bold text-ink mb-1.5">
+            شماره تماس
+          </label>
+          <input id="cellNumber" name="cellNumber" type="tel" dir="ltr" className={inputClass} />
+        </div>
+      </div>
+
+      <div>
+        <label htmlFor="text" className="block text-xs font-bold text-ink mb-1.5">
+          متن پیام *
+        </label>
+        <textarea
+          id="text"
+          name="text"
+          required
+          rows={5}
+          className={`${inputClass} h-auto py-3 resize-none`}
+        />
+      </div>
+
+      {status === "error" && (
+        <p className="text-xs text-red-600">ارسال پیام با خطا مواجه شد. لطفاً دوباره تلاش کنید.</p>
+      )}
+
+      <button
+        type="submit"
+        disabled={status === "loading"}
+        className="w-full sm:w-auto flex items-center justify-center rounded-md bg-brand px-8 h-12 text-sm font-bold text-white hover:bg-brand-dark transition-colors disabled:opacity-60"
+      >
+        {status === "loading" ? "در حال ارسال..." : "ارسال پیام"}
+      </button>
+    </form>
+  );
+}