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.

68 lines
1.9 KiB

3 years ago
import React from "react";
3 years ago
import "./ContactInfoSection.scss";
3 years ago
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";
3 years ago
const ContactInfoSection = ({
contactInfoSectionBgColor,
dayNumTextColor,
contentTextColor,
}) => {
3 years ago
return (
3 years ago
<section
className={`relative flex flex-col sm:flex-row items-center justify-center p-4 ${contactInfoSectionBgColor}`}
>
3 years ago
{/* line */}
<img
src={lightBlueLine}
alt=""
className="hidden sm:block absolute right-72"
/>
{/* middle content */}
3 years ago
<img
src={customerSupport}
alt=""
3 years ago
className="w-14 cursor-pointer customer-support transition delay-150 duration-500 hover:animate-bounce"
3 years ago
/>
3 years ago
<p
className={`mr-0 sm:mr-10 mt-5 sm:mt-0 text-sm leading-6 ${contentTextColor}`}
>
<span className={`${dayNumTextColor}`}>7 </span>
3 years ago
روز هفته
3 years ago
<span className={`${dayNumTextColor}`}> 24 </span>
3 years ago
ساعته
<br />
منتظر شنیدن صدای گرمتان هستیم
</p>
3 years ago
<div className="flex flex-col mr-0 sm:mr-10 mt-5 sm:mt-0">
3 years ago
<a href="tel:021654412" className={`text-sm ${contentTextColor}`}>
3 years ago
021654412
</a>
<a
href="mailto:webmaster@example.com"
3 years ago
className={`text-sm ${contentTextColor}`}
3 years ago
>
info@danovin.ir
</a>
3 years ago
</div>
{/* line */}
<img
src={lightGreenLine}
alt=""
className="hidden sm:block absolute left-72"
/>
</section>
);
};
export default ContactInfoSection;
3 years ago
ContactInfoSection.defaultProps = {
contactInfoSectionBgColor: "bg-midGrayBgColor",
dayNumTextColor: "text-lightBlueTextColor2",
contentTextColor: "text-darkCrimsonTextColor",
};