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

src/components/Header.tsx

@@ -4,26 +4,13 @@ import { useState } from "react";
 import Link from "next/link";
 import Logo from "./Logo";
 import SearchBox from "./SearchBox";
-import {
-  BagIcon,
-  ChevronDownIcon,
-  CloseIcon,
-  InstagramIcon,
-  MenuIcon,
-  TelegramIcon,
-  WhatsappIcon,
-} from "./icons";
+import { BagIcon, ChevronDownIcon, CloseIcon, MenuIcon } from "./icons";
+import { socialLinks } from "./socialLinks";
 import { headerNavLinks } from "@/data/site";
 import { CUSTOMER_PORTAL_URL } from "@/lib/config";
 import { categoryHref } from "@/lib/slug";
 import type { CategoryNode } from "@/lib/types";
 
-const socialLinks = [
-  { icon: InstagramIcon, label: "اینستاگرام" },
-  { icon: TelegramIcon, label: "تلگرام" },
-  { icon: WhatsappIcon, label: "واتساپ" },
-];
-
 export default function Header({ categoryColumns }: { categoryColumns: CategoryNode[] }) {
   const [productsOpen, setProductsOpen] = useState(false);
   const [mobileOpen, setMobileOpen] = useState(false);
@@ -115,24 +102,34 @@ export default function Header({ categoryColumns }: { categoryColumns: CategoryN
                 )}
               </div>
 
-              {headerNavLinks.map((link) => (
-                <a
-                  key={link.title}
-                  href={link.href}
-                  className="flex h-full items-center px-4 text-sm font-medium text-white/90 hover:text-gold transition-colors"
-                >
-                  {link.title}
-                </a>
-              ))}
+              {headerNavLinks.map((link) =>
+                link.href.startsWith("#") ? (
+                  <a
+                    key={link.title}
+                    href={link.href}
+                    className="flex h-full items-center px-4 text-sm font-medium text-white/90 hover:text-gold transition-colors"
+                  >
+                    {link.title}
+                  </a>
+                ) : (
+                  <Link
+                    key={link.title}
+                    href={link.href}
+                    className="flex h-full items-center px-4 text-sm font-medium text-white/90 hover:text-gold transition-colors"
+                  >
+                    {link.title}
+                  </Link>
+                )
+              )}
             </nav>
 
             <div className="flex items-center gap-2">
-              {socialLinks.map(({ icon: Icon, label }) => (
+              {socialLinks.map(({ icon: Icon, label, href }) => (
                 <a
                   key={label}
-                  href="#"
+                  href={href}
                   aria-label={label}
-                  className="flex items-center justify-center size-8 rounded-md bg-white/10 text-white hover:bg-white/20 transition-colors"
+                  className="flex items-center justify-center size-8 rounded-md bg-white/10 text-white transition-all duration-200 hover:bg-gold hover:text-ink hover:scale-110"
                 >
                   <Icon className="size-4" />
                 </a>
@@ -207,15 +204,26 @@ export default function Header({ categoryColumns }: { categoryColumns: CategoryN
                 </div>
               )}
 
-              {headerNavLinks.map((link) => (
-                <a
-                  key={link.title}
-                  href={link.href}
-                  className="block py-3 text-sm font-bold text-ink border-b border-line"
-                >
-                  {link.title}
-                </a>
-              ))}
+              {headerNavLinks.map((link) =>
+                link.href.startsWith("#") ? (
+                  <a
+                    key={link.title}
+                    href={link.href}
+                    className="block py-3 text-sm font-bold text-ink border-b border-line"
+                  >
+                    {link.title}
+                  </a>
+                ) : (
+                  <Link
+                    key={link.title}
+                    href={link.href}
+                    onClick={() => setMobileOpen(false)}
+                    className="block py-3 text-sm font-bold text-ink border-b border-line"
+                  >
+                    {link.title}
+                  </Link>
+                )
+              )}
 
               <a
                 href={CUSTOMER_PORTAL_URL}
@@ -225,12 +233,12 @@ export default function Header({ categoryColumns }: { categoryColumns: CategoryN
               </a>
 
               <div className="mt-5 flex items-center justify-center gap-2">
-                {socialLinks.map(({ icon: Icon, label }) => (
+                {socialLinks.map(({ icon: Icon, label, href }) => (
                   <a
                     key={label}
-                    href="#"
+                    href={href}
                     aria-label={label}
-                    className="flex items-center justify-center size-9 rounded-md border border-line text-ink"
+                    className="flex items-center justify-center size-9 rounded-md border border-line text-ink transition-all duration-200 hover:border-brand hover:bg-brand hover:text-white hover:scale-110"
                   >
                     <Icon className="size-4" />
                   </a>