Fix incorrect documentation examples for UI components

src/components/AnimatedLogin/AnimatedLogin.md

@@ -11,16 +11,17 @@ This is a reusable component for the Login page with animated background and typ
 Import the component to `pages/index.js`
 `import AnimatedLogin from "../components/AnimatedLogin";`
 
+
 ## How to handle props to the component
 
-```
-<Login
+```jsx
+<AnimatedLogin
     name="SCoRe Labs"
     typeWriteWords={["Effective", "Simple", "Elegant"]}
     typeWriterHeader="SCoRe Lab is"
     submitHandler={() => {}}
 />
-```
+
 
 `name` props is the name of organization
 `typeWriteWords` prop is the word list for typewriter

src/components/BarChart/BarChart.md

@@ -13,8 +13,9 @@ Import the component to `pages/index.js`
 
 ## How to handle props to the component
 
-```
-<BarChart labels={[
+```jsx
+<BarChart
+  labels={[
     "January",
     "February",
     "March",
@@ -27,8 +28,13 @@ Import the component to `pages/index.js`
     "October",
     "November",
     "December",
-  ]} title="Marks" data={[40, 20, 12, 39, 10, 40, 39, 80, 40, 10, 91, 12, 15, 11]} labelsName: "months" color: "#f87979" />
-```
+  ]}
+  title="Marks"
+  data={[40, 20, 12, 39, 10, 40, 39, 80, 40, 10, 91, 12, 15, 11]}
+  labelsName="months"
+  color="#f87979"
+/>
+
 
 `labels` prop is the labels of x axis of the bar chart
 `title` prop is title of the chart

src/components/Breadcrumbs/Breadcrumbs.md

@@ -13,8 +13,13 @@ Import the component to `pages/index.js`
 
 ## How to handle props to the component
 
-```
-<BreadcrumbsWrapper elementList=[{ name: "Labs", url: "/" }, { name: "Categories" }] />
-```
+```jsx
+<BreadcrumbsWrapper
+  elementList={[
+    { name: "Labs", url: "/" },
+    { name: "Categories" }
+  ]}
+/>
+
 
 `elementList` prop is the list of navigation options. items in the list following this signature

src/components/CardThemeFour/CardThemeFour.md

@@ -11,11 +11,15 @@ This is a resuasble component for the feature and services built from scratch. I
 Import the component to `pages/index.js`
 `import {CardThemeFour} from "../components/CardThemeFour";`
 
+
 ## How to handle props to the component
 
-```
-<CardThemeFourimage="sample-image" title="sample title="sample-title" description="sample-description" />
-```
+```jsx
+<CardThemeFour
+  image="sample-image"
+  title="sample-title"
+  description="sample-description"
+/>
 
 `image` prop is used to display the main image of the card
 `title` prop is used to add the title to the card/feature

src/components/CardThemeFourGrid/CardThemeFourGrid.md

@@ -11,12 +11,28 @@ This is a resuasble component for the card and services built from scratch in a
 Import the component to `pages/index.js`
 `import {CardThemeFourGrid} from "../components/CardThemeFourGrid";`
 
+
 ## How to handle props to the component
 
-```
-<CardThemeFourGrid image="sample-image-path"
-      dataUpperGrid={[{image: "sample", description: "sample", title="sample-title"}]} dataLowerGrid={[{image: "sample", description: "sample", title="sample-title"}]} />
-```
+```jsx
+<CardThemeFourGrid
+  image="sample-image-path"
+  dataUpperGrid={[
+    {
+      image: "sample",
+      title: "sample-title",
+      description: "sample",
+    },
+  ]}
+  dataLowerGrid={[
+    {
+      image: "sample",
+      title: "sample-title",
+      description: "sample",
+    },
+  ]}
+/>
+
 
 `image` props is the backgournd image of the section
 `dataUpperGrid` prop is the data of the upper gird

src/components/CartTile/CartTile.md

@@ -13,14 +13,21 @@ Import the component to `pages/index.js`
 
 ## How to handle props to the component
 
-```
-<CartTile image="url of product" name="name of product" price="price of product" qty="Number of items per product" subtractionHandler={function for subtration icon} additionHandler={function for subtration icon} removeHandler={function for delete items}/>
-```
-
-`image` prop is the url of product
-`name` prop is the name of product
-`price` prop is the price of product
-`qty` prop is the Number of items per product
-`subtractionHandler` prop is the function for subtration icon
-`additionHandler` prop is the function for subtration icon
-`removeHandler` prop is the function for delete items
+```jsx
+<CartTile
+  image="url-of-product"
+  name="name-of-product"
+  price="price-of-product"
+  qty="number-of-items"
+  subtractionHandler={() => {}}
+  additionHandler={() => {}}
+  removeHandler={() => {}}
+/>
+
+image prop is the URL of the product
+name prop is the name of the product
+price prop is the price of the product
+qty prop is the number of items per product
+subtractionHandler prop is the function triggered on minus icon click
+additionHandler prop is the function triggered on plus icon click
+removeHandler prop is the function triggered on delete icon click

src/components/DetailCard/DetailCard.md

@@ -13,9 +13,14 @@ Import the component to `pages/index.js`
 
 ## How to handle props to the component
 
-```
-<DetailCard  title="sample title="sample-title" description="sample-description" />
-```
+## How to handle props to the component
+
+```jsx
+<DetailCard
+  title="sample-title"
+  description="sample-description"
+/>
+
 
 
 `title` prop is used to add the title to the card/feature

src/components/DetailCardGrid/DetailCardGrid.md

@@ -11,10 +11,19 @@ This is a resuasble component that contain three services cards arrange in a par
 Import the component to `pages/index.js`
 `import {DetailCardGrid} from "../components/DetailCardGrid";`
 
+
 ## How to handle props to the component
 
-```
-<ServicesCardGrid data=[{titleOne="sample-title" , descriptionOne="sample-description}, gridHeading="sample-heading"] />
-```
+```jsx
+<DetailCardGrid
+  gridHeading="sample-heading"
+  data={[
+    {
+      titleOne: "sample-title",
+      descriptionOne: "sample-description",
+    },
+  ]}
+/>
+
 `gridHeading` prop is use to add the heading for the cards grid
 `data` prop is use to add the data for the cards 

src/components/DocsBanner/DocsBanner.md

@@ -13,11 +13,14 @@ Import the component to `pages/index.js`
 
 ## How to handle props to the component
 
-```
-<DocsBanner header="Frequently Asked Questions" bgColor="color"
-     titleColor="color" toggleColor="color"
-     data={[{title: "sample-question", content: "sample-answer"}]} />
-```
+```jsx
+<DocsBanner
+  mainText="Frequently Asked Questions"
+  subText="Find answers to the most commonly asked questions here."
+  buttonText="View Docs"
+  buttonLink="/docs"
+/>
+
 
 `mainText` prop is the main title or heading for the banner
 `subText` prop is the subtext or side text for the banner

src/components/DynamicBanner/DynamicBanner.md

@@ -13,14 +13,26 @@ Import the component to `pages/index.js`
 
 ## How to handle props to the component
 
-```
-<DynamicBanner  mainText ="sample-mainText"
-  subText = "sample-subText"
-  image = "sample-image"
-  description: ="sample-desc"
-  countUpListData = {duration="sample-numneric-value" end="sample-end-value" text="sample-text"}
-}/>
-```
+```jsx
+<DynamicBanner
+  mainText="sample-mainText"
+  subText="sample-subText"
+  description="sample-description"
+  image="sample-image"
+  countUpListData={[
+    {
+      duration: 2,
+      end: 120,
+      text: "Users",
+    },
+    {
+      duration: 3,
+      end: 75,
+      text: "Projects",
+    },
+  ]}
+/>
+
 
 `mainText` prop is the main title or heading for the banner
 `subText` prop is the subtext or side text for the banner

src/components/FeatureCard/FeatureCard.md

@@ -11,11 +11,16 @@ This is a resuasble component for the feature and services built from scratch. I
 Import the component to `pages/index.js`
 `import {FeatureCard} from "../components/FeatureCard";`
 
+
 ## How to handle props to the component
 
-```
-<FeatureCard image="sample-image" title="sample title="sample-title" description="sample-description" />
-```
+```jsx
+<FeatureCard
+  image="sample-image"
+  title="sample-title"
+  description="sample-description"
+/>
+
 
 `image` prop is used to display the main image of the card
 `title` prop is used to add the title to the card/feature

src/components/FooterLarge/FooterLarge.md

@@ -11,21 +11,35 @@ This is a reusable component for the footer of a website. This Component is high
 Import the component to `pages/index.js`
 `import {FooterLarge} from "../components/FooterLarge";`
 
+## How to handle props to the component
 ## How to handle props to the component
 
-```
+```jsx
 <FooterLarge
-    headingOne = "sample-headingOne"
-    headingTwo = "sample-headingTwo"
-    headingThree = "sample-headingThree"
-    headingFour = "sample-headingFour"
-    aboutText = "sample-about-text"
-    newsletterText = "sample-newsletter-text"
-    linksListData =  {[linkName: "link_name", LinkUrl :"link_Url"],[linkName: "link_name", LinkUrl :"link_Url"]}
-    contactListData ={[Detail:"sample-address", link: "sample-address-link"],[Detail:"sample-phone-number", link: "sample-phone-link"]}
-    socialLinks = {{facebook: "your_link", gitter: "your_link", twitter: "your_link", github: "your_link" linkedin:"your_link", medium:"your_link"}}
+  headingOne="sample-headingOne"
+  headingTwo="sample-headingTwo"
+  headingThree="sample-headingThree"
+  headingFour="sample-headingFour"
+  aboutText="sample-about-text"
+  newsletterText="sample-newsletter-text"
+  linksListData={[
+    { linkName: "link-name-1", linkUrl: "/link-1" },
+    { linkName: "link-name-2", linkUrl: "/link-2" },
+  ]}
+  contactListData={[
+    { detail: "sample-address", link: "/address-link" },
+    { detail: "sample-phone-number", link: "/phone-link" },
+  ]}
+  socialLinks={{
+    facebook: "your-link",
+    gitter: "your-link",
+    twitter: "your-link",
+    github: "your-link",
+    linkedin: "your-link",
+    medium: "your-link",
+  }}
 />
-```
+
 
 `headingOne` this prop is use to add the heading of the first section
 `headingTwo` this prop is use to add the heading of the second section

src/components/FooterThemeFive/FooterThemeFive.md

@@ -13,20 +13,31 @@ Import the component to `pages/index.js`
 
 ## How to handle props to the component
 
-```
+```jsx
 <FooterThemeFive
-    headingOne = "sample-headingOne"
-    headingTwo = "sample-headingTwo"
-    headingThree = "sample-headingThree"
-    aboutText = "sample-aboutText"
-    linksListData =  {[linkName: "link_name", LinkUrl :"link_Url"],[linkName: "link_name", LinkUrl :"link_Url"]}
-    contactListData =  {[ detail: "sample-detail", link: "#"],[detail: "sample-detail",link: "#"]}
-    socialLinks = {{facebook: "your_link", gitter: "your_link", twitter: "your_link", github: "your_link" linkedin:"your_link", medium:"your_link"}}
-    facebookProfile: "facebookaddress",
-    height: "sample-height",
-    width: "sample-width",
+  headingOne="sample-headingOne"
+  headingTwo="sample-headingTwo"
+  headingThree="sample-headingThree"
+  aboutText="sample-aboutText"
+  linksListData={[
+    { linkName: "Link One", linkUrl: "/link-one" },
+    { linkName: "Link Two", linkUrl: "/link-two" },
+  ]}
+  contactListData={[
+    { detail: "sample-detail", link: "#" },
+    { detail: "sample-detail-2", link: "#" },
+  ]}
+  socialLinks={{
+    facebook: "your-facebook-link",
+    twitter: "your-twitter-link",
+    github: "your-github-link",
+    linkedin: "your-linkedin-link",
+  }}
+  facebookProfile="facebookaddress"
+  width="340"
+  height="500"
 />
-```
+
 
 `headingOne` this prop is use to add the heading of the first section
 `headingTwo` this prop is use to add the heading of the second section