master
mahdi 3 years ago
parent f6abc1a511
commit b6f89dcb39
  1. 6
      src/components/Features/index.js
  2. 2
      src/components/buttonDesign/ButtonDesign.js
  3. 108
      src/components/footer/design1/FooterDesign1.js

@ -8,7 +8,7 @@ import colorPalette from "./color-palette.svg";
import hat from "./hat.svg"; import hat from "./hat.svg";
import plane from "./plane.svg"; import plane from "./plane.svg";
const Features = ({ functionalities }) => { const Features = ({ features }) => {
return ( return (
<section className="bg-white border-2 border-gray-400 rounded m-7"> <section className="bg-white border-2 border-gray-400 rounded m-7">
{/* top */} {/* top */}
@ -16,7 +16,7 @@ const Features = ({ functionalities }) => {
امکانات و ویژگی ها امکانات و ویژگی ها
</h2> </h2>
<div className="w-full flex flex-wrap justify-around items-center"> <div className="w-full flex flex-wrap justify-around items-center">
{functionalities.map((feature, index) => ( {features.map((feature, index) => (
<div className="flex flex-row w-2/5 p-5" key={index}> <div className="flex flex-row w-2/5 p-5" key={index}>
{/* 1 */} {/* 1 */}
<div <div
@ -73,7 +73,7 @@ const Features = ({ functionalities }) => {
export default Features; export default Features;
Features.defaultProps = { Features.defaultProps = {
functionalities: [ features: [
{ {
icon: crown, icon: crown,
iconBgColor: "#FFFDC4", iconBgColor: "#FFFDC4",

@ -55,7 +55,7 @@ const ButtonDesign = ({
<div className="flex flex-wrap justify-around items-center"> <div className="flex flex-wrap justify-around items-center">
<div> <div>
<button <button
className={`flex items-center text-sm md:text-base transiton duration-200 hover:${buttonBgHoverColor} ${buttonBgColor} ${buttonTextColor} ${buttonBorder} ${buttonBorderColor} ${buttonBorderRadius} ${buttonPaddingX} ${buttonPaddingY}`} className={`flex items-center text-sm md:text-base transiton duration-200 hover:bg-opacity-70 ${buttonBgColor} ${buttonTextColor} ${buttonBorder} ${buttonBorderColor} ${buttonBorderRadius} ${buttonPaddingX} ${buttonPaddingY}`}
> >
اطلاعات بیشتر اطلاعات بیشتر
{leftArrowWhite && ( {leftArrowWhite && (

@ -7,94 +7,16 @@ import samandehi from "../../../assets/images/samandehi-pic.svg";
import lightBlueLine from "../../../assets/icons/light-blue-line.svg"; import lightBlueLine from "../../../assets/icons/light-blue-line.svg";
const FooterDesign1 = ({ footerMenuItemsColor, footerBgColor }) => { const FooterDesign1 = ({ footerItems }) => {
return ( return (
<footer <footer className="p-6 flex flex-col md:flex-row justify-around items-start md:items-start relative">
className={`p-6 flex flex-col md:flex-row justify-around items-start md:items-start relative ${footerBgColor}`}
>
<div className="flex items-start"> <div className="flex items-start">
<ul className="mr-10"> <ul className="mr-10">
<li {footerItems.map((footerItem, index) => (
className={`font-light text-xs leading-7 footer-items ${footerMenuItemsColor}`} <li className="font-light text-xs leading-7 footer-items">
> <a href="#">{footerItem.name}</a>
<a href=""> لینک های اصلی</a> </li>
</li> ))}
<li
className={`font-light text-xs leading-7 footer-items ${footerMenuItemsColor}`}
>
<a href=""> فروشگاه</a>
</li>
<li
className={`font-light text-xs leading-7 footer-items ${footerMenuItemsColor}`}
>
<a href=""> در باره ما</a>
</li>
<li
className={`font-light text-xs leading-7 footer-items ${footerMenuItemsColor}`}
>
<a href=""> پرسش های متداول</a>
</li>
</ul>
<ul className="mr-10">
<li
className={`font-light text-xs leading-7 footer-items ${footerMenuItemsColor}`}
>
<a href=""> لینک های اصلی</a>
</li>
<li
className={`font-light text-xs leading-7 footer-items ${footerMenuItemsColor}`}
>
<a href=""> فروشگاه</a>
</li>
<li
className={`font-light text-xs leading-7 footer-items ${footerMenuItemsColor}`}
>
<a href=""> در باره ما</a>
</li>
<li
className={`font-light text-xs leading-7 footer-items ${footerMenuItemsColor}`}
>
<a href=""> پرسش های متداول</a>
</li>
</ul>
<ul className="mr-10">
<li
className={`font-light text-xs leading-7 footer-items ${footerMenuItemsColor}`}
>
<a href=""> لینک های اصلی</a>
</li>
<li
className={`font-light text-xs leading-7 footer-items ${footerMenuItemsColor}`}
>
<a href=""> فروشگاه</a>
</li>
<li
className={`font-light text-xs leading-7 footer-items ${footerMenuItemsColor}`}
>
<a href=""> در باره ما</a>
</li>
<li
className={`font-light text-xs leading-7 footer-items ${footerMenuItemsColor}`}
>
<a href=""> پرسش های متداول</a>
</li>
</ul>
<ul className="mr-10">
<li
className={`font-light text-xs leading-7 footer-items ${footerMenuItemsColor}`}
>
<a href=""> لینک های اصلی</a>
</li>
<li
className={`font-light text-xs leading-7 hover:font-bold footer-items ${footerMenuItemsColor}`}
>
<a href=""> فروشگاه</a>
</li>
<li
className={`font-light text-xs leading-7 hover:font-bold footer-items ${footerMenuItemsColor}`}
>
<a href=""> در باره ما</a>
</li>
</ul> </ul>
</div> </div>
<div className="flex items-center mt-10 md:mt-0"> <div className="flex items-center mt-10 md:mt-0">
@ -114,6 +36,18 @@ const FooterDesign1 = ({ footerMenuItemsColor, footerBgColor }) => {
export default FooterDesign1; export default FooterDesign1;
FooterDesign1.defaultProps = { FooterDesign1.defaultProps = {
footerBgColor: "bg-white", footerItems: [
footerMenuItemsColor: "text-productContent", {
name: "لینک های اصلی",
},
{
name: "فروشگاه",
},
{
name: "در باره ما",
},
{
name: "پرسش های متداول",
},
],
}; };

Loading…
Cancel
Save