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.
69 lines
2.0 KiB
69 lines
2.0 KiB
// it has style inside index.scss ---> // Start ContactInfoSection && end ContactInfoSection |
|
|
|
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 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", |
|
};
|
|
|