Polish portfolio, blog, and site chrome for clearer browsing.

Add patterned title bands, lightbox gallery, project link bar, footer stats/credit, gradient link hovers, and more reliable blog covers/body rendering.

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

src/components/Footer.tsx

@@ -1,11 +1,50 @@
 import Link from "next/link";
+import { images } from "@/data/assets";
 import { nav, site } from "@/data/home";
+import {
+  portfolioCategoryHref,
+  topPortfolioCategories,
+} from "@/data/portfolioCategories";
+
+const stats = [
+  { value: "112+", label: "بیش از ۱۱۲ وبسایت", labelEn: "WEBSITES" },
+  { value: "28+", label: "بیش از ۲۸ لوگو", labelEn: "LOGOS" },
+  { value: "7+", label: "بیش از ۷ اپلیکیشن", labelEn: "APPS" },
+];
 
 export function Footer() {
   return (
-    <footer className="border-t border-line/70 bg-surface">
-      <div className="mx-auto flex max-w-7xl flex-col gap-10 px-5 py-12 lg:flex-row lg:items-start lg:justify-between lg:px-8">
-        <div>
+    <footer className="border-t border-line/70 bg-[linear-gradient(180deg,#fafafa_0%,#f3f5f7_100%)]">
+      <div className="border-b border-line/60">
+        <div className="mx-auto grid max-w-7xl grid-cols-1 divide-y divide-line/60 sm:grid-cols-3 sm:divide-x sm:divide-y-0 sm:divide-line/60">
+          {stats.map((stat) => (
+            <div
+              key={stat.label}
+              className="flex items-center gap-4 px-5 py-7 lg:gap-5 lg:px-8 lg:py-9"
+            >
+              <p
+                className="latin shrink-0 text-[clamp(2rem,4vw,2.75rem)] font-light leading-none tracking-tight text-ink"
+                dir="ltr"
+              >
+                {stat.value}
+              </p>
+              <span
+                aria-hidden
+                className="h-10 w-px shrink-0 bg-line/80 sm:h-12"
+              />
+              <div className="min-w-0">
+                <p className="text-sm leading-6 text-ink-soft">{stat.label}</p>
+                <p className="latin mt-1 text-[10px] tracking-[0.22em] text-muted uppercase">
+                  {stat.labelEn}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="mx-auto grid max-w-7xl gap-10 px-5 py-12 sm:grid-cols-2 lg:grid-cols-4 lg:gap-8 lg:px-8 lg:py-14">
+        <div className="sm:col-span-2 lg:col-span-1">
           <p className="mb-2 text-2xl font-black text-ink">{site.nameFa}</p>
           <p className="latin text-xs uppercase tracking-[0.18em] text-muted">
             {site.taglineEn}
@@ -15,30 +54,95 @@ export function Footer() {
           </p>
         </div>
 
-        <div className="flex flex-col gap-3 text-sm text-ink-soft">
-          {nav.map((item) => (
-            <Link
-              key={item.href}
-              href={item.href}
-              className="transition link-hover"
-            >
-              {item.label}
-            </Link>
-          ))}
+        <div>
+          <p className="mb-4 text-xs text-muted">خدمات</p>
+          <div className="flex flex-col gap-2.5 text-sm text-ink-soft">
+            {nav
+              .filter((item) => item.href !== "/portfolio")
+              .map((item) => (
+                <Link
+                  key={item.href}
+                  href={item.href}
+                  className="link-hover transition"
+                >
+                  {item.label}
+                </Link>
+              ))}
+          </div>
         </div>
 
-        <div className="text-sm text-muted" dir="ltr">
-          <a href={site.phoneHref} className="block transition hover:text-ink">
+        <div>
+          <p className="mb-4 text-xs text-muted">نمونه‌کارها</p>
+          <div className="flex flex-col gap-2.5 text-sm text-ink-soft">
+            <Link href="/portfolio" className="link-hover transition">
+              همه نمونه‌کارها
+            </Link>
+            {topPortfolioCategories.map((category) => (
+              <Link
+                key={category.id}
+                href={portfolioCategoryHref(category.slug)}
+                className="link-hover transition"
+              >
+                {category.nameFa}
+              </Link>
+            ))}
+          </div>
+        </div>
+
+        <div>
+          <p className="mb-4 text-xs text-muted">تماس</p>
+          <a
+            href={site.phoneHref}
+            className="latin block text-sm text-ink-soft transition hover:text-ink"
+            dir="ltr"
+          >
             {site.phone}
           </a>
-          <p className="mt-2 max-w-xs text-right" dir="rtl">
+          <p className="mt-3 max-w-[16rem] text-sm leading-7 text-muted">
             {site.address}
           </p>
+          <Link
+            href="#contact"
+            className="mt-5 inline-flex rounded-full border border-line px-4 py-2 text-xs text-ink-soft transition hover:border-ink/30 hover:text-ink"
+          >
+            تماس با ما
+          </Link>
         </div>
       </div>
 
-      <div className="border-t border-line/70 py-5 text-center text-xs text-muted">
-        © 2026 Meshkee — مشکی
+      <div className="footer-bottom-bar">
+        <div className="mx-auto flex max-w-7xl flex-col items-center justify-between gap-3 px-5 py-4 sm:flex-row lg:px-8">
+          <div className="text-xs text-[#999]">
+            © {new Date().getFullYear()} Meshkee — مشکی
+          </div>
+          <a
+            href="https://meshkee.com"
+            target="_blank"
+            rel="noopener noreferrer"
+            dir="ltr"
+            className="meshkee-credit group inline-flex items-center gap-2.5 px-2.5 py-1.5 text-[#999] transition-colors duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] hover:text-[#555]"
+          >
+            <span className="meshkee-credit__frame" aria-hidden>
+              <span className="meshkee-credit__line meshkee-credit__line--l" />
+              <span className="meshkee-credit__line meshkee-credit__line--t" />
+              <span className="meshkee-credit__line meshkee-credit__line--r" />
+              <span className="meshkee-credit__line meshkee-credit__line--b" />
+            </span>
+            <img
+              src={images.meshkeeCreditLogo}
+              alt="Meshkee"
+              width={36}
+              height={32}
+              className="relative h-8 w-auto shrink-0 object-contain opacity-50 transition-opacity duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] group-hover:opacity-100"
+            />
+            <span className="relative flex flex-col leading-snug">
+              <span className="text-[11px]">Designed And Developed By</span>
+              <span className="text-[13px] font-semibold text-[#666] transition-colors duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] group-hover:text-[#333]">
+                Meshkee E-Commerce Team
+              </span>
+            </span>
+          </a>
+        </div>
       </div>
     </footer>
   );