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/productDesign/ProductDesign.js

@@ -224,7 +224,7 @@ ProductDesign.defaultProps = {
   verticalImg: true,
   horizontalImg: false,
   productTitleColor: "text-darkCrimsonTextColor",
-  productHolderBorder: "border-0",
+  productHolderBorder: "border",
   productHolderBorderColor: "border-grayBorderColor",
   productTitleAlignment: "text-justify",
 

src/components/vodProductDesign/VodProductDesign.js

@@ -37,6 +37,12 @@ const VodProductDesign = ({
 }) => {
   return (
     <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">
+          inside vodProductDesign component
+        </h2>
+      </div>
       {/* product UI Design */}
       <div className="flex flex-wrap sm:flex-nowrap justify-around">
         <div className="w-full flex flex-wrap items-center justify-around my-10 px-4">