{"componentChunkName":"component---src-templates-docs-js","path":"/docs/contrast/react/custom_pages","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"13df86f6-f438-5afa-a935-45f8e93e139b","title":"Custom Pages","slug":"/contrast/react/custom_pages"},"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Custom Pages\",\n  \"metaTitle\": \"Contrast Bootstrap React Components\",\n  \"metaDescription\": \"These are Contrast Bootstrap React Custom Pages \"\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar CDBBadge = makeShortcode(\"CDBBadge\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"Full amazing page templates to cut your work in half.\"), mdx(\"h1\", null, \"Hero\"), mdx(\"i\", null), mdx(\"h2\", null, \"Hero\"), mdx(Link, {\n    to: \"/product/contrast-pro\",\n    mdxType: \"Link\"\n  }, mdx(\"span\", {\n    className: \"badge badge-lg badge-pro\"\n  }, \"Pro Component\")), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://imgur.com/sXDmoq6.png\",\n    \"alt\": \"hero\"\n  }))), mdx(Link, {\n    style: {\n      marginLeft: \"18rem\"\n    },\n    to: \"https://cdbadminpro.netlify.app/hero\",\n    mdxType: \"Link\"\n  }, mdx(CDBBadge, {\n    borderType: \"pill\",\n    size: \"large\",\n    className: \"badge-pro\",\n    mdxType: \"CDBBadge\"\n  }, \"Live Preview\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBNavbar, CDBIcon, CDBCardTitle, CDBCardText, CDBBtn, CDBNavLink, CDBNavItem, CDBCollapse, CDBNavBrand, CDBNavbarNav, CDBNavToggle, } from \\\"cdbreact\\\";\\n\\nexport const Hero = () => {\\n\\n  const [collapse, setCollapse] = useState(false);\\n\\n    return(\\n        <div className=\\\"hero\\\">\\n            <header className=\\\"navigation\\\">\\n        <CDBNavbar className=\\\"px-0 bg-transparent\\\" light expand=\\\"md\\\" scrolling>\\n          <CDBNavBrand href=\\\"/\\\">\\n            <img alt=\\\"logo\\\" src=\\\"/img/pages/logo.png\\\" width=\\\"25px\\\"/>\\n          </CDBNavBrand>\\n          <CDBNavToggle\\n            onClick={() => {\\n              setCollapse(!collapse);\\n            }}\\n          />\\n          <CDBCollapse id=\\\"navbarCollapse1\\\" isOpen={collapse} navbar>\\n            <CDBNavbarNav left>\\n              <CDBNavItem active>\\n                <CDBBtn flat className=\\\"p-3 border-0 bg-transparent\\\">\\n                  <CDBNavLink to=\\\"#\\\">Home</CDBNavLink>\\n                </CDBBtn>\\n              </CDBNavItem>\\n              <CDBNavItem>\\n                <CDBBtn flat className=\\\"p-3 border-0 bg-transparent\\\">\\n                  <CDBNavLink to=\\\"#\\\">Resources</CDBNavLink>\\n                </CDBBtn>\\n              </CDBNavItem>\\n              <CDBNavItem>\\n                <CDBBtn flat className=\\\"p-3 border-0 bg-transparent\\\">\\n                  <CDBNavLink to=\\\"#\\\">Blog</CDBNavLink>\\n                </CDBBtn>\\n              </CDBNavItem>\\n              <CDBNavItem>\\n                <CDBBtn flat className=\\\"p-3 border-0 bg-transparent\\\">\\n                  <CDBNavLink to=\\\"#\\\">Contact</CDBNavLink>\\n                </CDBBtn>\\n              </CDBNavItem>\\n              <CDBNavItem>\\n                <CDBBtn flat className=\\\"p-3 border-0 bg-transparent\\\">\\n                  <CDBNavLink to=\\\"#\\\">Support</CDBNavLink>\\n                </CDBBtn>\\n              </CDBNavItem>\\n            </CDBNavbarNav>\\n            <CDBNavbarNav right>\\n              <CDBNavItem active>\\n                <CDBBtn flat outline style={{width:\\\"120px\\\"}} className=\\\"py-1 m-0 border-dark bg-transparent\\\">\\n                  <CDBNavLink to=\\\"#\\\">Sign In</CDBNavLink>\\n                </CDBBtn>\\n              </CDBNavItem>\\n            </CDBNavbarNav>\\n          </CDBCollapse>\\n        </CDBNavbar>\\n      </header>\\n        <div className=\\\"page-body\\\">\\n                <div className=\\\"page-info\\\">\\n                    <CDBCardTitle className=\\\"h1 font-weight-bold\\\" style={{maxWidth:\\\"350px\\\"}}>Creativity is but skin deep</CDBCardTitle>\\n                    <CDBCardText className=\\\"my-4\\\">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</CDBCardText>\\n                    <CDBBtn flat style={{background:\\\"#8080ff\\\", border:\\\"2px #8080ff solid\\\"}}>Start Now</CDBBtn>\\n                </div>\\n                <div className=\\\"image-container\\\">\\n                    <img alt=\\\"sideImage\\\" className=\\\"image\\\" src=\\\"/img/pages/heroImage3.png\\\" />\\n                    <div className=\\\"btn-container\\\">\\n                        <CDBBtn color=\\\"dark\\\" className=\\\"mr-1\\\"><CDBIcon fas icon=\\\"arrow-left\\\"/></CDBBtn>\\n                        <CDBBtn color=\\\"dark\\\"><CDBIcon fas icon=\\\"arrow-right\\\"/></CDBBtn>\\n                    </div>\\n                </div>\\n            </div>\\n        </div>\\n    );\\n}\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Hero 2\"), mdx(Link, {\n    to: \"/product/contrast-pro\",\n    mdxType: \"Link\"\n  }, mdx(\"span\", {\n    className: \"badge badge-lg badge-pro\"\n  }, \"Pro Component\")), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://imgur.com/XZKnKcx.png\",\n    \"alt\": \"hero\"\n  }))), mdx(Link, {\n    style: {\n      marginLeft: \"18rem\"\n    },\n    to: \"https://cdbadminpro.netlify.app/hero2\",\n    mdxType: \"Link\"\n  }, mdx(CDBBadge, {\n    borderType: \"pill\",\n    size: \"large\",\n    className: \"badge-pro\",\n    mdxType: \"CDBBadge\"\n  }, \"Live Preview\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBNavbar, CDBIcon, CDBCardTitle, CDBCardText, CDBBtn, CDBNavLink, CDBNavItem, CDBCollapse, CDBNavBrand, CDBNavbarNav, CDBNavToggle, } from \\\"cdbreact\\\";\\n\\n\\nexport const Hero2 = () => {\\n\\n  const [collapse, setCollapse] = useState(false);\\n\\n    return(\\n        <div className=\\\"hero2\\\">\\n            <div className=\\\"position-relative\\\">\\n                <img alt=\\\"Background\\\" src=\\\"/img/pages/hero.png\\\" className=\\\"image\\\"/>\\n                <CDBMask overlay=\\\"darkLight\\\"/>\\n                <div className=\\\"scroll-down\\\">\\n                    <CDBIcon fas icon=\\\"angle-double-down\\\"/>\\n                    <span className=\\\"ml-2\\\">scroll down</span>\\n                </div>\\n            </div>\\n            <div className=\\\"page-body\\\">\\n        <header className=\\\"navigation\\\">\\n          <CDBNavbar className=\\\"bg-transparent px-0\\\" expand=\\\"md\\\" dark scrolling>\\n            <CDBNavBrand href=\\\"/\\\">\\n              <img alt=\\\"logo\\\" src=\\\"/img/pages/logo.png\\\" width=\\\"25px\\\"/>\\n            </CDBNavBrand>\\n            <CDBNavToggle\\n              onClick={() => {\\n                setCollapse(!collapse);\\n              }}\\n            />\\n            <CDBCollapse id=\\\"navbarCollapse1\\\" delay={0} isOpen={collapse} navbar>\\n              <CDBNavbarNav left>\\n                <CDBNavItem active>\\n                  <CDBBtn flat className=\\\"p-3 border-0 bg-transparent\\\">\\n                    <CDBNavLink to=\\\"#\\\">Home</CDBNavLink>\\n                  </CDBBtn>\\n                </CDBNavItem>\\n                <CDBNavItem>\\n                  <CDBBtn flat className=\\\"p-3 border-0 bg-transparent\\\">\\n                    <CDBNavLink to=\\\"#\\\">Resources</CDBNavLink>\\n                  </CDBBtn>\\n                </CDBNavItem>\\n                <CDBNavItem>\\n                  <CDBBtn flat className=\\\"p-3 border-0 bg-transparent\\\">\\n                    <CDBNavLink to=\\\"#\\\">Blog</CDBNavLink>\\n                  </CDBBtn>\\n                </CDBNavItem>\\n                <CDBNavItem>\\n                  <CDBBtn flat className=\\\"p-3 border-0 bg-transparent\\\">\\n                    <CDBNavLink to=\\\"#\\\">About</CDBNavLink>\\n                  </CDBBtn>\\n                </CDBNavItem>\\n                <CDBNavItem>\\n                  <CDBBtn flat className=\\\"p-3 border-0 bg-transparent\\\">\\n                    <CDBNavLink to=\\\"#\\\">Contact</CDBNavLink>\\n                  </CDBBtn>\\n                </CDBNavItem>\\n                <CDBNavItem>\\n                  <CDBBtn flat className=\\\"p-3 border-0 bg-transparent\\\">\\n                    <CDBNavLink to=\\\"#\\\">Support</CDBNavLink>\\n                  </CDBBtn>\\n                </CDBNavItem>\\n              </CDBNavbarNav>\\n            </CDBCollapse>\\n          </CDBNavbar>\\n        </header>\\n                <div className=\\\"page-info\\\">\\n                    <CDBCardTitle className=\\\"h1 font-weight-bold\\\" style={{maxWidth:\\\"350px\\\"}}>Creativity is but skin deep</CDBCardTitle>\\n                    <CDBCardText className=\\\"my-5\\\" style={{maxWidth:\\\"500px\\\"}}>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</CDBCardText>\\n                    <div className=\\\"d-flex\\\">\\n                        <CDBBtn flat className=\\\"mr-4\\\" style={{background:\\\"#8080ff\\\", border:\\\"2px #8080ff solid\\\"}}>Start Now</CDBBtn>\\n                        <CDBBtn flat className=\\\"border-white bg-transparent text-white\\\">Start Now</CDBBtn>\\n                    </div>\\n                </div>\\n            </div>\\n        </div>\\n    );\\n}\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Hero 3\"), mdx(Link, {\n    to: \"/product/contrast-pro\",\n    mdxType: \"Link\"\n  }, mdx(\"span\", {\n    className: \"badge badge-lg badge-pro\"\n  }, \"Pro Component\")), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://imgur.com/7SJyG6q.png\",\n    \"alt\": \"hero\"\n  }))), mdx(Link, {\n    style: {\n      marginLeft: \"18rem\"\n    },\n    to: \"https://cdbadminpro.netlify.app/hero3\",\n    mdxType: \"Link\"\n  }, mdx(CDBBadge, {\n    borderType: \"pill\",\n    size: \"large\",\n    className: \"badge-pro\",\n    mdxType: \"CDBBadge\"\n  }, \"Live Preview\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBNavbar, CDBCollapse, CDBCardTitle, CDBCardText, CDBBtn, CDBNavLink, CDBNavItem, CDBCollapse, CDBNavBrand, CDBNavbarNav, CDBNavToggle, } from \\\"cdbreact\\\";\\n\\n\\nexport const Hero3 = () => {\\n\\n  const [collapse, setCollapse] = useState(false);\\n\\n    return(\\n        <div className=\\\"hero3\\\">\\n            <header className=\\\"navigation\\\">\\n        <CDBNavbar className=\\\"px-0 bg-transparent\\\" light expand=\\\"md\\\" scrolling>\\n          <CDBNavBrand href=\\\"/\\\">\\n            <img alt=\\\"logo\\\" src=\\\"/img/pages/logo.png\\\" width=\\\"25px\\\"/>\\n          </CDBNavBrand>\\n          <CDBNavToggle\\n            onClick={() => {\\n              setCollapse(!collapse);\\n            }}\\n          />\\n          <CDBCollapse id=\\\"navbarCollapse1\\\" isOpen={collapse} navbar>\\n            <CDBNavbarNav left>\\n              <CDBNavItem active>\\n                <CDBBtn flat className=\\\"p-3 border-0 bg-transparent\\\">\\n                  <CDBNavLink to=\\\"#\\\">Home</CDBNavLink>\\n                </CDBBtn>\\n              </CDBNavItem>\\n              <CDBNavItem>\\n                <CDBBtn flat className=\\\"p-3 border-0 bg-transparent\\\">\\n                  <CDBNavLink to=\\\"#\\\">Resources</CDBNavLink>\\n                </CDBBtn>\\n              </CDBNavItem>\\n              <CDBNavItem>\\n                <CDBBtn flat className=\\\"p-3 border-0 bg-transparent\\\">\\n                  <CDBNavLink to=\\\"#\\\">Blog</CDBNavLink>\\n                </CDBBtn>\\n              </CDBNavItem>\\n              <CDBNavItem>\\n                <CDBBtn flat className=\\\"p-3 border-0 bg-transparent\\\">\\n                  <CDBNavLink to=\\\"#\\\">Contact</CDBNavLink>\\n                </CDBBtn>\\n              </CDBNavItem>\\n              <CDBNavItem>\\n                <CDBBtn flat className=\\\"p-3 border-0 bg-transparent\\\">\\n                  <CDBNavLink to=\\\"#\\\">Support</CDBNavLink>\\n                </CDBBtn>\\n              </CDBNavItem>\\n            </CDBNavbarNav>\\n            <CDBNavbarNav right>\\n              <CDBNavItem active>\\n                <CDBBtn flat outline style={{width:\\\"120px\\\"}} className=\\\"py-1 m-2 border-dark bg-transparent\\\">\\n                  <CDBNavLink to=\\\"#\\\">Sign In</CDBNavLink>\\n                </CDBBtn>\\n              </CDBNavItem>\\n            </CDBNavbarNav>\\n          </CDBCollapse>\\n        </CDBNavbar>\\n      </header>\\n      <div className=\\\"page-body\\\">\\n                <div className=\\\"page-info\\\">\\n                    <CDBCardTitle className=\\\"h1 big\\\">Creativity is but skin deep</CDBCardTitle>\\n                    <CDBCardText className=\\\"my-4\\\" style={{maxWidth:\\\"500px\\\"}}>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</CDBCardText>\\n                    <CDBBtn flat style={{background:\\\"#8080ff\\\", border:\\\"2px #8080ff solid\\\"}}>Start Now</CDBBtn>\\n                </div>\\n                <div className=\\\"image-container\\\">\\n                    <img alt=\\\"sideImage\\\" src=\\\"/img/pages/heroImage2.png\\\" className=\\\"image1\\\"/>\\n                    <img alt=\\\"sideImage\\\" className=\\\"image2\\\" src=\\\"/img/pages/heroImage.png\\\" />\\n                </div>\\n            </div>\\n            <div className=\\\"scroll-down\\\">\\n                <CDBIcon fas icon=\\\"angle-double-down\\\"/>\\n                <span className=\\\"ml-2\\\">scroll down</span>\\n            </div>\\n        </div>\\n    );\\n}\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Hero 4\"), mdx(Link, {\n    to: \"/product/contrast-pro\",\n    mdxType: \"Link\"\n  }, mdx(\"span\", {\n    className: \"badge badge-lg badge-pro\"\n  }, \"Pro Component\")), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://imgur.com/epamBB3.png\",\n    \"alt\": \"hero\"\n  }))), mdx(Link, {\n    style: {\n      marginLeft: \"18rem\"\n    },\n    to: \"https://cdbadminpro.netlify.app/hero4\",\n    mdxType: \"Link\"\n  }, mdx(CDBBadge, {\n    borderType: \"pill\",\n    size: \"large\",\n    className: \"badge-pro\",\n    mdxType: \"CDBBadge\"\n  }, \"Live Preview\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBNavbar, CDBCardTitle, CDBCardText, CDBBtn, CDBNavLink, CDBNavItem, CDBCollapse, CDBNavBrand, CDBNavbarNav, CDBNavToggle, } from \\\"cdbreact\\\";\\n\\nexport const Hero4 = () => {\\n\\n  const [collapse, setCollapse] = useState(false);\\n\\n    return(\\n        <div className=\\\"hero4\\\">\\n            <header className=\\\"navigation\\\">\\n        <CDBNavbar className=\\\"px-0 bg-transparent\\\" light expand=\\\"md\\\" scrolling>\\n          <CDBNavBrand className=\\\"navbar-expand-md mx-auto\\\" href=\\\"/\\\">\\n            <img alt=\\\"logo\\\" src=\\\"/img/pages/logo.png\\\" width=\\\"25px\\\" className=\\\"navbar-toggler p-0 border-0\\\" />\\n          </CDBNavBrand>\\n          <CDBNavToggle\\n            onClick={() => {\\n              setCollapse(!collapse);\\n            }}\\n          />\\n          <CDBCollapse id=\\\"navbarCollapse1\\\" isOpen={collapse} navbar>\\n            <ul className=\\\"navbar-nav mx-auto\\\">\\n              <CDBNavItem>\\n                <CDBBtn flat className=\\\"p-3 border-0 bg-transparent\\\">\\n                  <CDBNavLink to=\\\"#\\\">Resources</CDBNavLink>\\n                </CDBBtn>\\n              </CDBNavItem>\\n              <CDBNavItem>\\n                <CDBBtn flat className=\\\"p-3 border-0 bg-transparent\\\">\\n                  <CDBNavLink to=\\\"#\\\">Blog</CDBNavLink>\\n                </CDBBtn>\\n              </CDBNavItem>\\n                <CDBNavBrand href=\\\"/\\\" className=\\\"my-auto mx-0 px-4 inner-logo\\\">\\n                  <img alt=\\\"logo\\\" src=\\\"/img/pages/logo.png\\\" width=\\\"25px\\\"/>\\n                </CDBNavBrand>\\n              <CDBNavItem>\\n                <CDBBtn flat className=\\\"p-3 border-0 bg-transparent\\\">\\n                  <CDBNavLink to=\\\"#\\\">Contact</CDBNavLink>\\n                </CDBBtn>\\n              </CDBNavItem>\\n              <CDBNavItem>\\n                <CDBBtn flat className=\\\"p-3 border-0 bg-transparent\\\">\\n                  <CDBNavLink to=\\\"#\\\">Support</CDBNavLink>\\n                </CDBBtn>\\n              </CDBNavItem>\\n            </ul>\\n          </CDBCollapse>\\n        </CDBNavbar>\\n      </header>\\n            <div className=\\\"page-body\\\">\\n                <CDBCardTitle className=\\\"h1 font-weight-bold\\\">Introducing Contrast UI Kit</CDBCardTitle>\\n                <CDBCardText className=\\\"my-4 mx-auto\\\" style={{maxWidth:\\\"550px\\\"}}>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</CDBCardText>\\n                <CDBBtn flat className=\\\"m-auto\\\" style={{background:\\\"#8080ff\\\", border:\\\"2px #8080ff solid\\\"}}>Explore</CDBBtn>\\n                <CDBIcon fas className=\\\"d-block mt-4\\\" icon=\\\"angle-double-down\\\"/>\\n                <img alt=\\\"sideImage\\\" src=\\\"/img/pages/promotionImage.png\\\" className=\\\"image\\\"/>\\n            </div>\\n        </div>\\n    );\\n}\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Hero 5\"), mdx(Link, {\n    to: \"/product/contrast-pro\",\n    mdxType: \"Link\"\n  }, mdx(\"span\", {\n    className: \"badge badge-lg badge-pro\"\n  }, \"Pro Component\")), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://imgur.com/QeNpIAS.png\",\n    \"alt\": \"hero\"\n  }))), mdx(Link, {\n    style: {\n      marginLeft: \"18rem\"\n    },\n    to: \"https://cdbadminpro.netlify.app/hero5\",\n    mdxType: \"Link\"\n  }, mdx(CDBBadge, {\n    borderType: \"pill\",\n    size: \"large\",\n    className: \"badge-pro\",\n    mdxType: \"CDBBadge\"\n  }, \"Live Preview\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBNavbar, CDBCardTitle, CDBCardText, CDBBtn, CDBNavLink, CDBNavItem, CDBCollapse, CDBNavBrand, CDBNavbarNav, CDBNavToggle, } from \\\"cdbreact\\\";\\n\\nexport const Hero5 = () => {\\n\\n  const [collapse, setCollapse] = useState(false);\\n\\n    return(\\n        <div className=\\\"hero5\\\">\\n            <div style={{position:\\\"relative\\\"}}>\\n                <img alt=\\\"Background\\\" src=\\\"/img/pages/hero1.png\\\" style={{width:\\\"100%\\\", height:\\\"100vh\\\", objectFit:\\\"cover\\\"}}/>\\n                <CDBMask overlay=\\\"darkLight\\\"/>\\n            </div>\\n            <div className=\\\"page-body\\\">\\n        <div style={{maxWidth:\\\"1320px\\\", margin:\\\"0 auto\\\"}}>\\n                <header className=\\\"page-header\\\">\\n            <CDBNavbar className=\\\"navigation bg-transparent p-0\\\" expand=\\\"md\\\" dark scrolling>\\n              <CDBNavBrand href=\\\"/\\\">\\n                <img alt=\\\"logo\\\" src=\\\"/img/pages/logo.png\\\" width=\\\"25px\\\"/>\\n              </CDBNavBrand>\\n              <CDBNavToggle\\n                onClick={() => {\\n                  setCollapse(!collapse);\\n                }}\\n              />\\n              <CDBCollapse id=\\\"navbarCollapse1\\\" delay={0} isOpen={collapse} navbar>\\n                <CDBNavbarNav left>\\n                  <CDBNavItem active>\\n                    <CDBBtn flat className=\\\"py-3 border-0 bg-transparent\\\">\\n                      <CDBNavLink to=\\\"#\\\">Home</CDBNavLink>\\n                    </CDBBtn>\\n                  </CDBNavItem>\\n                  <CDBNavItem>\\n                    <CDBBtn flat className=\\\"py-3 border-0 bg-transparent\\\">\\n                      <CDBNavLink to=\\\"#\\\">Resources</CDBNavLink>\\n                    </CDBBtn>\\n                  </CDBNavItem>\\n                  <CDBNavItem>\\n                    <CDBBtn flat className=\\\"py-3 border-0 bg-transparent\\\">\\n                      <CDBNavLink to=\\\"#\\\">Blog</CDBNavLink>\\n                    </CDBBtn>\\n                  </CDBNavItem>\\n                  <CDBNavItem>\\n                    <CDBBtn flat className=\\\"py-3 border-0 bg-transparent\\\">\\n                      <CDBNavLink to=\\\"#\\\">Contact</CDBNavLink>\\n                    </CDBBtn>\\n                  </CDBNavItem>\\n                  <CDBNavItem>\\n                    <CDBBtn flat className=\\\"py-3 border-0 bg-transparent\\\">\\n                      <CDBNavLink to=\\\"#\\\">Support</CDBNavLink>\\n                    </CDBBtn>\\n                  </CDBNavItem>\\n                </CDBNavbarNav>\\n                <CDBNavbarNav right>\\n                  <CDBNavItem>\\n                    <CDBBtn flat className=\\\"py-3 border-0 bg-transparent\\\">\\n                      <CDBNavLink to=\\\"#\\\">Sign In</CDBNavLink>\\n                    </CDBBtn>\\n                  </CDBNavItem>\\n                  <CDBNavItem>\\n                    <CDBBtn flat outline style={{width:\\\"120px\\\"}} className=\\\"my-2 py-1 border-white bg-transparent\\\">\\n                      <CDBNavLink to=\\\"#\\\">Sign Up</CDBNavLink>\\n                    </CDBBtn>\\n                  </CDBNavItem>\\n                </CDBNavbarNav>\\n              </CDBCollapse>\\n            </CDBNavbar>\\n          </header>\\n          <div className=\\\"text-white text-center\\\" style={{width:\\\"80%\\\", margin:\\\"12rem auto 0 auto\\\"}}>\\n                    <CDBCardTitle className=\\\"h1 font-weight-bold mx-auto\\\">Introducing the innovating, captivating art gallery.</CDBCardTitle>\\n                    <CDBCardText className=\\\"my-5 mx-auto\\\" style={{maxWidth:\\\"70%\\\"}}>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</CDBCardText>\\n                    <CDBBtn flat className=\\\"px-4\\\" style={{background:\\\"#8080ff\\\", border:\\\"#8080ff\\\"}}>Explore</CDBBtn>\\n                    <CDBIcon fas className=\\\"d-block mt-3\\\" icon=\\\"angle-double-down\\\"/>\\n                </div>\\n        </div>\\n      </div>\\n        </div>\\n    );\\n}\\n\")), mdx(\"h1\", null, \"Forms\"), mdx(\"i\", null), mdx(\"h2\", null, \"Create Account\"), mdx(Link, {\n    to: \"/product/contrast-pro\",\n    mdxType: \"Link\"\n  }, mdx(\"span\", {\n    className: \"badge badge-lg badge-pro\"\n  }, \"Pro Component\")), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://imgur.com/y2SQAmI.png\",\n    \"alt\": \"hero\"\n  }))), mdx(Link, {\n    style: {\n      marginLeft: \"18rem\"\n    },\n    to: \"https://cdbadminpro.netlify.app/create-account\",\n    mdxType: \"Link\"\n  }, mdx(CDBBadge, {\n    borderType: \"pill\",\n    size: \"large\",\n    className: \"badge-pro\",\n    mdxType: \"CDBBadge\"\n  }, \"Live Preview\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBLink, CDBIcon, CDBCard, CDBBtn, CDBInput, CDBCardBody, CDBNavbar, CDBNavBrand, CDBContainer } from \\\"cdbreact\\\";\\n\\nexport const CreateAccount = () => {\\n    return(\\n        <CDBContainer>\\n      <CDBNavbar className=\\\"px-0 mx-auto bg-transparent\\\" style={{width:\\\"80%\\\"}} light expand=\\\"md\\\" scrolling>\\n        <CDBNavBrand href=\\\"/\\\" className=\\\"d-flex align-items-center\\\">\\n          <img alt=\\\"logo\\\" src=\\\"/img/pages/logo.png\\\" width=\\\"25px\\\"/>\\n          <span className=\\\"ml-3 h4 my-0 font-weight-bold\\\">Devwares</span>\\n        </CDBNavBrand>\\n      </CDBNavbar>\\n            <div className=\\\"d-flex align-items-center justify-content-center\\\">\\n        <CDBCard style={{width:\\\"80%\\\", maxWidth:\\\"375px\\\"}} className=\\\"border-0\\\">\\n          <CDBCardBody className=\\\"my-3 p-0 mx-auto\\\">\\n            <div className=\\\"mt-4 mb-5\\\">\\n              <p className=\\\"h4 text-center font-weight-bold\\\">Create Account</p>\\n            </div>\\n            <div className=\\\"d-flex my-3\\\">\\n              <CDBBtn color=\\\"primary\\\" style={{width:\\\"80%\\\"}} className=\\\"mr-1\\\" >\\n                <CDBIcon className=\\\"float-left mt-1\\\" fab icon=\\\"facebook-f\\\"/>\\n                Continue with facebook\\n              </CDBBtn>\\n              <CDBBtn color=\\\"info\\\">\\n                <CDBIcon fab icon=\\\"twitter\\\"/>\\n              </CDBBtn>\\n            </div>\\n            <div className=\\\"d-flex align-items-center mb-3\\\">\\n              <span style={{border:\\\"0.5px solid black\\\", width:\\\"45%\\\"}}/>\\n              <span className=\\\"text-center\\\" style={{width:\\\"10%\\\"}}>OR</span>\\n              <span style={{border:\\\"0.5px solid black\\\", width:\\\"45%\\\"}}/>\\n            </div>\\n            <div style={{minWidth:\\\"250px\\\"}}>\\n              <label htmlFor=\\\"defaultRegisterUsername\\\" className=\\\"text-muted m-0\\\">\\n                Username\\n              </label>\\n              <CDBInput id=\\\"defaultRegisterUsername\\\" className=\\\"mt-n3\\\" background hint=\\\"Username\\\" type=\\\"text\\\" />\\n              <label htmlFor=\\\"defaultRegisterPassword\\\" className=\\\"text-muted m-0\\\">\\n                Password\\n              </label>\\n              <CDBInput id=\\\"defaultRegisterPassword\\\" className=\\\"mt-n3\\\" background hint=\\\"Password\\\" type=\\\"password\\\"/>\\n            </div>\\n            <CDBBtn\\n              color=\\\"dark\\\"\\n              className=\\\"btn-block w-100 mt-5\\\">\\n                Sign up\\n            </CDBBtn>\\n            <p className=\\\"text-muted mt-4 text-center\\\">By clicking sign up you agree to the Contrast<CDBLink style={{fontWeight:\\\"600\\\"}} className=\\\"d-inline p-0 text-dark\\\" to=\\\"#\\\"> terms and conditions</CDBLink></p>\\n            <p className=\\\"text-muted text-center my-5\\\">Have an Account? <CDBLink style={{fontWeight:\\\"600\\\"}} className=\\\"d-inline p-0 text-dark\\\" to=\\\"#\\\">Sign in</CDBLink></p>\\n          </CDBCardBody>\\n        </CDBCard>\\n            </div>\\n        </CDBContainer>\\n    );\\n}\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Forgot Password\"), mdx(Link, {\n    to: \"/product/contrast-pro\",\n    mdxType: \"Link\"\n  }, mdx(\"span\", {\n    className: \"badge badge-lg badge-pro\"\n  }, \"Pro Component\")), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://imgur.com/NTYtWSP.png\",\n    \"alt\": \"hero\"\n  }))), mdx(Link, {\n    style: {\n      marginLeft: \"18rem\"\n    },\n    to: \"https://cdbadminpro.netlify.app/forgot-password\",\n    mdxType: \"Link\"\n  }, mdx(CDBBadge, {\n    borderType: \"pill\",\n    size: \"large\",\n    className: \"badge-pro\",\n    mdxType: \"CDBBadge\"\n  }, \"Live Preview\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from 'react';\\nimport {\\n  CDBLink,\\n  CDBCard,\\n  CDBBtn,\\n  CDBInput,\\n  CDBCardBody,\\n  CDBNavbar,\\n  CDBNavBrand } from \\\"cdbreact\\\";\\n\\nexport const ForgotPassword = () => {\\n    return(\\n        <div className=\\\"forgotPassword\\\">\\n            <div className=\\\"position-relative\\\">\\n        <img alt=\\\"Background\\\" src=\\\"/img/pages/signIn.png\\\" style={{position:\\\"absolute\\\", width:\\\"100%\\\", height:\\\"100vh\\\"}}/>\\n      </div>\\n      <div className=\\\"body\\\">\\n        <CDBNavbar className=\\\"navigation bg-transparent\\\" light expand=\\\"md\\\" scrolling>\\n          <CDBNavBrand href=\\\"/\\\" className=\\\"d-flex align-items-center\\\">\\n            <img alt=\\\"logo\\\" src=\\\"/img/pages/logo.png\\\" width=\\\"25px\\\"/>\\n            <span className=\\\"ml-3 h5 my-0 font-weight-bold\\\">Devwares</span>\\n          </CDBNavBrand>\\n        </CDBNavbar>\\n        <CDBCard className=\\\"form\\\">\\n          <CDBCardBody className=\\\"form-body\\\">\\n            <div className=\\\"mt-4 mb-5\\\">\\n              <p className=\\\"h4 font-weight-bold\\\">Forgot Password</p>\\n            </div>\\n            <label htmlFor=\\\"defaultRegisterEmail\\\" className=\\\"text-muted m-0\\\">\\n              Email Address\\n            </label>\\n            <CDBInput id=\\\"defaultRegisterEmail\\\" hint=\\\"Email Address\\\" className=\\\"mt-n3\\\" background type=\\\"email\\\" />\\n            <CDBBtn\\n              color=\\\"dark\\\"\\n              className=\\\"btn-block w-100 mb-3 mt-5\\\" >\\n                Recover Password\\n            </CDBBtn>\\n            <p className=\\\"text-muted text-center\\\">Return to <CDBLink style={{fontWeight:\\\"600\\\"}} className=\\\"d-inline p-0 text-dark\\\" to=\\\"#\\\">Sign in</CDBLink></p>\\n          </CDBCardBody>\\n        </CDBCard>\\n            </div>\\n        </div>\\n    );\\n}\\n\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Forgot Password 2\"), mdx(Link, {\n    to: \"/product/contrast-pro\",\n    mdxType: \"Link\"\n  }, mdx(\"span\", {\n    className: \"badge badge-lg badge-pro\"\n  }, \"Pro Component\")), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://imgur.com/NZGgIwj.png\",\n    \"alt\": \"hero\"\n  }))), mdx(Link, {\n    style: {\n      marginLeft: \"18rem\"\n    },\n    to: \"https://cdbadminpro.netlify.app/forgot-password2\",\n    mdxType: \"Link\"\n  }, mdx(CDBBadge, {\n    borderType: \"pill\",\n    size: \"large\",\n    className: \"badge-pro\",\n    mdxType: \"CDBBadge\"\n  }, \"Live Preview\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from 'react';\\nimport {\\n  CDBLink,\\n  CDBCard,\\n  CDBBtn,\\n  CDBInput,\\n  CDBCardBody,\\n  CDBNavbar,\\n  CDBNavBrand,\\n  CDBContainer } from \\\"cdbreact\\\";\\n\\nexport const ForgotPassword2 = () => {\\n    return(\\n        <Container>\\n            <CDBNavbar className=\\\"px-0 mx-auto bg-transparent\\\" style={{width:\\\"80%\\\"}} light expand=\\\"md\\\" scrolling>\\n        <CDBNavBrand href=\\\"/\\\" className=\\\"d-flex align-items-center\\\">\\n          <img alt=\\\"logo\\\" src=\\\"/img/pages/logo.png\\\" width=\\\"25px\\\"/>\\n          <span className=\\\"ml-3 h4 my-0 font-weight-bold\\\">Devwares</span>\\n        </CDBNavBrand>\\n      </CDBNavbar>\\n      <div className=\\\"d-flex align-items-center justify-content-center\\\">\\n        <CDBCard style={{width:\\\"80%\\\", maxWidth:\\\"375px\\\", height:\\\"70vh\\\"}} className=\\\"border-0\\\">\\n          <CDBCardBody className=\\\"m-3 d-flex flex-column p-0\\\">\\n            <div className=\\\"mt-4 mb-5\\\">\\n              <p className=\\\"h4 text-center font-weight-bold\\\">Forgot Password</p>\\n            </div>\\n            <label htmlFor=\\\"defaultRegisterEmail\\\" className=\\\"text-muted m-0\\\">\\n              Email Address\\n            </label>\\n            <CDBInput id=\\\"defaultRegisterEmail\\\" hint=\\\"Email Address\\\" className=\\\"mt-n3\\\" background type=\\\"email\\\" />\\n            <CDBBtn\\n              color=\\\"dark\\\"\\n              className=\\\"btn-block w-100 mb-3 mt-2\\\">\\n                Recover Password\\n            </CDBBtn>\\n            <p className=\\\"text-muted text-center mt-auto\\\">Return to <CDBLink style={{fontWeight:\\\"600\\\"}} className=\\\"d-inline p-0 text-dark\\\" to=\\\"#\\\">Sign in</CDBLink></p>\\n          </CDBCardBody>\\n        </CDBCard>\\n            </div>\\n        </Container>\\n    );\\n}\\n\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Forgot Password Popup\"), mdx(Link, {\n    to: \"/product/contrast-pro\",\n    mdxType: \"Link\"\n  }, mdx(\"span\", {\n    className: \"badge badge-lg badge-pro\"\n  }, \"Pro Component\")), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://imgur.com/Y6aLjNh.png\",\n    \"alt\": \"hero\"\n  }))), mdx(Link, {\n    style: {\n      marginLeft: \"18rem\"\n    },\n    to: \"https://cdbadminpro.netlify.app/forgot-password-popup\",\n    mdxType: \"Link\"\n  }, mdx(CDBBadge, {\n    borderType: \"pill\",\n    size: \"large\",\n    className: \"badge-pro\",\n    mdxType: \"CDBBadge\"\n  }, \"Live Preview\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React, { useState } from 'react';\\nimport { CDBLink,\\n  CDBIcon,\\n  CDBCard,\\n  CDBBtn,\\n  CDBInput,\\n  CDBCardBody,\\n  CDBNavbar,\\n  CDBNavBrand,\\n  CDBModal } from \\\"cdbreact\\\";\\n\\nexport const ForgotPasswordPopUp = () => {\\n\\n  const [modal, setModal] = useState(true);\\n  const toggle = () => {\\n    setModal(!modal);\\n  };\\n\\n    return(\\n        <div className=\\\"forgotPasswordPopUp\\\">\\n            <div className=\\\"position-relative\\\">\\n        <img alt=\\\"Background\\\" src=\\\"/img/pages/signIn.png\\\" className=\\\"image\\\"/>\\n      </div>\\n      <div className=\\\"body\\\">\\n        <CDBNavbar className=\\\"navigation bg-transparent\\\" light expand=\\\"md\\\" scrolling>\\n          <CDBNavBrand href=\\\"/\\\" className=\\\"d-flex align-items-center\\\">\\n            <img alt=\\\"logo\\\" src=\\\"/img/pages/logo.png\\\" width=\\\"25px\\\"/>\\n            <span className=\\\"ml-3 h4 my-0 font-weight-bold\\\">Devwares</span>\\n          </CDBNavBrand>\\n        </CDBNavbar>\\n        <CDBCard className=\\\"shadow-lg form\\\">\\n          <CDBCardBody className=\\\"mx-5 py-5 px-0\\\">\\n            <div className=\\\"mt-4 mb-5\\\">\\n              <p className=\\\"h4 font-weight-bold\\\">Sign in</p>\\n            </div>\\n            <label htmlFor=\\\"defaultRegisterUsername\\\" className=\\\"text-muted m-0\\\">\\n              Username\\n            </label>\\n            <CDBInput id=\\\"defaultRegisterUsername\\\" background hint=\\\"Username\\\" className=\\\"mt-n3\\\" type=\\\"text\\\" />\\n            <label htmlFor=\\\"defaultRegisterPassword\\\" className=\\\"text-muted m-0\\\">\\n              Password\\n            </label>\\n            <CDBInput id=\\\"defaultRegisterPassword\\\" background hint=\\\"Password\\\" className=\\\"mt-n3\\\" type=\\\"password\\\"/>\\n            <CDBLink onClick={toggle} style={{fontWeight:\\\"600\\\"}} className=\\\"d-inline p-0 text-dark\\\" to=\\\"#\\\">\\n              Forgot Password?\\n            </CDBLink>\\n            <CDBModal isOpen={modal} toggle={toggle} centered fade>\\n              <CDBCard>\\n                <CDBBtn color=\\\"none\\\" flat onClick={toggle} className=\\\"ml-auto border-0 mt-2 mr-2\\\"><CDBIcon fas icon=\\\"times\\\"/></CDBBtn>\\n                <CDBCardBody className=\\\"w-75 mx-auto modal-card\\\">\\n                  <div className=\\\"mt-4 mb-5\\\">\\n                    <p className=\\\"h3 font-weight-bold\\\">Forgot Password</p>\\n                  </div>\\n                  <label htmlFor=\\\"defaultRegisterEmail\\\" className=\\\"text-muted m-0\\\">\\n                    Email Address\\n                  </label>\\n                  <CDBInput id=\\\"defaultRegisterEmail\\\" hint=\\\"Email Address\\\" className=\\\"mt-n3\\\" background type=\\\"email\\\" />\\n                  <CDBBtn\\n                    color=\\\"dark\\\"\\n                    className=\\\"btn-block w-100 mb-3 mt-5\\\" >\\n                      Recover Password\\n                  </CDBBtn>\\n                  <p className=\\\"text-muted text-center\\\">\\n                    Return to\\n                    <CDBLink style={{fontWeight:\\\"600\\\"}} onClick={toggle} className=\\\"d-inline ml-2 p-0 text-dark\\\" to=\\\"#\\\">\\n                      Sign in\\n                    </CDBLink>\\n                  </p>\\n                </CDBCardBody>\\n              </CDBCard>\\n            </CDBModal>\\n            <CDBBtn\\n              color=\\\"dark\\\"\\n              className=\\\"btn-block w-100 mb-3 mt-5\\\" >\\n                Sign in\\n            </CDBBtn>\\n            <div className=\\\"d-flex align-items-center\\\">\\n              <span style={{border:\\\"0.5px solid black\\\", width:\\\"45%\\\"}}/>\\n              <span className=\\\"text-center\\\" style={{width:\\\"10%\\\"}}>OR</span>\\n              <span style={{border:\\\"0.5px solid black\\\", width:\\\"45%\\\"}}/>\\n            </div>\\n            <div className=\\\"row my-3 d-flex justify-content-center\\\">\\n              <CDBBtn\\n                size=\\\"sm\\\"\\n                flat\\n                color=\\\"dark\\\"\\n              >\\n                <CDBIcon fab icon=\\\"facebook-f\\\" />\\n              </CDBBtn>\\n              <CDBBtn\\n                size=\\\"sm\\\"\\n                color=\\\"dark\\\"\\n                flat\\n                className=\\\"mx-2\\\"\\n              >\\n                <CDBIcon fab icon=\\\"twitter\\\" />\\n              </CDBBtn>\\n              <CDBBtn\\n                size=\\\"sm\\\"\\n                flat\\n                color=\\\"dark\\\"\\n              >\\n                <CDBIcon fab icon=\\\"google-plus-g\\\"/>\\n              </CDBBtn>\\n            </div>\\n            <p className=\\\"text-muted text-center\\\">Don't have an Account? <CDBLink style={{fontWeight:\\\"600\\\"}} className=\\\"d-inline p-0 text-dark\\\" to=\\\"#\\\">Sign Up</CDBLink></p>\\n          </CDBCardBody>\\n        </CDBCard>\\n            </div>\\n        </div>\\n    );\\n}\\n\\n\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Sign In\"), mdx(Link, {\n    to: \"/product/contrast-pro\",\n    mdxType: \"Link\"\n  }, mdx(\"span\", {\n    className: \"badge badge-lg badge-pro\"\n  }, \"Pro Component\")), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://imgur.com/FZtgZy4.png\",\n    \"alt\": \"hero\"\n  }))), mdx(Link, {\n    style: {\n      marginLeft: \"18rem\"\n    },\n    to: \"https://cdbadminpro.netlify.app/signin\",\n    mdxType: \"Link\"\n  }, mdx(CDBBadge, {\n    borderType: \"pill\",\n    size: \"large\",\n    className: \"badge-pro\",\n    mdxType: \"CDBBadge\"\n  }, \"Live Preview\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from 'react';\\nimport {\\n  CDBLink,\\n  CDBIcon,\\n  CDBCard,\\n  CDBBtn,\\n  CDBInput,\\n  CDBCardBody,\\n  CDBNavbar,\\n  CDBNavBrand } from \\\"cdbreact\\\";\\n\\nexport const SignIn = () => {\\n\\n    return(\\n        <div className=\\\"signIn\\\">\\n            <div className=\\\"position-relative\\\">\\n        <img alt=\\\"Background\\\" src=\\\"/img/pages/signIn.png\\\" className=\\\"image\\\"/>\\n      </div>\\n      <div className=\\\"body\\\">\\n        <CDBNavbar className=\\\"navigation bg-transparent\\\" light expand=\\\"md\\\" scrolling>\\n          <CDBNavBrand href=\\\"/\\\" className=\\\"d-flex align-items-center\\\">\\n            <img alt=\\\"logo\\\" src=\\\"/img/pages/logo.png\\\" width=\\\"25px\\\"/>\\n            <span className=\\\"ml-3 h4 my-0 font-weight-bold\\\">Devwares</span>\\n          </CDBNavBrand>\\n        </CDBNavbar>\\n        <CDBCard className=\\\"shadow-lg form\\\">\\n          <CDBCardBody className=\\\"mx-auto py-5 w-75\\\" style={{minWidth:\\\"280px\\\"}}>\\n            <div className=\\\"mt-4 mb-5\\\">\\n              <p className=\\\"h4 font-weight-bold\\\">Sign in</p>\\n            </div>\\n            <label htmlFor=\\\"defaultRegisterUsername\\\" className=\\\"text-muted m-0\\\">\\n              Username\\n            </label>\\n            <CDBInput id=\\\"defaultRegisterUsername\\\" background hint=\\\"Username\\\" className=\\\"mt-n3\\\" type=\\\"text\\\" />\\n            <label htmlFor=\\\"defaultRegisterPassword\\\" className=\\\"text-muted m-0\\\">\\n              Password\\n            </label>\\n            <CDBInput id=\\\"defaultRegisterPassword\\\" background hint=\\\"Password\\\" className=\\\"mt-n3\\\" type=\\\"password\\\"/>\\n            <CDBLink style={{fontWeight:\\\"600\\\"}} className=\\\"d-inline p-0 text-dark\\\" to=\\\"#\\\">Forgot Password?</CDBLink>\\n            <CDBBtn\\n              color=\\\"dark\\\"\\n              className=\\\"btn-block w-100 mb-3 mt-5\\\" >\\n                Sign in\\n            </CDBBtn>\\n            <div className=\\\"d-flex align-items-center\\\">\\n              <span style={{border:\\\"0.5px solid black\\\", width:\\\"45%\\\"}}/>\\n              <span className=\\\"text-center\\\" style={{width:\\\"10%\\\"}}>OR</span>\\n              <span style={{border:\\\"0.5px solid black\\\", width:\\\"45%\\\"}}/>\\n            </div>\\n            <div className=\\\"row my-3 d-flex justify-content-center\\\">\\n              <CDBBtn\\n                size=\\\"sm\\\"\\n                flat\\n                color=\\\"dark\\\"\\n              >\\n                <CDBIcon fab icon=\\\"facebook-f\\\" />\\n              </CDBBtn>\\n              <CDBBtn\\n                size=\\\"sm\\\"\\n                color=\\\"dark\\\"\\n                flat\\n                className=\\\"mx-2\\\"\\n              >\\n                <CDBIcon fab icon=\\\"twitter\\\" />\\n              </CDBBtn>\\n              <CDBBtn\\n                size=\\\"sm\\\"\\n                flat\\n                color=\\\"dark\\\"\\n              >\\n                <CDBIcon fab icon=\\\"google-plus-g\\\"/>\\n              </CDBBtn>\\n            </div>\\n            <p className=\\\"text-muted text-center\\\">Don't have an Account? <CDBLink style={{fontWeight:\\\"600\\\"}} className=\\\"d-inline p-0 text-dark\\\" to=\\\"#\\\">Sign Up</CDBLink></p>\\n          </CDBCardBody>\\n        </CDBCard>\\n            </div>\\n        </div>\\n    );\\n}\\n\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Sign In 2\"), mdx(Link, {\n    to: \"/product/contrast-pro\",\n    mdxType: \"Link\"\n  }, mdx(\"span\", {\n    className: \"badge badge-lg badge-pro\"\n  }, \"Pro Component\")), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://imgur.com/rdBqI3Z.png\",\n    \"alt\": \"hero\"\n  }))), mdx(Link, {\n    style: {\n      marginLeft: \"18rem\"\n    },\n    to: \"https://cdbadminpro.netlify.app/signin2\",\n    mdxType: \"Link\"\n  }, mdx(CDBBadge, {\n    borderType: \"pill\",\n    size: \"large\",\n    className: \"badge-pro\",\n    mdxType: \"CDBBadge\"\n  }, \"Live Preview\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from 'react';\\nimport {\\n  CDBLink,\\n  CDBIcon,\\n  CDBCard,\\n  CDBBtn,\\n  CDBInput,\\n  CDBCardBody,\\n  CDBNavbar,\\n  CDBNavBrand } from \\\"cdbreact\\\";\\n\\nexport const SignIn2 = () => {\\n    return(\\n        <div className=\\\"signIn2\\\">\\n            <div className=\\\"position-relative\\\">\\n        <img alt=\\\"Background\\\" src=\\\"/img/pages/signIn.png\\\" className=\\\"image\\\"/>\\n      </div>\\n      <div className=\\\"body\\\">\\n        <CDBNavbar className=\\\"navigation bg-transparent\\\" light expand=\\\"md\\\" scrolling>\\n          <CDBNavBrand href=\\\"/\\\" className=\\\"d-flex align-items-center\\\">\\n            <img alt=\\\"logo\\\" src=\\\"/img/pages/logo.png\\\" width=\\\"25px\\\"/>\\n            <span className=\\\"ml-3 h5 my-0 font-weight-bold\\\">Devwares</span>\\n          </CDBNavBrand>\\n        </CDBNavbar>\\n        <CDBCard className=\\\"form\\\">\\n          <CDBCardBody className=\\\"form-body\\\" style={{minWidth:\\\"300px\\\"}}>\\n            <div className=\\\"mt-4 mb-5\\\">\\n              <p className=\\\"h3 font-weight-bold\\\">Sign in</p>\\n            </div>\\n            <label htmlFor=\\\"defaultRegisterUsername\\\" className=\\\"text-muted m-0\\\">\\n              Username\\n            </label>\\n            <CDBInput id=\\\"defaultRegisterUsername\\\" className=\\\"mt-n3\\\" background hint=\\\"Username\\\" type=\\\"text\\\" />\\n            <label htmlFor=\\\"defaultRegisterPassword\\\" className=\\\"text-muted m-0\\\">\\n              Password\\n            </label>\\n            <CDBInput id=\\\"defaultRegisterPassword\\\" className=\\\"mt-n3\\\" background hint=\\\"Password\\\" type=\\\"password\\\"/>\\n            <CDBLink style={{fontWeight:\\\"600\\\"}} className=\\\"d-inline p-0 text-dark\\\" to=\\\"#\\\">Forgot Password?</CDBLink>\\n            <CDBBtn\\n              color=\\\"dark\\\"\\n              className=\\\"btn-block w-100 mb-3 mt-5\\\" >\\n                Sign in\\n            </CDBBtn>\\n            <div className=\\\"d-flex align-items-center\\\">\\n              <span style={{border:\\\"0.5px solid black\\\", width:\\\"45%\\\"}}/>\\n              <span className=\\\"text-center\\\" style={{width:\\\"10%\\\"}}>OR</span>\\n              <span style={{border:\\\"0.5px solid black\\\", width:\\\"45%\\\"}}/>\\n            </div>\\n            <div className=\\\"row my-3 d-flex justify-content-center\\\">\\n              <CDBBtn\\n                size=\\\"sm\\\"\\n                flat\\n                color=\\\"dark\\\"\\n              >\\n                <CDBIcon fab icon=\\\"facebook-f\\\" />\\n              </CDBBtn>\\n              <CDBBtn\\n                size=\\\"sm\\\"\\n                color=\\\"dark\\\"\\n                flat\\n                className=\\\"mx-2\\\"\\n              >\\n                <CDBIcon fab icon=\\\"twitter\\\" />\\n              </CDBBtn>\\n              <CDBBtn\\n                size=\\\"sm\\\"\\n                flat\\n                color=\\\"dark\\\"\\n              >\\n                <CDBIcon fab icon=\\\"google-plus-g\\\"/>\\n              </CDBBtn>\\n            </div>\\n            <p className=\\\"text-muted text-center\\\">Don't have an Account? <CDBLink style={{fontWeight:\\\"600\\\"}} className=\\\"d-inline p-0 text-dark\\\" to=\\\"#\\\">Sign Up</CDBLink></p>\\n          </CDBCardBody>\\n        </CDBCard>\\n            </div>\\n        </div>\\n    );\\n}\\n\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Sign In 3\"), mdx(Link, {\n    to: \"/product/contrast-pro\",\n    mdxType: \"Link\"\n  }, mdx(\"span\", {\n    className: \"badge badge-lg badge-pro\"\n  }, \"Pro Component\")), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://imgur.com/qY1Jtsn.png\",\n    \"alt\": \"hero\"\n  }))), mdx(Link, {\n    style: {\n      marginLeft: \"18rem\"\n    },\n    to: \"https://cdbadminpro.netlify.app/signin3\",\n    mdxType: \"Link\"\n  }, mdx(CDBBadge, {\n    borderType: \"pill\",\n    size: \"large\",\n    className: \"badge-pro\",\n    mdxType: \"CDBBadge\"\n  }, \"Live Preview\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React, { Fragment } from 'react';\\nimport {\\n  CDBLink,\\n  CDBIcon,\\n  CDBCard,\\n  CDBBtn,\\n  CDBInput,\\n  CDBCardBody,\\n  CDBNavbar,\\n  CDBNavBrand,\\n  CDBContainer } from \\\"cdbreact\\\";\\n\\nexport const SignIn3 = () => {\\n    return(\\n        <CDBContainer>\\n            <CDBNavbar className=\\\"px-0 mx-auto bg-transparent\\\" style={{width:\\\"80%\\\"}} light expand=\\\"md\\\" scrolling>\\n        <CDBNavBrand href=\\\"/\\\" className=\\\"d-flex align-items-center\\\">\\n          <img alt=\\\"logo\\\" src=\\\"/img/pages/logo.png\\\" width=\\\"25px\\\"/>\\n          <span className=\\\"ml-3 h4 my-0 font-weight-bold\\\">Devwares</span>\\n        </CDBNavBrand>\\n      </CDBNavbar>\\n      <div className=\\\"d-flex align-items-center justify-content-center\\\">\\n        <CDBCard style={{width:\\\"80%\\\", maxWidth:\\\"375px\\\"}} className=\\\"border-0\\\">\\n          <CDBCardBody className=\\\"my-3 mx-auto p-0\\\">\\n            <div className=\\\"mt-4 mb-5\\\">\\n              <p className=\\\"h4 text-center font-weight-bold\\\">Sign In</p>\\n            </div>\\n            <div className=\\\"d-flex my-3\\\">\\n              <CDBBtn color=\\\"primary\\\" style={{width:\\\"80%\\\"}} className=\\\"mr-1\\\">\\n                <CDBIcon className=\\\"float-left mt-1\\\" fab icon=\\\"facebook-f\\\"/>\\n                Continue with facebook\\n              </CDBBtn>\\n              <CDBBtn color=\\\"info\\\" >\\n                <CDBIcon fab icon=\\\"twitter\\\"/>\\n              </CDBBtn>\\n            </div>\\n            <div className=\\\"d-flex align-items-center mb-3\\\">\\n              <span style={{border:\\\"0.5px solid black\\\", width:\\\"45%\\\"}}/>\\n              <span className=\\\"text-center\\\" style={{width:\\\"10%\\\"}}>OR</span>\\n              <span style={{border:\\\"0.5px solid black\\\", width:\\\"45%\\\"}}/>\\n            </div>\\n            <label htmlFor=\\\"defaultRegisterUsername\\\" className=\\\"text-muted m-0\\\">\\n              Username\\n            </label>\\n            <CDBInput id=\\\"defaultRegisterUsername\\\" className=\\\"mt-n3\\\" background hint=\\\"Username\\\" type=\\\"text\\\" />\\n            <label htmlFor=\\\"defaultRegisterPassword\\\" className=\\\"text-muted m-0\\\">\\n              Password\\n            </label>\\n            <CDBInput id=\\\"defaultRegisterPassword\\\" className=\\\"mt-n3\\\" background hint=\\\"Password\\\" type=\\\"password\\\"/>\\n            <CDBBtn\\n              color=\\\"dark\\\"\\n              className=\\\"btn-block w-100 mt-5\\\">\\n                Sign in\\n            </CDBBtn>\\n            <p className=\\\"text-muted text-center my-5\\\">Don't have an Account? <CDBLink style={{fontWeight:\\\"600\\\"}} className=\\\"d-inline p-0 text-dark\\\" to=\\\"#\\\">Sign in</CDBLink></p>\\n          </CDBCardBody>\\n        </CDBCard>\\n            </div>\\n        </CDBContainer>\\n    );\\n}\\n\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Sign Up\"), mdx(Link, {\n    to: \"/product/contrast-pro\",\n    mdxType: \"Link\"\n  }, mdx(\"span\", {\n    className: \"badge badge-lg badge-pro\"\n  }, \"Pro Component\")), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://imgur.com/NiRPscI.png\",\n    \"alt\": \"hero\"\n  }))), mdx(Link, {\n    style: {\n      marginLeft: \"18rem\"\n    },\n    to: \"https://cdbadminpro.netlify.app/signup\",\n    mdxType: \"Link\"\n  }, mdx(CDBBadge, {\n    borderType: \"pill\",\n    size: \"large\",\n    className: \"badge-pro\",\n    mdxType: \"CDBBadge\"\n  }, \"Live Preview\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from 'react';\\nimport {\\n  CDBLink,\\n  CDBIcon,\\n  CDBCard,\\n  CDBBtn,\\n  CDBInput,\\n  CDBCardBody,\\n  CDBNavbar,\\n  CDBNavBrand } from \\\"cdbreact\\\";\\nimport \\\"./SignUp.css\\\"\\n\\nexport const SignUp = () => {\\n\\n    return(\\n        <div className=\\\"signUp\\\">\\n            <div className=\\\"position-relative\\\">\\n        <img alt=\\\"Background\\\" src=\\\"/img/pages/signIn.png\\\" className=\\\"image\\\"/>\\n      </div>\\n\\n      <div className=\\\"body\\\">\\n        <CDBNavbar className=\\\"navigation bg-transparent\\\" light expand=\\\"md\\\" scrolling>\\n          <CDBNavBrand href=\\\"/\\\" className=\\\"d-flex align-items-center\\\">\\n            <img alt=\\\"logo\\\" src=\\\"/img/pages/logo.png\\\" width=\\\"25px\\\"/>\\n            <span className=\\\"ml-3 h4 my-0 font-weight-bold\\\">Devwares</span>\\n          </CDBNavBrand>\\n        </CDBNavbar>\\n        <CDBCard className=\\\"shadow-lg form\\\">\\n          <CDBCardBody className=\\\"mx-auto py-5 w-75\\\" style={{minWidth:\\\"250px\\\"}}>\\n            <div className=\\\"mt-4 mb-5\\\">\\n              <p className=\\\"h4 font-weight-bold\\\">Sign up</p>\\n            </div>\\n            <label htmlFor=\\\"defaultRegisterUsername\\\" className=\\\"text-muted m-0\\\">\\n              Username\\n            </label>\\n            <CDBInput id=\\\"defaultRegisterUsername\\\" background hint=\\\"Username\\\" className=\\\"mt-n3\\\" type=\\\"text\\\" />\\n            <label htmlFor=\\\"defaultRegisterPassword\\\" className=\\\"text-muted m-0\\\">\\n              Password\\n            </label>\\n            <CDBInput id=\\\"defaultRegisterPassword\\\" background hint=\\\"Password\\\" className=\\\"mt-n3\\\" type=\\\"password\\\"/>\\n            <CDBBtn\\n              color=\\\"dark\\\"\\n              className=\\\"btn-block w-100 mb-3 mt-5\\\" >\\n                Sign up\\n            </CDBBtn>\\n            <p className=\\\"text-muted text-center\\\">By Clicking sign up, you agree to the Contrast <CDBLink style={{fontWeight:\\\"600\\\"}} className=\\\"d-inline p-0 text-dark\\\" to=\\\"#\\\">terms and conditions</CDBLink></p>\\n            <div className=\\\"d-flex align-items-center\\\">\\n                <span style={{border:\\\"0.5px solid black\\\", width:\\\"45%\\\"}}/>\\n                <span className=\\\"text-center\\\" style={{width:\\\"10%\\\"}}>OR</span>\\n                <span style={{border:\\\"0.5px solid black\\\", width:\\\"45%\\\"}}/>\\n            </div>\\n            <div className=\\\"row my-3 d-flex justify-content-center\\\">\\n              <CDBBtn\\n                size=\\\"sm\\\"\\n                flat\\n                color=\\\"dark\\\"\\n              >\\n                <CDBIcon fab icon=\\\"facebook-f\\\" />\\n              </CDBBtn>\\n              <CDBBtn\\n                size=\\\"sm\\\"\\n                color=\\\"dark\\\"\\n                flat\\n                className=\\\"mx-2\\\"\\n              >\\n                <CDBIcon fab icon=\\\"twitter\\\" />\\n              </CDBBtn>\\n              <CDBBtn\\n                size=\\\"sm\\\"\\n                flat\\n                color=\\\"dark\\\"\\n              >\\n                <CDBIcon fab icon=\\\"google-plus-g\\\"/>\\n              </CDBBtn>\\n            </div>\\n            <p className=\\\"text-muted text-center\\\">Have an Account? <CDBLink style={{fontWeight:\\\"600\\\"}} className=\\\"d-inline p-0 text-dark\\\" to=\\\"#\\\">Sign In</CDBLink></p>\\n          </CDBCardBody>\\n        </CDBCard>\\n            </div>\\n        </div>\\n    );\\n}\\n\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Sign Up 2\"), mdx(Link, {\n    to: \"/product/contrast-pro\",\n    mdxType: \"Link\"\n  }, mdx(\"span\", {\n    className: \"badge badge-lg badge-pro\"\n  }, \"Pro Component\")), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://imgur.com/4TfrjUk.png\",\n    \"alt\": \"hero\"\n  }))), mdx(Link, {\n    style: {\n      marginLeft: \"18rem\"\n    },\n    to: \"https://cdbadminpro.netlify.app/signup2\",\n    mdxType: \"Link\"\n  }, mdx(CDBBadge, {\n    borderType: \"pill\",\n    size: \"large\",\n    className: \"badge-pro\",\n    mdxType: \"CDBBadge\"\n  }, \"Live Preview\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from 'react';\\nimport {\\n  CDBLink,\\n  CDBIcon,\\n  CDBCard,\\n  CDBBtn,\\n  CDBInput,\\n  CDBCardBody,\\n  CDBNavbar,\\n  CDBNavBrand } from \\\"cdbreact\\\";\\nimport \\\"./SignUp2.css\\\";\\n\\nexport const SignUp2 = () => {\\n    return(\\n        <div className=\\\"signUp2\\\">\\n            <div className=\\\"position-relative\\\">\\n        <img alt=\\\"Background\\\" src=\\\"/img/pages/signIn.png\\\" className=\\\"image\\\"/>\\n      </div>\\n      <div className=\\\"body\\\">\\n        <CDBNavbar className=\\\"navigation bg-transparent\\\" light expand=\\\"md\\\" scrolling>\\n          <CDBNavBrand href=\\\"/\\\" className=\\\"d-flex align-items-center\\\">\\n            <img alt=\\\"logo\\\" src=\\\"/img/pages/logo.png\\\" width=\\\"25px\\\"/>\\n            <span className=\\\"ml-3 h5 my-0 font-weight-bold\\\">Devwares</span>\\n          </CDBNavBrand>\\n        </CDBNavbar>\\n        <CDBCard className=\\\"form\\\">\\n          <CDBCardBody className=\\\"form-body\\\" style={{minWidth:\\\"300px\\\"}}>\\n            <div className=\\\"mt-4 mb-5\\\">\\n              <p className=\\\"h3 font-weight-bold\\\">Sign Up</p>\\n            </div>\\n            <label htmlFor=\\\"defaultRegisterUsername\\\" className=\\\"text-muted m-0\\\">\\n              Username\\n            </label>\\n            <CDBInput id=\\\"defaultRegisterUsername\\\" className=\\\"mt-n3\\\" background hint=\\\"Username\\\" type=\\\"text\\\" />\\n            <label htmlFor=\\\"defaultRegisterPassword\\\" className=\\\"text-muted m-0\\\">\\n              Password\\n            </label>\\n            <CDBInput id=\\\"defaultRegisterPassword\\\" className=\\\"mt-n3\\\" background hint=\\\"Password\\\" type=\\\"password\\\"/>\\n            <CDBBtn\\n              color=\\\"dark\\\"\\n              className=\\\"btn-block w-100 mb-3 mt-5\\\" >\\n                Sign up\\n            </CDBBtn>\\n            <p className=\\\"text-muted text-center\\\">By Clicking sign up, you agree to the Contrast <CDBLink style={{fontWeight:\\\"600\\\"}} className=\\\"d-inline p-0 text-dark\\\" to=\\\"#\\\">terms and conditions</CDBLink></p>\\n            <div className=\\\"d-flex align-items-center\\\">\\n              <span style={{border:\\\"0.5px solid black\\\", width:\\\"45%\\\"}}/>\\n              <span className=\\\"text-center\\\" style={{width:\\\"10%\\\"}}>OR</span>\\n              <span style={{border:\\\"0.5px solid black\\\", width:\\\"45%\\\"}}/>\\n            </div>\\n            <div className=\\\"row my-3 d-flex justify-content-center\\\">\\n              <CDBBtn\\n                size=\\\"sm\\\"\\n                flat\\n                color=\\\"dark\\\"\\n              >\\n                <CDBIcon fab icon=\\\"facebook-f\\\" />\\n              </CDBBtn>\\n              <CDBBtn\\n                size=\\\"sm\\\"\\n                color=\\\"dark\\\"\\n                flat\\n                className=\\\"mx-2\\\"\\n              >\\n                <CDBIcon fab icon=\\\"twitter\\\" />\\n              </CDBBtn>\\n              <CDBBtn\\n                size=\\\"sm\\\"\\n                flat\\n                color=\\\"dark\\\"\\n              >\\n                <CDBIcon fab icon=\\\"google-plus-g\\\"/>\\n              </CDBBtn>\\n            </div>\\n            <p className=\\\"text-muted text-center\\\">Have an Account? <CDBLink style={{fontWeight:\\\"600\\\"}} className=\\\"d-inline p-0 text-dark\\\" to=\\\"#\\\">Sign Up</CDBLink></p>\\n          </CDBCardBody>\\n        </CDBCard>\\n            </div>\\n        </div>\\n    );\\n}\\n\\n\")));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#hero","title":"Hero","items":[{"url":"#hero-1","title":"Hero"},{"url":"#hero-2","title":"Hero 2"},{"url":"#hero-3","title":"Hero 3"},{"url":"#hero-4","title":"Hero 4"},{"url":"#hero-5","title":"Hero 5"}]},{"url":"#forms","title":"Forms","items":[{"url":"#create-account","title":"Create Account"},{"url":"#forgot-password","title":"Forgot Password"},{"url":"#forgot-password-2","title":"Forgot Password 2"},{"url":"#forgot-password-popup","title":"Forgot Password Popup"},{"url":"#sign-in","title":"Sign In"},{"url":"#sign-in-2","title":"Sign In 2"},{"url":"#sign-in-3","title":"Sign In 3"},{"url":"#sign-up","title":"Sign Up"},{"url":"#sign-up-2","title":"Sign Up 2"}]}]},"parent":{"__typename":"File","relativePath":"contrast/react/custom_pages.mdx"},"frontmatter":{"metaTitle":"Contrast Bootstrap React Components","metaDescription":"These are Contrast Bootstrap React Custom Pages "}},"allMdx":{"edges":[{"node":{"fields":{"slug":"/contrast/angular/Installation","title":"Installation"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation","title":"Navigation"}}},{"node":{"fields":{"slug":"/contrast/angular/components","title":"Components"}}},{"node":{"fields":{"slug":"/contrast/angular/index","title":"Getting Started"}}},{"node":{"fields":{"slug":"/contrast/angular/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/angular/sections","title":"Sections"}}},{"node":{"fields":{"slug":"/contrast/javascript/components","title":"Components"}}},{"node":{"fields":{"slug":"/contrast/angular/widgets","title":"Widgets"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation","title":"Navigation"}}},{"node":{"fields":{"slug":"/contrast/javascript/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/javascript/sections","title":"Sections"}}},{"node":{"fields":{"slug":"/contrast/react/Installation","title":"Installation"}}},{"node":{"fields":{"slug":"/contrast/react/components","title":"Components"}}},{"node":{"fields":{"slug":"/contrast/react/index","title":"Getting Started"}}},{"node":{"fields":{"slug":"/contrast/angular/forms","title":"Forms"}}},{"node":{"fields":{"slug":"/contrast/react/sections","title":"Sections"}}},{"node":{"fields":{"slug":"/contrast/react/navigation","title":"Navigation"}}},{"node":{"fields":{"slug":"/contrast/react/chart","title":"Charts"}}},{"node":{"fields":{"slug":"/contrast/react/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/angular/components/animations","title":"Animation"}}},{"node":{"fields":{"slug":"/contrast/angular/components/alert","title":"Alert"}}},{"node":{"fields":{"slug":"/contrast/react/custom_pages","title":"Custom Pages"}}},{"node":{"fields":{"slug":"/contrast/angular/components/autocomplete","title":"Autocomplete"}}},{"node":{"fields":{"slug":"/contrast/react/widgets","title":"Widgets"}}},{"node":{"fields":{"slug":"/contrast/angular/components/badge","title":"Badges"}}},{"node":{"fields":{"slug":"/contrast/angular/components/box","title":"Box"}}},{"node":{"fields":{"slug":"/contrast/angular/components/accordion","title":"Accordion"}}},{"node":{"fields":{"slug":"/contrast/angular/components/breadcrumb","title":"Breadcrumb"}}},{"node":{"fields":{"slug":"/contrast/angular/components/buttonGroup","title":"ButtonGroup"}}},{"node":{"fields":{"slug":"/contrast/angular/components/buttonToolbar","title":"ButtonToolbar"}}},{"node":{"fields":{"slug":"/contrast/angular/components/checkbox","title":"Checkbox"}}},{"node":{"fields":{"slug":"/contrast/angular/components/buttons","title":"Button"}}},{"node":{"fields":{"slug":"/contrast/angular/components/dropdown","title":"DropDown"}}},{"node":{"fields":{"slug":"/contrast/angular/components/collapse","title":"Collapse"}}},{"node":{"fields":{"slug":"/contrast/angular/components/icon","title":"Icon"}}},{"node":{"fields":{"slug":"/contrast/angular/components/iframe","title":"Iframe"}}},{"node":{"fields":{"slug":"/contrast/angular/components/inputgroup","title":"InputGroup"}}},{"node":{"fields":{"slug":"/contrast/angular/components/footer","title":"Footer"}}},{"node":{"fields":{"slug":"/contrast/angular/components/input","title":"Input"}}},{"node":{"fields":{"slug":"/contrast/angular/components/notification","title":"Notification"}}},{"node":{"fields":{"slug":"/contrast/angular/components/card","title":"Card"}}},{"node":{"fields":{"slug":"/contrast/angular/components/pane","title":"Pane"}}},{"node":{"fields":{"slug":"/contrast/angular/components/modal","title":"Modal"}}},{"node":{"fields":{"slug":"/contrast/angular/components/radio","title":"Radio"}}},{"node":{"fields":{"slug":"/contrast/angular/components/progress","title":"Progress"}}},{"node":{"fields":{"slug":"/contrast/angular/components/rating","title":"Rating"}}},{"node":{"fields":{"slug":"/contrast/angular/components/select","title":"Select"}}},{"node":{"fields":{"slug":"/contrast/angular/components/select2","title":"Select 2"}}},{"node":{"fields":{"slug":"/contrast/angular/components/slider","title":"Slider"}}},{"node":{"fields":{"slug":"/contrast/angular/components/spinner","title":"Spinner"}}},{"node":{"fields":{"slug":"/contrast/angular/components/multiselect","title":"Multiselect"}}},{"node":{"fields":{"slug":"/contrast/angular/components/switch","title":"Switch"}}},{"node":{"fields":{"slug":"/contrast/angular/components/panels","title":"Panel"}}},{"node":{"fields":{"slug":"/contrast/angular/components/stepper","title":"Stepper"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/pagination","title":"Pagination"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/sidebar","title":"Sidebar2"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/navbar","title":"Navbar"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/sidebar2","title":"Sidebar"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/tabs","title":"Tab"}}},{"node":{"fields":{"slug":"/contrast/angular/sections/timepicker","title":"TimePicker"}}},{"node":{"fields":{"slug":"/contrast/angular/table/datatables","title":"DataTable"}}},{"node":{"fields":{"slug":"/contrast/angular/table/fixed_datatables","title":"Fixed DataTable"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/accordion","title":"Accordion"}}},{"node":{"fields":{"slug":"/contrast/angular/table/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/alert","title":"Alert"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/animations","title":"Animation"}}},{"node":{"fields":{"slug":"/contrast/angular/table/editabletable","title":"EditableTable"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/autocomplete","title":"Autocomplete"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/badge","title":"Badges"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/breadcrumb","title":"Breadcrumb"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/box","title":"Box"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/buttonToolbar","title":"ButtonToolbar"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/buttonGroup","title":"ButtonGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/buttons","title":"Button"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/checkbox","title":"Checkbox"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/carousel","title":"Carousel"}}},{"node":{"fields":{"slug":"/contrast/angular/components/mask","title":"Mask"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/collapse","title":"Collapse"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/datepicker","title":"DatePicker"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/datatables","title":"DataTable"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/dropdown","title":"DropDown"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/icon","title":"Icon"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/footer","title":"Footer"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/iframe","title":"Iframe"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/input","title":"Input"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/listgroup","title":"LIstGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/forms","title":"Forms"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/mask","title":"Mask"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/card","title":"Card"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/multiselect","title":"Multiselect"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/modal","title":"Modal"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/inputgroup","title":"InputGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/pane","title":"Pane"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/notification","title":"Notification"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/panels","title":"Panel"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/progress","title":"Progress"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/popover","title":"PopOver"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/radio","title":"Radio"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/rating","title":"Rating"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/select","title":"Select"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/spinner","title":"Spinner"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/slider","title":"Slider"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/select2","title":"Select 2"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/switch","title":"Switch"}}},{"node":{"fields":{"slug":"/contrast/angular/components/listgroup","title":"LIstGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/stepper","title":"Stepper"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/pagination","title":"Pagination"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/navbar","title":"Navbar"}}},{"node":{"fields":{"slug":"/contrast/javascript/sections/timepicker","title":"TimePicker"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/sidebar","title":"Sidebar2"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/tabs","title":"Tab"}}},{"node":{"fields":{"slug":"/contrast/react/components/alert","title":"React Alert"}}},{"node":{"fields":{"slug":"/contrast/react/components/accordion","title":"Accordion"}}},{"node":{"fields":{"slug":"/contrast/react/components/animations","title":"Animation"}}},{"node":{"fields":{"slug":"/contrast/react/components/autocomplete","title":"Autocomplete"}}},{"node":{"fields":{"slug":"/contrast/react/components/box","title":"Box"}}},{"node":{"fields":{"slug":"/contrast/react/components/badge","title":"Badges"}}},{"node":{"fields":{"slug":"/contrast/react/components/breadcrumb","title":"Breadcrumb"}}},{"node":{"fields":{"slug":"/contrast/react/components/buttonToolbar","title":"ButtonToolbar"}}},{"node":{"fields":{"slug":"/contrast/react/components/buttonGroup","title":"ButtonGroup"}}},{"node":{"fields":{"slug":"/contrast/react/components/carousel","title":"Carousel"}}},{"node":{"fields":{"slug":"/contrast/react/components/checkbox","title":"Checkbox"}}},{"node":{"fields":{"slug":"/contrast/react/components/buttons","title":"Button"}}},{"node":{"fields":{"slug":"/contrast/react/components/collapse","title":"Collapse"}}},{"node":{"fields":{"slug":"/contrast/react/components/icon","title":"Icon"}}},{"node":{"fields":{"slug":"/contrast/react/components/dropdown","title":"DropDown"}}},{"node":{"fields":{"slug":"/contrast/react/components/input","title":"Input"}}},{"node":{"fields":{"slug":"/contrast/react/components/inputgroup","title":"InputGroup"}}},{"node":{"fields":{"slug":"/contrast/react/components/iframe","title":"Iframe"}}},{"node":{"fields":{"slug":"/contrast/react/components/card","title":"Card"}}},{"node":{"fields":{"slug":"/contrast/react/components/footer","title":"Footer"}}},{"node":{"fields":{"slug":"/contrast/react/components/mask","title":"Mask"}}},{"node":{"fields":{"slug":"/contrast/react/components/multiselect","title":"Multiselect"}}},{"node":{"fields":{"slug":"/contrast/react/components/notification","title":"Notification"}}},{"node":{"fields":{"slug":"/contrast/react/components/listgroup","title":"LIstGroup"}}},{"node":{"fields":{"slug":"/contrast/react/components/pane","title":"Pane"}}},{"node":{"fields":{"slug":"/contrast/react/components/progress","title":"Progress"}}},{"node":{"fields":{"slug":"/contrast/react/components/rating","title":"Rating"}}},{"node":{"fields":{"slug":"/contrast/react/components/modal","title":"Modal"}}},{"node":{"fields":{"slug":"/contrast/react/components/select","title":"Select"}}},{"node":{"fields":{"slug":"/contrast/react/components/radio","title":"Radio"}}},{"node":{"fields":{"slug":"/contrast/react/components/slider","title":"Slider"}}},{"node":{"fields":{"slug":"/contrast/react/components/panels","title":"Panel"}}},{"node":{"fields":{"slug":"/contrast/react/components/select2","title":"Select 2"}}},{"node":{"fields":{"slug":"/contrast/react/components/smoothscroll","title":"SmoothScroll"}}},{"node":{"fields":{"slug":"/contrast/react/components/spinner","title":"Spinner"}}},{"node":{"fields":{"slug":"/contrast/react/components/switch","title":"Switch"}}},{"node":{"fields":{"slug":"/contrast/react/components/stepper","title":"Stepper"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/navbar","title":"Navbar"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/pagination","title":"Pagination"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/sidebar","title":"Sidebar"}}},{"node":{"fields":{"slug":"/contrast/react/sections/fileuploader","title":"FileUploader"}}},{"node":{"fields":{"slug":"/contrast/react/sections/datepicker","title":"DatePicker"}}},{"node":{"fields":{"slug":"/contrast/react/sections/timepicker","title":"TimePicker"}}},{"node":{"fields":{"slug":"/contrast/react/table/editabletable","title":"EditableTable"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/tabs","title":"Tab"}}},{"node":{"fields":{"slug":"/contrast/react/table/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/react/forms","title":"Forms"}}},{"node":{"fields":{"slug":"/contrast/react/table/datatables","title":"DataTable"}}},{"node":{"fields":{"slug":"/bootstrap-5-major-changes","title":"Major changes to bootstrap 5"}}},{"node":{"fields":{"slug":"/bootstrap-5-navbar-using-contrast","title":"How To Create A Beautiful Navbar Using Bootstrap And Contrast"}}},{"node":{"fields":{"slug":"/using-bootstrap-in-react","title":"How to use Bootstrap in React Using a React Library"}}}]}},"pageContext":{"id":"13df86f6-f438-5afa-a935-45f8e93e139b"}},"staticQueryHashes":["2619113677","2619113677","2619113677","3706406642","3706406642","417421954","417421954"]}