update

src/App.js

@@ -18,17 +18,17 @@ function App() {
     <div className="App">
       <ProductDesign />
       <VodProductDesign />
-      <BookDesign />
+      {/* <BookDesign /> */}
-      <ButtonDesign />
+      {/* <ButtonDesign /> */}
-      <ProductTags />
+      {/* <ProductTags /> */}
-      <CounterDesign />
+      {/* <CounterDesign /> */}
-      <BlogDesign1 />
+      {/* <BlogDesign1 /> */}
-      <BlogDesign2 />
+      {/* <BlogDesign2 /> */}
-      <BlogDesign3 />
+      {/* <BlogDesign3 /> */}
-      <BlogDesign4 />
+      {/* <BlogDesign4 /> */}
-      <BlogDesign5 />
+      {/* <BlogDesign5 /> */}
-      <BlogDesign6 />
+      {/* <BlogDesign6 /> */}
-      <HeaderDesign1 />
+      {/* <HeaderDesign1 /> */}
     </div>
   );
 }

src/components/Blogs/design3/BlogDesign3.js

@@ -5,7 +5,13 @@ import blogAuthorImg from "../../../assets/images/blog-author.png";
 
 import commentIcon from "../../../assets/icons/black-comment-icon.svg";
 
-const BlogDesign3 = ({ blogSubTitle, blogAuthor, blogComments }) => {
+const BlogDesign3 = ({
+  blogSubTitle,
+  blogAuthor,
+  blogComments,
+  blogTitleColor,
+  blogCommentAuthorTextColor,
+}) => {
   return (
     <section className="w-4/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
       {/* title holder */}
@@ -36,11 +42,11 @@ const BlogDesign3 = ({ blogSubTitle, blogAuthor, blogComments }) => {
       >
         {/* <img src={blogFeaturedImage2} alt="" /> */}
         <div className="w-full mx-auto p-4 rounded-lg shadow-md bg-white transform translate-y-20">
-          <h2 className="text-base text-justify text-productTitle ">
+          <h2 className={`text-base text-justify ${blogTitleColor}`}>
             آیا مواد غذای پر فیبر و مفید هستند؟
           </h2>
           {blogSubTitle && (
-            <h2 className="text-base text-justify text-productTitle mt-2">
+            <h2 className={`text-base text-justify mt-2 ${blogTitleColor}`}>
               نظر شما چیه
             </h2>
           )}
@@ -48,14 +54,18 @@ const BlogDesign3 = ({ blogSubTitle, blogAuthor, blogComments }) => {
             {blogAuthor && (
               <div className=" flex items-center">
                 <img src={blogAuthorImg} alt="" className="w-7 h-7" />
-                <p className="text-xs text-lightGrayTextColor font-light mr-2">
+                <p
+                  className={`text-xs font-light mr-2 ${blogCommentAuthorTextColor}`}
+                >
                   حامد دژبانی نسب
                 </p>
               </div>
             )}
             {blogComments && (
               <div className=" flex items-center">
-                <p className="text-xs text-lightGrayTextColor font-light ml-2">
+                <p
+                  className={`text-xs font-light ml-2 ${blogCommentAuthorTextColor}`}
+                >
                   زمان مطالعه 30 دقیقه
                 </p>
                 <img src={commentIcon} alt="" className="w-7 h-7" />
@@ -70,7 +80,15 @@ const BlogDesign3 = ({ blogSubTitle, blogAuthor, blogComments }) => {
 
 export default BlogDesign3;
 
+//different text colors i used:
+// text-darkBlueTextColor2
+// text-productTitle
+// text-lightGrayTextColor
+
 BlogDesign3.defaultProps = {
+  blogTitleColor: "text-darkBlueTextColor2",
+  blogCommentAuthorTextColor: "text-darkBlueTextColor2",
+
   blogSubTitle: true,
   blogAuthor: true,
   blogComments: true,

src/components/vodProductDesign/VodProductDesign.js

@@ -39,9 +39,15 @@ const VodProductDesign = ({
     <section className="w-3/6	 mx-auto p-4 bg-white rounded-md shadow-md my-8">
       {/* title holder */}
       <div className="flex items-center justify-between mb-6">
-        <h2 className="text-lg text-productTitle">
+        <h2 className="text-lg text-productTitle">طراحی محصولات vod</h2>
-          inside vodProductDesign component
+      </div>
-        </h2>
+      <div className="mb-6">
+        <p className="leading-10">
+          آدرس:
+          <span className="bg-blue-400 text-white rounded shadow-sm px-2 py-1 mx-2">
+            vodProductDesign
+          </span>
+        </p>
       </div>
       {/* product UI Design */}
       <div className="flex flex-wrap sm:flex-nowrap justify-around">

tailwind.config.js

@@ -25,6 +25,7 @@ module.exports = {
       lightPurpleTextColor: "#A680FF",
       lightBlueTextColor: "#06BACE",
       darkBlueTextColor: "#0615CE",
+      darkBlueTextColor2: "#235A90",
       darkRedTextColor: "#CE3B06",
       darkCrimsonTextColor: "#05335F",
     }),