Polish storefront listing: filters, category directory, and list extras.

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

src/components/home/AboutSection.tsx

@@ -1,5 +1,6 @@
 import Image from "next/image";
 import { ABOUT } from "@/data/home";
+import BilingualTitle from "@/components/ui/BilingualTitle";
 
 type AboutSectionProps = {
   titleFa?: string;
@@ -54,17 +55,13 @@ export default function AboutSection({
         </div>
 
         <div className="relative text-right">
-          <p
-            dir="ltr"
-            aria-hidden
-            className="pointer-events-none absolute -top-4 start-0 font-doran text-[clamp(2rem,5vw,3.5rem)] font-normal tracking-[0.08em] text-ink/10"
-          >
-            {titleEn}
-          </p>
-          <h2 className="font-doran relative text-[clamp(1.75rem,3vw,2.5rem)] font-light text-ink">
-            {titleFa}
-          </h2>
-          <p className="font-doran mt-4 text-base font-medium text-ink sm:text-lg">
+          <BilingualTitle
+            titleFa={titleFa}
+            titleEn={titleEn}
+            size="xl"
+            align="end"
+          />
+          <p className="mt-4 text-base font-medium text-ink sm:text-lg">
             {lead}
           </p>
           <p className="mt-4 text-sm font-light leading-8 text-ink/75 sm:text-[15px] sm:leading-8">

src/components/home/BlackCollection.tsx

@@ -4,6 +4,7 @@ import Image from "next/image";
 import Link from "next/link";
 import { useEffect, useRef, useState } from "react";
 import { BLACK_ITEMS } from "@/data/home";
+import BilingualTitle from "@/components/ui/BilingualTitle";
 
 export type BlackItemData = {
   id: string;
@@ -60,23 +61,19 @@ export default function BlackCollection({ items }: BlackCollectionProps) {
       className="relative mx-auto w-full max-w-[1710px] px-4 py-10 sm:px-6 lg:px-[120px] lg:py-14"
     >
       <div
-        className="seq-fade-item relative mb-8 flex items-center justify-center text-center lg:mb-10"
+        className="seq-fade-item relative mb-8 lg:mb-10"
         style={{
           transitionDelay: visible ? "0ms" : "0ms",
           opacity: visible ? 1 : 0,
           transform: visible ? "translate3d(0,0,0)" : "translate3d(0,20px,0)",
         }}
       >
-        <p
-          dir="ltr"
-          aria-hidden
-          className="pointer-events-none absolute inset-0 flex items-center justify-center font-doran text-[clamp(2.5rem,8vw,6.25rem)] font-normal leading-none tracking-[0.1em] text-ink/10"
-        >
-          i Like it Black
-        </p>
-        <h2 className="font-doran relative translate-y-[0.12em] text-[clamp(1.75rem,4vw,3.125rem)] font-light leading-none text-ink">
-          من عاشق رنگ <span className="font-medium">مشکی</span> هستم
-        </h2>
+        <BilingualTitle
+          titleFa="من عاشق رنگ مشکی هستم"
+          titleEn="I Like It Black"
+          size="xl"
+          align="center"
+        />
       </div>
 
       <ul className="grid grid-cols-2 gap-[14px] lg:grid-cols-4 lg:gap-[22px]">

src/components/home/CategoryStrip.tsx

@@ -35,7 +35,7 @@ export default function CategoryStrip({ categories }: CategoryStripProps) {
   }, []);
 
   return (
-    <section className="mx-auto w-full max-w-[1600px] px-4 py-20 sm:px-6 sm:py-24 lg:px-10 lg:py-32">
+    <section className="mx-auto w-full max-w-[1600px] px-4 pt-12 pb-6 sm:px-6 sm:pt-16 sm:pb-8 lg:px-10 lg:pt-20 lg:pb-10">
       <ul
         ref={ref}
         className="flex flex-wrap items-stretch justify-center gap-x-4 gap-y-8 sm:gap-x-6 lg:gap-x-8"

src/components/home/SiteHeader.tsx

@@ -4,6 +4,7 @@ import { useEffect, useRef, useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
 import { NAV_LINKS } from "@/data/home";
+import { CONTACT_PAGE } from "@/data/pages";
 import HeaderSearch from "./HeaderSearch";
 import HeaderUserLink from "./HeaderUserLink";
 import ProductsMegaMenu, { type MegaTabData } from "./ProductsMegaMenu";
@@ -54,7 +55,7 @@ export default function SiteHeader({ megaTabs }: SiteHeaderProps) {
       className={`pointer-events-none z-50 transition-[padding,background-color] duration-300 ease-out ${
         scrolled
           ? "fixed inset-x-0 top-0 bg-white px-0 pt-0 shadow-[0_1px_0_rgba(0,0,0,0.06)]"
-          : "absolute inset-x-0 top-0 px-0 pt-6 sm:pt-8 lg:pt-14"
+          : "absolute inset-x-0 top-0 px-0 pt-3 sm:pt-4 lg:pt-5"
       }`}
     >
       <div
@@ -62,6 +63,53 @@ export default function SiteHeader({ megaTabs }: SiteHeaderProps) {
           scrolled ? "px-0" : "px-4 sm:px-6 lg:px-[120px]"
         }`}
       >
+        {!scrolled ? (
+          <div
+            dir="rtl"
+            className="pointer-events-auto mx-auto mb-1.5 flex max-w-[1709px] items-center justify-between gap-4 font-montserrat text-sm font-light text-ink sm:mb-2 sm:text-base"
+          >
+            <a
+              href={`tel:${CONTACT_PAGE.phoneStore.replace(/-/g, "")}`}
+              dir="ltr"
+              className="inline-flex items-center gap-1.5 transition-opacity hover:opacity-70"
+            >
+              <svg
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                aria-hidden
+                className="opacity-70"
+              >
+                <path
+                  d="M8.5 4.5h3.2l1 3.2-1.8 1.1a11 11 0 0 0 4.3 4.3l1.1-1.8 3.2 1v3.2a2 2 0 0 1-2.1 2A14.5 14.5 0 0 1 4.5 6.6 2 2 0 0 1 6.5 4.5Z"
+                  stroke="currentColor"
+                  strokeWidth="1.4"
+                  strokeLinejoin="round"
+                />
+              </svg>
+              <span>{CONTACT_PAGE.phoneStore}</span>
+            </a>
+            <a
+              href={CONTACT_PAGE.instagramUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              dir="ltr"
+              className="inline-flex items-center gap-1.5 transition-opacity hover:opacity-70"
+            >
+              <Image
+                src="/images/home/social/instagram.svg"
+                alt=""
+                width={16}
+                height={16}
+                unoptimized
+                className="opacity-70"
+              />
+              <span>{CONTACT_PAGE.instagram}</span>
+            </a>
+          </div>
+        ) : null}
+
         <div
           className={`pointer-events-auto mx-auto flex items-center justify-between gap-3 transition-[height,border-radius,background-color,backdrop-filter,border-color,max-width,padding] duration-300 ease-out ${
             scrolled