You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
|
import React from "react";
|
|
|
|
|
|
|
|
import "./ContactInfoSection.scss";
|
|
|
|
|
|
|
|
import customerSupport from "../../assets/icons/customer-support.png";
|
|
|
|
import lightGreenLine from "../../assets/icons/light-green-line.svg";
|
|
|
|
import lightBlueLine from "../../assets/icons/light-blue-line.svg";
|
|
|
|
|
|
|
|
const ContactInfoSection = ({
|
|
|
|
contactInfoSectionBgColor,
|
|
|
|
dayNumTextColor,
|
|
|
|
contentTextColor,
|
|
|
|
}) => {
|
|
|
|
return (
|
|
|
|
<section
|
|
|
|
className={`relative flex flex-col sm:flex-row items-center justify-center p-4 ${contactInfoSectionBgColor}`}
|
|
|
|
>
|
|
|
|
{/* line */}
|
|
|
|
<img
|
|
|
|
src={lightBlueLine}
|
|
|
|
alt=""
|
|
|
|
className="hidden sm:block absolute right-72"
|
|
|
|
/>
|
|
|
|
{/* middle content */}
|
|
|
|
<img
|
|
|
|
src={customerSupport}
|
|
|
|
alt=""
|
|
|
|
className="w-14 cursor-pointer customer-support transition delay-150 duration-500 hover:animate-bounce"
|
|
|
|
/>
|
|
|
|
<p
|
|
|
|
className={`mr-0 sm:mr-10 mt-5 sm:mt-0 text-sm leading-6 ${contentTextColor}`}
|
|
|
|
>
|
|
|
|
<span className={`${dayNumTextColor}`}>7 </span>
|
|
|
|
روز هفته
|
|
|
|
<span className={`${dayNumTextColor}`}> 24 </span>
|
|
|
|
ساعته
|
|
|
|
<br />
|
|
|
|
منتظر شنیدن صدای گرمتان هستیم
|
|
|
|
</p>
|
|
|
|
<div className="flex flex-col mr-0 sm:mr-10 mt-5 sm:mt-0">
|
|
|
|
<a href="tel:021654412" className={`text-sm ${contentTextColor}`}>
|
|
|
|
021654412
|
|
|
|
</a>
|
|
|
|
<a
|
|
|
|
href="mailto:webmaster@example.com"
|
|
|
|
className={`text-sm ${contentTextColor}`}
|
|
|
|
>
|
|
|
|
info@danovin.ir
|
|
|
|
</a>
|
|
|
|
</div>
|
|
|
|
{/* line */}
|
|
|
|
<img
|
|
|
|
src={lightGreenLine}
|
|
|
|
alt=""
|
|
|
|
className="hidden sm:block absolute left-72"
|
|
|
|
/>
|
|
|
|
</section>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default ContactInfoSection;
|
|
|
|
|
|
|
|
ContactInfoSection.defaultProps = {
|
|
|
|
contactInfoSectionBgColor: "bg-midGrayBgColor",
|
|
|
|
dayNumTextColor: "text-lightBlueTextColor2",
|
|
|
|
contentTextColor: "text-darkCrimsonTextColor",
|
|
|
|
};
|