footer and first desktop version completed

2026-07-19 16:09:33 +03:30
parent 2c9b43c84a
commit 2adaac8ec4
12 changed files with 275 additions and 7 deletions
@@ -0,0 +1,53 @@
+import { Call, Location, MessageQuestion, Sms } from "iconsax-reactjs";
+import { type FC, type ReactNode } from "react";
+
+type ContactItemProps = {
+  icon: ReactNode;
+  children: ReactNode;
+};
+
+const ContactItem: FC<ContactItemProps> = ({ icon, children }) => {
+  return (
+    <div className="flex items-start gap-3">
+      <div className="flex size-9 shrink-0 items-center justify-center rounded-lg border border-primary text-primary">{icon}</div>
+      <div className="text-sm leading-6 text-[#3A4147]">{children}</div>
+    </div>
+  );
+};
+
+const FooterContact: FC = () => {
+  return (
+    <div className="flex max-w-[280px] flex-col gap-5">
+      <ContactItem icon={<Location size={18} color="currentColor" variant="Linear" />}>
+        جاده خاوران، شریف آباد، شهرک صنعتی شنزار، بعد از میدان چهارم، خیابان بوستان پنجم، خیابان گلبهار، پلاک ۱۲۲
+      </ContactItem>
+
+      <ContactItem icon={<Call size={18} color="currentColor" variant="Linear" />}>
+        <div className="flex flex-col gap-0.5">
+          <span>۰۲۱-۳۶۹۱۱۵۹۹ | ۰۲۱-۳۶۹۱۰۷۹۹</span>
+          <span>۰۲۱۳۴۷۸۲۰۰۰ (۳۰ خط)</span>
+        </div>
+      </ContactItem>
+
+      <ContactItem icon={<Sms size={18} color="currentColor" variant="Linear" />}>
+        <div className="flex flex-col gap-0.5">
+          <span className="font-bold text-[#0A1B2C]">پاسخگوی سوالات شما</span>
+          <a href="mailto:info@example.com" className="hover:text-primary" dir="ltr">
+            info@example.com
+          </a>
+        </div>
+      </ContactItem>
+
+      <ContactItem icon={<MessageQuestion size={18} color="currentColor" variant="Linear" />}>
+        <div className="flex flex-col gap-0.5">
+          <span>نیاز به راهنمایی دارید؟</span>
+          <a href="#" className="font-bold text-[#0A1B2C] hover:text-primary">
+            از طریق سوالات متداول پاسخ خود را پیدا کنید.
+          </a>
+        </div>
+      </ContactItem>
+    </div>
+  );
+};
+
+export default FooterContact;