---
title: Dark Hero Section
category: Marketing
paid: false
isActive: true
ltr: {"preview":"function App() {\n\n  // Replace javascript:void(0) path with your path\n  const navigation = [\n      { title: \"Customers\", path: \"javascript:void(0)\" },\n      { title: \"Careers\", path: \"javascript:void(0)\" },\n  ]\n  \n    return (\n        <div className=\"bg-gray-900\">\n            <header>\n                <nav className=\"items-center pt-5 px-4 mx-auto max-w-screen-xl sm:px-8 sm:flex sm:space-x-6\">\n                    <a href=\"javascript:void(0)\">\n                        <img\n                            src=\"https://www.farmui.com/images/logo.svg\" \n                            width={120} \n                            height={50}\n                            alt=\"FarmUI logo\"\n                        />\n                    </a>\n                    <ul className=\"py-4 flex-1 items-center flex space-x-3 sm:space-x-6 sm:justify-end\">\n                        {\n                            navigation.map((item, idx) => (\n                                <li className=\"text-gray-200\" key={idx}>\n                                    <a href={item.path}>{item.title}</a>\n                                </li>\n                            ))\n                        }\n                        <li>\n                            <a href=\"javascript:void(0)\" className=\"flex items-center text-gray-200\">\n                                Log In\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 ml-2\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                                    <path fillRule=\"evenodd\" d=\"M3 3a1 1 0 011 1v12a1 1 0 11-2 0V4a1 1 0 011-1zm7.707 3.293a1 1 0 010 1.414L9.414 9H17a1 1 0 110 2H9.414l1.293 1.293a1 1 0 01-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0z\" clipRule=\"evenodd\" />\n                                </svg>\n                            </a>\n                        </li>\n                    </ul>\n                </nav>\n            </header>\n            <section className=\"mt-24 mx-auto max-w-screen-xl pb-12 px-4 items-center lg:flex md:px-8\">\n                <div className=\"space-y-4 flex-1 sm:text-center lg:text-left\">\n                    <h1 className=\"text-white font-bold text-4xl xl:text-5xl\">\n                        One page Template for\n                         <span className=\"text-indigo-400\"> Digital agency</span>\n                    </h1>\n                    <p className=\"text-gray-300 max-w-xl leading-relaxed sm:mx-auto lg:ml-0\">\n                        It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum\n                    </p>\n                    <div className=\"pt-10 items-center justify-center space-y-3 sm:space-x-6 sm:space-y-0 sm:flex lg:justify-start\">\n                        <a href=\"javascript:void(0)\" className=\"px-7 py-3 w-full bg-white text-gray-800 text-center rounded-md shadow-md block sm:w-auto\">\n                            Get started\n                        </a>\n                        <a href=\"javascript:void(0)\" className=\"px-7 py-3 w-full bg-gray-700 text-gray-200 text-center rounded-md block sm:w-auto\">\n                            Try it out\n                        </a>\n                    </div>\n                </div>\n                <div className=\"flex-1 text-center mt-7 lg:mt-0 lg:ml-3\">\n                    <img src=\"https://i.postimg.cc/HxHyt53c/undraw-heatmap-uyye.png\" className=\"w-full mx-auto sm:w-10/12  lg:w-full\" />\n                </div>\n            </section>\n        </div>\n    )\n}","react":{"jsxTail":[{"code":"export default () => {\n\n  // Replace javascript:void(0) path with your path\n  const navigation = [\n      { title: \"Customers\", path: \"javascript:void(0)\" },\n      { title: \"Careers\", path: \"javascript:void(0)\" },\n  ]\n  \n    return (\n        <div className=\"bg-gray-900\">\n            <header>\n                <nav className=\"items-center pt-5 px-4 mx-auto max-w-screen-xl sm:px-8 sm:flex sm:space-x-6\">\n                    <a href=\"javascript:void(0)\">\n                        <img\n                            src=\"https://www.farmui.com/images/logo.svg\" \n                            width={120} \n                            height={50}\n                            alt=\"FarmUI logo\"\n                        />\n                    </a>\n                    <ul className=\"py-4 flex-1 items-center flex space-x-3 sm:space-x-6 sm:justify-end\">\n                        {\n                            navigation.map((item, idx) => (\n                                <li className=\"text-gray-200\" key={idx}>\n                                    <a href={item.path}>{item.title}</a>\n                                </li>\n                            ))\n                        }\n                        <li>\n                            <a href=\"javascript:void(0)\" className=\"flex items-center text-gray-200\">\n                                Log In\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-5 w-5 ml-2\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                                    <path fillRule=\"evenodd\" d=\"M3 3a1 1 0 011 1v12a1 1 0 11-2 0V4a1 1 0 011-1zm7.707 3.293a1 1 0 010 1.414L9.414 9H17a1 1 0 110 2H9.414l1.293 1.293a1 1 0 01-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0z\" clipRule=\"evenodd\" />\n                                </svg>\n                            </a>\n                        </li>\n                    </ul>\n                </nav>\n            </header>\n            <section className=\"mt-24 mx-auto max-w-screen-xl pb-12 px-4 items-center lg:flex md:px-8\">\n                <div className=\"space-y-4 flex-1 sm:text-center lg:text-left\">\n                    <h1 className=\"text-white font-bold text-4xl xl:text-5xl\">\n                        One page Template for\n                         <span className=\"text-indigo-400\"> Digital agency</span>\n                    </h1>\n                    <p className=\"text-gray-300 max-w-xl leading-relaxed sm:mx-auto lg:ml-0\">\n                        It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum\n                    </p>\n                    <div className=\"pt-10 items-center justify-center space-y-3 sm:space-x-6 sm:space-y-0 sm:flex lg:justify-start\">\n                        <a href=\"javascript:void(0)\" className=\"px-7 py-3 w-full bg-white text-gray-800 text-center rounded-md shadow-md block sm:w-auto\">\n                            Get started\n                        </a>\n                        <a href=\"javascript:void(0)\" className=\"px-7 py-3 w-full bg-gray-700 text-gray-200 text-center rounded-md block sm:w-auto\">\n                            Try it out\n                        </a>\n                    </div>\n                </div>\n                <div className=\"flex-1 text-center mt-7 lg:mt-0 lg:ml-3\">\n                    <img src=\"https://i.postimg.cc/HxHyt53c/undraw-heatmap-uyye.png\" className=\"w-full mx-auto sm:w-10/12  lg:w-full\" />\n                </div>\n            </section>\n        </div>\n    )\n}\n","label":"App.jsx"}],"jsxCss":[{"label":"App.jsx","code":"export default () => {\n\n  // Replace javascript:void(0) path with your path\n  const navigation = [\n      { title: \"Customers\", path: \"javascript:void(0)\" },\n      { title: \"Careers\", path: \"javascript:void(0)\" },\n  ]\n  \n    return (\n        <div className=\"hero-dark-container\">\n            <header className=\"hero-dark-header\">\n                <nav className=\"hero-nav\">\n                    <a href=\"javascript:void(0)\">\n                        <img\n                            src=\"https://www.farmui.com/images/logo.svg\" \n                            width={120} \n                            height={50}\n                            alt=\"FarmUI logo\"\n                        />\n                    </a>\n                    <ul className=\"nav-items\">\n                        {\n                            navigation.map((item, idx) => (\n                                <li key={idx}>\n                                    <a href={item.path}>{item.title}</a>\n                                </li>\n                            ))\n                        }\n                        <li>\n                            <a href=\"javascript:void(0)\" className=\"last-item\">\n                                Log In\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                                    <path fillRule=\"evenodd\" d=\"M3 3a1 1 0 011 1v12a1 1 0 11-2 0V4a1 1 0 011-1zm7.707 3.293a1 1 0 010 1.414L9.414 9H17a1 1 0 110 2H9.414l1.293 1.293a1 1 0 01-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0z\" clipRule=\"evenodd\" />\n                                </svg>\n                            </a>\n                        </li>\n                    </ul>\n                </nav>\n            </header>\n            <section className=\"hero-dark\">\n                <div className=\"hero-details\">\n                    <h1>\n                        One page Template for\n                         <span> Digital agency</span>\n                    </h1>\n                    <p>\n                        It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum\n                    </p>\n                    <div className=\"hero-btns\">\n                        <a href=\"javascript:void(0)\" className=\"btn-primary\">\n                            Get started\n                        </a>\n                        <a href=\"javascript:void(0)\" className=\"btn-secondary\">\n                            Try it out\n                        </a>\n                    </div>\n                </div>\n                <div className=\"hero-img\">\n                    <img src=\"https://i.postimg.cc/HxHyt53c/undraw-heatmap-uyye.png\" />\n                </div>\n            </section>\n        </div>\n    )\n}\n"},{"label":"style.css","code":".hero-dark-container {\n  background-color: #111827;\n}\n.hero-dark-container .hero-dark-header .hero-nav {\n  align-items: center;\n  padding: 1.25rem 1rem 0 1rem;\n  margin-left: auto;\n  margin-right: auto;\n  max-width: 1280px;\n}\n@media (min-width: 640px) {\n  .hero-dark-container .hero-dark-header .hero-nav {\n    display: flex;\n    padding-left: 2rem;\n    padding-right: 2rem;\n  }\n}\n.hero-dark-container .hero-dark-header .hero-nav .nav-items {\n  flex: 1;\n  display: flex;\n  padding: 1rem 0 1rem 0;\n  align-items: center;\n  color: #e5e7eb;\n}\n.hero-dark-container .hero-dark-header .hero-nav .nav-items > * + * {\n  margin-left: 0.75rem;\n}\n@media (min-width: 640px) {\n  .hero-dark-container .hero-dark-header .hero-nav .nav-items {\n    justify-content: flex-end;\n  }\n  .hero-dark-container .hero-dark-header .hero-nav .nav-items > * + * {\n    margin-left: 1.5rem;\n  }\n}\n.hero-dark-container .hero-dark-header .hero-nav .nav-items .last-item {\n  display: flex;\n  align-items: center;\n}\n.hero-dark-container .hero-dark-header .hero-nav .nav-items .last-item svg {\n  width: 1.25rem;\n  height: 1.25rem;\n  margin-left: 0.5rem;\n}\n.hero-dark-container .hero-dark {\n  margin: 6rem auto;\n  max-width: 1280px;\n  padding: 0 1rem 3rem 1rem;\n  align-items: center;\n}\n@media (min-width: 1024px) {\n  .hero-dark-container .hero-dark {\n    display: flex;\n  }\n}\n@media (min-width: 768px) {\n  .hero-dark-container .hero-dark {\n    padding-left: 2rem;\n    padding-right: 2rem;\n  }\n}\n.hero-dark-container .hero-dark .hero-details {\n  flex: 1;\n}\n.hero-dark-container .hero-dark .hero-details > * + * {\n  margin-top: 1rem;\n}\n.hero-dark-container .hero-dark .hero-details h1 {\n  color: #FFF;\n  font-weight: 700;\n  font-size: 2.25rem;\n  line-height: 2.5rem;\n}\n.hero-dark-container .hero-dark .hero-details h1 span {\n  color: #818cf8;\n}\n@media (min-width: 1280px) {\n  .hero-dark-container .hero-dark .hero-details h1 {\n    font-size: 3rem;\n    line-height: 1;\n  }\n}\n.hero-dark-container .hero-dark .hero-details p {\n  color: #d1d5db;\n  max-width: 36rem;\n  line-height: 1.625;\n}\n@media (min-width: 640px) {\n  .hero-dark-container .hero-dark .hero-details p {\n    margin-left: auto;\n    margin-right: auto;\n  }\n}\n@media (min-width: 1024px) {\n  .hero-dark-container .hero-dark .hero-details p {\n    margin-left: 0;\n  }\n}\n@media (min-width: 640px) {\n  .hero-dark-container .hero-dark .hero-details {\n    text-align: center;\n  }\n}\n@media (min-width: 1024px) {\n  .hero-dark-container .hero-dark .hero-details {\n    text-align: left;\n  }\n}\n.hero-dark-container .hero-dark .hero-btns {\n  padding-top: 2.5rem;\n  align-items: center;\n  justify-content: center;\n}\n.hero-dark-container .hero-dark .hero-btns > * + * {\n  margin-top: 0.75rem;\n}\n@media (min-width: 640px) {\n  .hero-dark-container .hero-dark .hero-btns {\n    display: flex;\n  }\n  .hero-dark-container .hero-dark .hero-btns > * + * {\n    margin-left: 1.5rem;\n  }\n  .hero-dark-container .hero-dark .hero-btns > * + * {\n    margin-top: 0px;\n  }\n}\n@media (min-width: 1024px) {\n  .hero-dark-container .hero-dark .hero-btns {\n    justify-content: flex-start;\n  }\n}\n.hero-dark-container .hero-dark .hero-btns .btn-primary, .hero-dark-container .hero-dark .hero-btns .btn-secondary {\n  padding: 0.75rem 1.75rem 0.75rem 1.75rem;\n  width: 100%;\n  text-align: center;\n  border-radius: 0.375rem;\n  display: block;\n}\n.hero-dark-container .hero-dark .hero-btns .btn-primary {\n  background-color: #FFF;\n  color: #1f2937;\n  box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;\n}\n.hero-dark-container .hero-dark .hero-btns .btn-secondary {\n  background-color: #374151;\n  color: #e5e7eb;\n}\n@media (min-width: 640px) {\n  .hero-dark-container .hero-dark .hero-btns .btn-primary,\n  .hero-dark-container .hero-dark .hero-btns .btn-secondary {\n    width: auto;\n  }\n}\n.hero-dark-container .hero-dark .hero-img {\n  flex: 1;\n  margin-top: 1.75rem;\n}\n@media (min-width: 1024px) {\n  .hero-dark-container .hero-dark .hero-img {\n    margin-top: 0;\n    margin-left: 0.75rem;\n  }\n}\n.hero-dark-container .hero-dark .hero-img img {\n  width: 100%;\n  margin-left: auto;\n  margin-right: auto;\n}\n@media (min-width: 640px) {\n  .hero-dark-container .hero-dark .hero-img img {\n    width: 83.333333%;\n  }\n}\n@media (min-width: 1024px) {\n  .hero-dark-container .hero-dark .hero-img img {\n    width: 100%;\n  }\n}\n"}]},"html":{"htmlTail":[{"code":"<div x-data=\"{ open: false }\" class=\"bg-gray-900\">\n    <header>\n        <nav x-data class=\"items-center pt-5 px-4 mx-auto max-w-screen-xl sm:px-8 sm:flex sm:space-x-6\">\n            <a href=\"javascript:void(0)\">\n                <img\n                    src=\"https://www.farmui.com/images/logo.svg\"\n                    width=\"120\"\n                    height=\"50\"\n                    alt=\"FarmUI logo\"\n                />\n            </a>\n            <ul class=\"py-4 flex-1 items-center flex space-x-3 sm:space-x-6 sm:justify-end\">\n                <template x-for=\"(item, idx) in navigation\" :key=\"idx\">\n                    <li class=\"text-gray-200\">\n                        <a :href=\"item.path\" x-text=\"item.title\"></a>\n                    </li>\n                </template>\n                <li>\n                    <a href=\"javascript:void(0)\" class=\"flex items-center text-gray-200\">\n                        Log In\n                        <svg\n                            xmlns=\"http://www.w3.org/2000/svg\"\n                            class=\"h-5 w-5 ml-2\"\n                            viewBox=\"0 0 20 20\"\n                            fill=\"currentColor\"\n                        >\n                            <path\n                                fill-rule=\"evenodd\"\n                                d=\"M3 3a1 1 0 011 1v12a1 1 0 11-2 0V4a1 1 0 011-1zm7.707 3.293a1 1 0 010 1.414L9.414 9H17a1 1 0 110 2H9.414l1.293 1.293a1 1 0 01-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0z\"\n                                clip-rule=\"evenodd\"\n                            ></path>\n                        </svg>\n                    </a>\n                </li>\n            </ul>\n        </nav>\n    </header>\n    <section class=\"mt-24 mx-auto max-w-screen-xl pb-12 px-4 items-center lg:flex md:px-8\">\n        <div class=\"space-y-4 flex-1 sm:text-center lg:text-left\">\n            <h1 class=\"text-white font-bold text-4xl xl:text-5xl\">\n                One page Template for\n                <span class=\"text-indigo-400\"> Digital agency</span>\n            </h1>\n            <p class=\"text-gray-300 max-w-xl leading-relaxed sm:mx-auto lg:ml-0\">\n                It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum\n            </p>\n            <div class=\"pt-10 items-center justify-center space-y-3 sm:space-x-6 sm:space-y-0 sm:flex lg:justify-start\">\n                <a href=\"javascript:void(0)\" class=\"px-7 py-3 w-full bg-white text-gray-800 text-center rounded-md shadow-md block sm:w-auto\">\n                    Get started\n                </a>\n                <a href=\"javascript:void(0)\" class=\"px-7 py-3 w-full bg-gray-700 text-gray-200 text-center rounded-md block sm:w-auto\">\n                    Try it out\n                </a>\n            </div>\n        </div>\n        <div class=\"flex-1 text-center mt-7 lg:mt-0 lg:ml-3\">\n            <img src=\"https://i.postimg.cc/HxHyt53c/undraw-heatmap-uyye.png\" class=\"w-full mx-auto sm:w-10/12 lg:w-full\" />\n        </div>\n    </section>\n</div>\n\n<script>\n    const navigation = [\n        { title: \"Customers\", path: \"javascript:void(0)\" },\n        { title: \"Careers\", path: \"javascript:void(0)\" },\n    ];\n</script>","label":"index.html"}]},"svelte":{"svelteTail":[{"label":"App.svelte","code":"<script>\n  let navigation = [\n    { title: \"Customers\", path: \"javascript:void(0)\" },\n    { title: \"Careers\", path: \"javascript:void(0)\" }\n  ];\n</script>\n\n<div class=\"bg-gray-900\">\n  <header>\n    <nav class=\"items-center pt-5 px-4 mx-auto max-w-screen-xl sm:px-8 sm:flex sm:space-x-6\">\n      <a href=\"javascript:void(0)\">\n        <img\n          src=\"https://www.farmui.com/images/logo.svg\"\n          width=\"120\"\n          height=\"50\"\n          alt=\"FarmUI logo\"\n        />\n      </a>\n      <ul class=\"py-4 flex-1 items-center flex space-x-3 sm:space-x-6 sm:justify-end\">\n        {#each navigation as item, idx (item.title)}\n          <li class=\"text-gray-200\" key={idx}>\n            <a href={item.path}>{item.title}</a>\n          </li>\n        {/each}\n        <li>\n          <a href=\"javascript:void(0)\" class=\"flex items-center text-gray-200\">\n            Log In\n            <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-5 w-5 ml-2\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <path fill-rule=\"evenodd\" d=\"M3 3a1 1 0 011 1v12a1 1 0 11-2 0V4a1 1 0 011-1zm7.707 3.293a1 1 0 010 1.414L9.414 9H17a1 1 0 110 2H9.414l1.293 1.293a1 1 0 01-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\n            </svg>\n          </a>\n        </li>\n      </ul>\n    </nav>\n  </header>\n  <section class=\"mt-24 mx-auto max-w-screen-xl pb-12 px-4 items-center lg:flex md:px-8\">\n    <div class=\"space-y-4 flex-1 sm:text-center lg:text-left\">\n      <h1 class=\"text-white font-bold text-4xl xl:text-5xl\">\n        One page Template for\n        <span class=\"text-indigo-400\"> Digital agency</span>\n      </h1>\n      <p class=\"text-gray-300 max-w-xl leading-relaxed sm:mx-auto lg:ml-0\">\n        It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum\n      </p>\n      <div class=\"pt-10 items-center justify-center space-y-3 sm:space-x-6 sm:space-y-0 sm:flex lg:justify-start\">\n        <a href=\"javascript:void(0)\" class=\"px-7 py-3 w-full bg-white text-gray-800 text-center rounded-md shadow-md block sm:w-auto\">\n          Get started\n        </a>\n        <a href=\"javascript:void(0)\" class=\"px-7 py-3 w-full bg-gray-700 text-gray-200 text-center rounded-md block sm:w-auto\">\n          Try it out\n        </a>\n      </div>\n    </div>\n    <div class=\"flex-1 text-center mt-7 lg:mt-0 lg:ml-3\">\n      <img src=\"https://i.postimg.cc/HxHyt53c/undraw-heatmap-uyye.png\" class=\"w-full mx-auto sm:w-10/12  lg:w-full\" />\n    </div>\n  </section>\n</div>"}]},"vue":{"vueTail":[{"label":"App.vue","code":"<template>\n  <div class=\"bg-gray-900\">\n    <header>\n      <nav class=\"items-center pt-5 px-4 mx-auto max-w-screen-xl sm:px-8 sm:flex sm:space-x-6\">\n        <a href=\"javascript:void(0)\">\n          <img src=\"https://www.farmui.com/images/logo.svg\" width=\"120\" height=\"50\" alt=\"FarmUI logo\" />\n        </a>\n        <ul class=\"py-4 flex-1 items-center flex space-x-3 sm:space-x-6 sm:justify-end\">\n          <li v-for=\"link in navigation\" :key=\"link.id\" class=\"text-gray-200\">\n            <a :href=\"link.router\">\n              {{ link.title }}\n            </a>\n          </li>\n          <li>\n            <a href=\"javascript:void(0)\" class=\"flex items-center text-gray-200\">\n              Log In\n              <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-5 w-5 ml-2\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                <path fillRule=\"evenodd\"\n                  d=\"M3 3a1 1 0 011 1v12a1 1 0 11-2 0V4a1 1 0 011-1zm7.707 3.293a1 1 0 010 1.414L9.414 9H17a1 1 0 110 2H9.414l1.293 1.293a1 1 0 01-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0z\"\n                  clipRule=\"evenodd\" />\n              </svg>\n            </a>\n          </li>\n        </ul>\n      </nav>\n    </header>\n    <section class=\"mt-24 mx-auto max-w-screen-xl pb-12 px-4 items-center lg:flex md:px-8\">\n      <div class=\"space-y-4 flex-1 sm:text-center lg:text-left\">\n        <h1 class=\"text-white font-bold text-4xl xl:text-5xl\">\n          One page Template for\n          <span class=\"text-indigo-400\"> Digital agency</span>\n        </h1>\n        <p class=\"text-gray-300 max-w-xl leading-relaxed sm:mx-auto lg:ml-0\">\n          It is a long established fact that a reader will be distracted by the readable content of a page when looking\n          at its layout. The point of using Lorem Ipsum\n        </p>\n        <div class=\"pt-10 items-center justify-center space-y-3 sm:space-x-6 sm:space-y-0 sm:flex lg:justify-start\">\n          <a href=\"javascript:void(0)\"\n            class=\"px-7 py-3 w-full bg-white text-gray-800 text-center rounded-md shadow-md block sm:w-auto\">\n            Get started\n          </a>\n          <a href=\"javascript:void(0)\"\n            class=\"px-7 py-3 w-full bg-gray-700 text-gray-200 text-center rounded-md block sm:w-auto\">\n            Try it out\n          </a>\n        </div>\n      </div>\n      <div class=\"flex-1 text-center mt-7 lg:mt-0 lg:ml-3\">\n        <img src=\"https://i.postimg.cc/HxHyt53c/undraw-heatmap-uyye.png\"\n          class=\"w-full mx-auto sm:w-10/12  lg:w-full\" />\n      </div>\n    </section>\n  </div>\n</template>\n\n<script>\nexport default {\n  data: function () {\n    return {\n      navigation: [\n        { title: \"Customers\", router: \"/Customers\" },\n        { title: \"Careers\", router: \"/Careers\" },\n      ]\n    }\n  }\n}\n</script>"}],"vueCss":[{"code":"<template>\n  <div className=\"hero-dark-container\">\n    <header className=\"hero-dark-header\">\n      <nav className=\"hero-nav\">\n        <a href=\"javascript:void(0)\">\n          <img src=\"https://www.farmui.com/images/logo.svg\" width=\"120\" height=\"50\" alt=\"FarmUI logo\" />\n        </a>\n        <ul className=\"nav-items\">\n          <li v-for=\"link in navigation\" :key=\"link.id\" class=\"text-gray-200\">\n            <a :href=\"link.router\">\n              {{ link.title }}\n            </a>\n          </li>\n          <li>\n            <a href=\"javascript:void(0)\" className=\"last-item\">\n              Log In\n              <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                <path fillRule=\"evenodd\"\n                  d=\"M3 3a1 1 0 011 1v12a1 1 0 11-2 0V4a1 1 0 011-1zm7.707 3.293a1 1 0 010 1.414L9.414 9H17a1 1 0 110 2H9.414l1.293 1.293a1 1 0 01-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0z\"\n                  clipRule=\"evenodd\" />\n              </svg>\n            </a>\n          </li>\n        </ul>\n      </nav>\n    </header>\n    <section className=\"hero-dark\">\n      <div className=\"hero-details\">\n        <h1>\n          One page Template for\n          <span> Digital agency</span>\n        </h1>\n        <p>\n          It is a long established fact that a reader will be distracted by the readable content of a page when looking\n          at its layout. The point of using Lorem Ipsum\n        </p>\n        <div className=\"hero-btns\">\n          <a href=\"javascript:void(0)\" className=\"btn-primary\">\n            Get started\n          </a>\n          <a href=\"javascript:void(0)\" className=\"btn-secondary\">\n            Try it out\n          </a>\n        </div>\n      </div>\n      <div className=\"hero-img\">\n        <img src=\"https://i.postimg.cc/HxHyt53c/undraw-heatmap-uyye.png\" />\n      </div>\n    </section>\n  </div>\n</template>\n\n<script>\nexport default {\n  data: function () {\n    return {\n      navigation: [\n        { title: \"Customers\", router: \"/Customers\" },\n        { title: \"Careers\", router: \"/Careers\" },\n      ]\n    }\n  }\n}\n</script>","label":"App.vue"},{"label":"style.css","code":".hero-dark-container {\n  background-color: #111827;\n}\n\n.hero-dark-container .hero-dark-header .hero-nav {\n  align-items: center;\n  padding: 1.25rem 1rem 0 1rem;\n  margin-left: auto;\n  margin-right: auto;\n  max-width: 1280px;\n}\n\n@media (min-width: 640px) {\n  .hero-dark-container .hero-dark-header .hero-nav {\n    display: flex;\n    padding-left: 2rem;\n    padding-right: 2rem;\n  }\n}\n\n.hero-dark-container .hero-dark-header .hero-nav .nav-items {\n  flex: 1;\n  display: flex;\n  padding: 1rem 0 1rem 0;\n  align-items: center;\n  color: #e5e7eb;\n}\n\n.hero-dark-container .hero-dark-header .hero-nav .nav-items>*+* {\n  margin-left: 0.75rem;\n}\n\n@media (min-width: 640px) {\n  .hero-dark-container .hero-dark-header .hero-nav .nav-items {\n    justify-content: flex-end;\n  }\n\n  .hero-dark-container .hero-dark-header .hero-nav .nav-items>*+* {\n    margin-left: 1.5rem;\n  }\n}\n\n.hero-dark-container .hero-dark-header .hero-nav .nav-items .last-item {\n  display: flex;\n  align-items: center;\n}\n\n.hero-dark-container .hero-dark-header .hero-nav .nav-items .last-item svg {\n  width: 1.25rem;\n  height: 1.25rem;\n  margin-left: 0.5rem;\n}\n\n.hero-dark-container .hero-dark {\n  margin: 6rem auto;\n  max-width: 1280px;\n  padding: 0 1rem 3rem 1rem;\n  align-items: center;\n}\n\n@media (min-width: 1024px) {\n  .hero-dark-container .hero-dark {\n    display: flex;\n  }\n}\n\n@media (min-width: 768px) {\n  .hero-dark-container .hero-dark {\n    padding-left: 2rem;\n    padding-right: 2rem;\n  }\n}\n\n.hero-dark-container .hero-dark .hero-details {\n  flex: 1;\n}\n\n.hero-dark-container .hero-dark .hero-details>*+* {\n  margin-top: 1rem;\n}\n\n.hero-dark-container .hero-dark .hero-details h1 {\n  color: #FFF;\n  font-weight: 700;\n  font-size: 2.25rem;\n  line-height: 2.5rem;\n}\n\n.hero-dark-container .hero-dark .hero-details h1 span {\n  color: #818cf8;\n}\n\n@media (min-width: 1280px) {\n  .hero-dark-container .hero-dark .hero-details h1 {\n    font-size: 3rem;\n    line-height: 1;\n  }\n}\n\n.hero-dark-container .hero-dark .hero-details p {\n  color: #d1d5db;\n  max-width: 36rem;\n  line-height: 1.625;\n}\n\n@media (min-width: 640px) {\n  .hero-dark-container .hero-dark .hero-details p {\n    margin-left: auto;\n    margin-right: auto;\n  }\n}\n\n@media (min-width: 1024px) {\n  .hero-dark-container .hero-dark .hero-details p {\n    margin-left: 0;\n  }\n}\n\n@media (min-width: 640px) {\n  .hero-dark-container .hero-dark .hero-details {\n    text-align: center;\n  }\n}\n\n@media (min-width: 1024px) {\n  .hero-dark-container .hero-dark .hero-details {\n    text-align: left;\n  }\n}\n\n.hero-dark-container .hero-dark .hero-btns {\n  padding-top: 2.5rem;\n  align-items: center;\n  justify-content: center;\n}\n\n.hero-dark-container .hero-dark .hero-btns>*+* {\n  margin-top: 0.75rem;\n}\n\n@media (min-width: 640px) {\n  .hero-dark-container .hero-dark .hero-btns {\n    display: flex;\n  }\n\n  .hero-dark-container .hero-dark .hero-btns>*+* {\n    margin-left: 1.5rem;\n  }\n\n  .hero-dark-container .hero-dark .hero-btns>*+* {\n    margin-top: 0px;\n  }\n}\n\n@media (min-width: 1024px) {\n  .hero-dark-container .hero-dark .hero-btns {\n    justify-content: flex-start;\n  }\n}\n\n.hero-dark-container .hero-dark .hero-btns .btn-primary,\n.hero-dark-container .hero-dark .hero-btns .btn-secondary {\n  padding: 0.75rem 1.75rem 0.75rem 1.75rem;\n  width: 100%;\n  text-align: center;\n  border-radius: 0.375rem;\n  display: block;\n}\n\n.hero-dark-container .hero-dark .hero-btns .btn-primary {\n  background-color: #FFF;\n  color: #1f2937;\n  box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;\n}\n\n.hero-dark-container .hero-dark .hero-btns .btn-secondary {\n  background-color: #374151;\n  color: #e5e7eb;\n}\n\n@media (min-width: 640px) {\n\n  .hero-dark-container .hero-dark .hero-btns .btn-primary,\n  .hero-dark-container .hero-dark .hero-btns .btn-secondary {\n    width: auto;\n  }\n}\n\n.hero-dark-container .hero-dark .hero-img {\n  flex: 1;\n  margin-top: 1.75rem;\n}\n\n@media (min-width: 1024px) {\n  .hero-dark-container .hero-dark .hero-img {\n    margin-top: 0;\n    margin-left: 0.75rem;\n  }\n}\n\n.hero-dark-container .hero-dark .hero-img img {\n  width: 100%;\n  margin-left: auto;\n  margin-right: auto;\n}\n\n@media (min-width: 640px) {\n  .hero-dark-container .hero-dark .hero-img img {\n    width: 83.333333%;\n  }\n}\n\n@media (min-width: 1024px) {\n  .hero-dark-container .hero-dark .hero-img img {\n    width: 100%;\n  }\n}"}]}}
slug: /heroes
id: 01e18c22-877e-4cba-9724-6424ed2d84bc
created_at: 3
---

<FUIDarkHeroSection />