arad-arisman/src/components/ContactInfo.tsx

const cards = [
  {
    title: "آدرس ما",
    lines: ["قم، شهرک صنعتی شکوهیه، فاز دو،", "خیابان شهید بروجردی، نبش کلاهدوز یک، پلاک ۸۶۶"],
    icon: (
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
        <path
          d="M12 22s7-6.3 7-12a7 7 0 1 0-14 0c0 5.7 7 12 7 12Zm0-9a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z"
          fill="currentColor"
        />
      </svg>
    ),
  },
  {
    title: "تلفن تماس",
    lines: ["09104067935", "۰۲۵۳۳۳۴۲۶۳۳ ، ۰۲۵۳۳۳۴۲۹۶۷ ، ۰۲۵۳۳۳۴۲۹۸۳"],
    icon: (
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
        <path
          d="M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1L6.6 10.8z"
          fill="currentColor"
        />
      </svg>
    ),
  },
  {
    title: "ساعات کاری",
    lines: ["شنبه تا چهارشنبه: ۸ الی ۱۷", "پنجشنبه: ۸ الی ۱۳"],
    icon: (
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
        <path
          d="M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20Zm1-10.4 4 2.3-1 1.7-5-2.9V6h2v5.6Z"
          fill="currentColor"
        />
      </svg>
    ),
  },
];

export default function ContactInfo() {
  return (
    <div className="grid grid-cols-1 sm:grid-cols-3 gap-5">
      {cards.map((c) => (
        <div
          key={c.title}
          className="rounded-2xl border border-black/5 bg-white p-7 shadow-sm"
        >
          <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary/5 text-primary">
            {c.icon}
          </div>
          <h3 className="mt-4 font-bold text-secondary">{c.title}</h3>
          <div className="mt-2 space-y-1 text-sm leading-7 text-foreground" dir={c.title === "تلفن تماس" ? "ltr" : undefined}>
            {c.lines.map((line) => (
              <p key={line} className={c.title === "تلفن تماس" ? "text-right" : undefined}>
                {line}
              </p>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}