update logo-rectangle.svg and src/components/ContactUsInfoCard/index.js

src/components/ContactUsInfoCard/index.js

@@ -1,7 +1,51 @@
 import React from "react";
 
-const ContactUsInfoCard = () => {
-  return <div>ContactUsInfoCard</div>;
+import logoRectangle from "./images/logo-rectangle.svg";
+import map from "./images/map.svg";
+import marker from "./images/marker.svg";
+import phone from "./images/phone.svg";
+
+const ContactUsInfoCard = ({ items }) => {
+  return (
+    <div className="max-w-[650px] flex flex-col rounded border bg-white border-gray-200 p-4 mx-auto mt-10">
+      {/* logo && map */}
+      <div className="flex flex-row items-center justify-between ">
+        <img src={map} alt="map" />
+        <img src={logoRectangle} alt="map" />
+      </div>
+      {/* contact info */}
+      {items.map((item, index) => (
+        <div className="flex flex-row items-center mt-4">
+          <img className="w-5" src={item.icon} alt={item.icon} />
+          <p className=" text-[#2383E1] mr-2 ml-1 text-xs">{item.title}</p>
+          <address className="text-[#0F0543] text-xs not-italic text-justify leading-6">
+            {item.content}
+          </address>
+        </div>
+      ))}
+    </div>
+  );
 };
 
 export default ContactUsInfoCard;
+
+ContactUsInfoCard.defaultProps = {
+  items: [
+    {
+      icon: marker,
+      title: "نشانی:",
+      content: "شارع دوم شارع حسینی عمود موکب ۲۲",
+    },
+    {
+      icon: phone,
+      title: "شماره تلفنی ضروری موکب:",
+      content: "۰۸۶۲۵۴۶۴۸۲۳",
+    },
+    {
+      icon: null,
+      title: "تذکرات و نکات مهم:",
+      content:
+        "در این قسمت نکات مهم و ضروری برای موکب مورد نظر نوشته می شود و همچنین در مورد موارد مهم دیگر نیز در این قسمت  صحبت خواهد شد",
+    },
+  ],
+};