create

2026-08-19 17:54:11 +03:30
parent b065fac757
commit 149b77f734
80 changed files with 3015 additions and 92 deletions
@@ -0,0 +1,109 @@
+import Link from "next/link";
+import Logo from "./Logo";
+import { headerNavLinks, siteInfo } from "@/data/site";
+import type { CategoryNode } from "@/lib/types";
+import {
+  InstagramIcon,
+  MailIcon,
+  PhoneIcon,
+  PinIcon,
+  TelegramIcon,
+  WhatsappIcon,
+} from "./icons";
+
+export default function Footer({ categoryColumns }: { categoryColumns: CategoryNode[] }) {
+  const categoryItems = categoryColumns.flatMap((col) => col.children).slice(0, 6);
+
+  return (
+    <footer id="contact" className="bg-brand text-white/70 mt-auto">
+      <div className="boxed py-12 md:py-16 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-10">
+        <div>
+          <Logo dark />
+          <p className="mt-4 text-sm leading-7 text-white/55">
+            مرجع تخصصی پوشاک بچگانه؛ لباس‌های شاد و باکیفیت برای نوزادان،
+            دختران و پسران با ارسال به سراسر کشور.
+          </p>
+          <div className="mt-5 flex items-center gap-3">
+            <a
+              href="#"
+              aria-label="اینستاگرام"
+              className="flex items-center justify-center size-9 rounded-full border border-white/15 hover:border-gold hover:text-gold transition-colors"
+            >
+              <InstagramIcon className="size-4" />
+            </a>
+            <a
+              href="#"
+              aria-label="تلگرام"
+              className="flex items-center justify-center size-9 rounded-full border border-white/15 hover:border-gold hover:text-gold transition-colors"
+            >
+              <TelegramIcon className="size-4" />
+            </a>
+            <a
+              href="#"
+              aria-label="واتساپ"
+              className="flex items-center justify-center size-9 rounded-full border border-white/15 hover:border-gold hover:text-gold transition-colors"
+            >
+              <WhatsappIcon className="size-4" />
+            </a>
+          </div>
+        </div>
+
+        <div>
+          <h3 className="text-white font-bold text-sm mb-4">دسترسی سریع</h3>
+          <ul className="space-y-2.5 text-sm">
+            {headerNavLinks.map((link) => (
+              <li key={link.title}>
+                <a href={link.href} className="hover:text-gold transition-colors">
+                  {link.title}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        <div>
+          <h3 className="text-white font-bold text-sm mb-4">دسته‌بندی‌ها</h3>
+          <ul className="space-y-2.5 text-sm">
+            {categoryItems.map((cat) => (
+              <li key={cat.id}>
+                <Link href={`/products?category=${cat.slug}`} className="hover:text-gold transition-colors">
+                  {cat.nameFa}
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        <div>
+          <h3 className="text-white font-bold text-sm mb-4">ارتباط با ما</h3>
+          <ul className="space-y-3.5 text-sm">
+            <li className="flex items-start gap-2.5">
+              <PhoneIcon className="size-4 mt-0.5 text-gold shrink-0" />
+              <span dir="ltr">{siteInfo.phone}</span>
+            </li>
+            <li className="flex items-start gap-2.5">
+              <PinIcon className="size-4 mt-0.5 text-gold shrink-0" />
+              <span>{siteInfo.address}</span>
+            </li>
+          </ul>
+        </div>
+      </div>
+
+      <div className="border-t border-white/10">
+        <div className="boxed py-5 flex flex-col sm:flex-row items-center justify-between gap-3 text-xs text-white/45">
+          <span>
+            © {new Date().getFullYear()} تمامی حقوق برای فروشگاه {siteInfo.name} محفوظ است.
+          </span>
+          <span className="font-en tracking-wider">KIDONE STORE</span>
+        </div>
+      </div>
+
+      <div className="bg-brand-dark">
+        <div dir="ltr" className="boxed py-3 flex items-center justify-center gap-2 text-white/55 text-xs">
+          <MailIcon className="size-4 shrink-0" />
+          <span>طراحی و توسعه توسط تیم تجارت الکترونیک مشکی</span>
+        </div>
+      </div>
+    </footer>
+  );
+}