---
title: Secondary Hero Section
category: Marketing
paid: false
isActive: true
ltr: {"vue":{"vueTail":[{"label":"App.vue","code":"<template>\n  <header>\n    <nav class=\"relative items-center pt-5 px-4 mx-auto max-w-screen-xl sm:px-8 sm:flex sm:space-x-6\">\n      <div class=\"flex justify-between\">\n        <a href=\"javascript:void(0)\">\n          <img src=\"https://www.farmui.com/logo.svg\" width=\"120\" height=\"50\" alt=\"FarmUI logo\" />\n        </a>\n        <button class=\"text-gray-500 outline-none sm:hidden\" @click=\"menuOpen()\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\" :class=\"[open ? 'block' : 'hidden']\">\n            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\n          </svg>\n          <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\" :class=\"[open ? 'hidden' : 'block']\">\n            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" d=\"M4 6h16M4 12h16M4 18h16\" />\n          </svg>\n        </button>\n      </div>\n      <ul class=\"bg-white shadow-md rounded-md p-4 flex-1 mt-12 absolute z-20 top-8 right-4 w-64 border\n        sm:shadow-none sm:block sm:border-0 sm:mt-0 sm:static sm:w-auto\" :class=\"[open ? 'block' : 'hidden']\">\n        <div class=\"order-1 justify-end items-center space-y-5 sm:flex sm:space-x-6 sm:space-y-0\">\n          <li v-for=\"link in navigation\" :key=\"link.id\" class=\"text-gray-500 hover:text-indigo-600\">\n            <a :href=\"link.router\">\n              {{ link.title }}\n            </a>\n          </li>\n        </div>\n      </ul>\n    </nav>\n  </header>\n  <section class=\"mt-24 mx-auto max-w-screen-xl pb-4 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-gray-800 font-bold text-4xl xl:text-5xl\">\n        Optimize your website for\n        <span class=\"text-indigo-600\"> Search engine</span>\n      </h1>\n      <p class=\"text-gray-500 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\n        its layout. The point of using Lorem Ipsum\n      </p>\n      <div>\n        <p class=\"text-gray-800 py-3\">\n          Subscribe to our newsletter and we'll save your time\n        </p>\n        <form class=\"items-center space-y-3 sm:justify-center sm:space-x-3 sm:space-y-0 sm:flex lg:justify-start\">\n          <input type=\"text\" placeholder=\"Enter your email\"\n            class=\"text-gray-500 border outline-none p-3 rounded-md w-full sm:w-72\" />\n          <button\n            class=\"outline-none bg-gray-700 text-white text-center px-4 py-3 rounded-md shadow w-full ring-offset-2 ring-gray-700 focus:ring-2  sm:w-auto\">\n            Subscribe\n          </button>\n        </form>\n      </div>\n    </div>\n    <div class=\"flex-1 text-center mt-4 lg:mt-0 lg:ml-3\">\n      <img src=\"https://i.postimg.cc/kgd4WhyS/container.png\" class=\"w-full mx-auto sm:w-10/12  lg:w-full\" />\n    </div>\n  </section>\n</template>\n\n<script>\n  import { ref } from 'vue';\n  export default {\n    data: function () {\n      return {\n        navigation: [\n          { title: \"Customers\", router: \"/Customers\" },\n          { title: \"Careers\", router: \"/Careers\" },\n          { title: \"Guides\", router: \"/Guides\" },\n          { title: \"Partners\", router: \"/Partners\" },\n        ]\n      }\n    },\n    setup() {\n      let open = ref(false);\n      function menuOpen() {\n        open.value = !open.value;\n      }\n      return { open, menuOpen }\n    }\n  }\n</script>"}],"vueCss":[{"code":"<template>\n  <header class=\"hero-secondary-header\">\n    <nav class=\"hero-secondary-nav\">\n      <div class=\"nav-brand\">\n        <a href=\"javascript:void(0)\">\n          <img src=\"https://www.farmui.com/logo.svg\" width=\"120\" height=\"50\" alt=\"FarmUI logo\" />\n        </a>\n        <button class=\"menu-btn\" @click=\"menuOpen()\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" :class=\"[open ? 'block' : 'hidden']\">\n            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\n          </svg>\n\n          <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" :class=\"[open ? 'hidden' : 'block']\">\n            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" d=\"M4 6h16M4 12h16M4 18h16\" />\n          </svg>\n        </button>\n      </div>\n      <ul class=\"nav-items\" :class=\"[open ? 'block' : 'hidden']\">\n        <div class=\"nav-items-li\">\n          <li v-for=\"link in navigation\" :key=\"link.id\">\n            <a :href=\"link.router\">\n              {{ link.title }}\n            </a>\n          </li>\n        </div>\n      </ul>\n    </nav>\n  </header>\n  <section class=\"hero-secondary\">\n    <div class=\"hero-details\">\n      <h1>\n        Optimize your website for\n        <span> Search engine</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\n        its layout. The point of using Lorem Ipsum\n      </p>\n      <div class=\"hero-form\">\n        <p class=\"\">\n          Subscribe to our newsletter and we'll save your time\n        </p>\n        <form class=\"hero-form-container\">\n          <input type=\"text\" placeholder=\"Enter your email\" />\n          <button>\n            Subscribe\n          </button>\n        </form>\n      </div>\n    </div>\n    <div class=\"hero-img\">\n      <img src=\"https://i.postimg.cc/kgd4WhyS/container.png\" />\n    </div>\n  </section>\n</template>\n\n<script>\n  import { ref } from 'vue';\n  export default {\n    data: function () {\n      return {\n        navigation: [\n          { title: \"Customers\", router: \"/Customers\" },\n          { title: \"Careers\", router: \"/Careers\" },\n          { title: \"Guides\", router: \"/Guides\" },\n          { title: \"Partners\", router: \"/Partners\" },\n        ]\n      }\n    },\n    setup() {\n      let open = ref(false);\n      function menuOpen() {\n        open.value = !open.value;\n      }\n      return { open, menuOpen }\n    }\n  }\n</script>","label":"App.vue"},{"label":"style.css","code":"  .hero-secondary-header .hero-secondary-nav {\n  position: relative;\n  align-items: center;\n  padding: 1.25rem 1rem 0 1rem;\n  margin: auto;\n  max-width: 1280px;\n}\n@media (min-width: 640px) {\n  .hero-secondary-header .hero-secondary-nav {\n    display: flex;\n    padding-left: 2rem;\n    padding-right: 2rem;\n  }\n  .hero-secondary-header .hero-secondary-nav > * + * {\n    margin-left: 1.5rem;\n  }\n}\n.hero-secondary-header .hero-secondary-nav .nav-brand {\n  display: flex;\n  justify-content: space-between;\n}\n.hero-secondary-header .hero-secondary-nav .nav-brand .menu-btn {\n  color: #6b7280;\n  outline: none;\n}\n.hero-secondary-header .hero-secondary-nav .nav-brand .menu-btn svg {\n  width: 1.5rem;\n  height: 1.5rem;\n}\n@media (min-width: 640px) {\n  .hero-secondary-header .hero-secondary-nav .nav-brand .menu-btn {\n    display: none;\n  }\n}\n.hero-secondary-header .hero-secondary-nav .nav-items {\n  position: absolute;\n  z-index: 20;\n  top: 2rem;\n  right: 1rem;\n  border: solid 1px #e5e7eb;\n  width: 16rem;\n  background-color: #FFF;\n  box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;\n  border-radius: 0.375rem;\n  padding: 1rem;\n  flex: 1;\n  justify-content: space-between;\n  margin-top: 3rem;\n}\n@media (min-width: 640px) {\n  .hero-secondary-header .hero-secondary-nav .nav-items {\n    position: static;\n    display: block;\n    width: auto;\n    border: none;\n    box-shadow: none;\n    margin-top: 0;\n  }\n}\n.hero-secondary-header .hero-secondary-nav .nav-items .nav-items-li {\n  flex: 1;\n  justify-content: flex-end;\n  align-items: center;\n}\n.hero-secondary-header .hero-secondary-nav .nav-items .nav-items-li > * + * {\n  margin-top: 1.25rem;\n}\n@media (min-width: 640px) {\n  .hero-secondary-header .hero-secondary-nav .nav-items .nav-items-li {\n    display: flex;\n  }\n  .hero-secondary-header .hero-secondary-nav .nav-items .nav-items-li > * + * {\n    margin-left: 1.5rem;\n  }\n  .hero-secondary-header .hero-secondary-nav .nav-items .nav-items-li > * + * {\n    margin-top: 0px;\n  }\n}\n.hero-secondary-header .hero-secondary-nav .nav-items .nav-items-li li {\n  color: #6b7280;\n}\n.hero-secondary-header .hero-secondary-nav .nav-items .nav-items-li li:hover {\n  color: #4f46e5;\n}\n\n.hide-nav {\n  display: none;\n}\n\n.hero-secondary {\n  margin: 6rem auto;\n  max-width: 1280px;\n  padding: 0 1rem;\n  align-items: center;\n}\n@media (min-width: 768px) {\n  .hero-secondary {\n    padding-left: 2rem;\n    padding-right: 2rem;\n  }\n}\n@media (min-width: 1024px) {\n  .hero-secondary {\n    display: flex;\n  }\n}\n.hero-secondary .hero-details {\n  flex: 1;\n}\n.hero-secondary .hero-details > * + * {\n  margin-top: 1rem;\n}\n.hero-secondary .hero-details h1 {\n  color: #1f2937;\n  font-weight: 700;\n  font-size: 2.25rem;\n  line-height: 2.5rem;\n}\n.hero-secondary .hero-details h1 span {\n  color: #4f46e5;\n}\n@media (min-width: 1280px) {\n  .hero-secondary .hero-details h1 {\n    font-size: 3rem;\n    line-height: 1;\n  }\n}\n.hero-secondary .hero-details p {\n  color: #6b7280;\n  max-width: 36rem;\n  line-height: 1.625;\n}\n@media (min-width: 640px) {\n  .hero-secondary .hero-details p {\n    margin-left: auto;\n    margin-right: auto;\n  }\n}\n@media (min-width: 1024px) {\n  .hero-secondary .hero-details p {\n    margin-left: 0;\n  }\n}\n@media (min-width: 640px) {\n  .hero-secondary .hero-details {\n    text-align: center;\n  }\n}\n@media (min-width: 1024px) {\n  .hero-secondary .hero-details {\n    text-align: left;\n  }\n}\n.hero-secondary .hero-form p {\n  color: #1f2937;\n  padding: 0.75rem 0 0.75rem 0;\n}\n.hero-secondary .hero-form .hero-form-container {\n  align-items: center;\n}\n.hero-secondary .hero-form .hero-form-container > * + * {\n  margin-top: 0.75rem;\n}\n@media (min-width: 640px) {\n  .hero-secondary .hero-form .hero-form-container {\n    display: flex;\n    justify-content: center;\n  }\n  .hero-secondary .hero-form .hero-form-container > * + * {\n    margin-left: 0.75rem;\n  }\n  .hero-secondary .hero-form .hero-form-container > * + * {\n    margin-top: 0px;\n  }\n}\n@media (min-width: 1024px) {\n  .hero-secondary .hero-form .hero-form-container {\n    justify-content: flex-start;\n  }\n}\n.hero-secondary .hero-form .hero-form-container input {\n  color: #6b7280;\n  border: solid 1px #e5e7eb;\n  outline: none;\n  padding: 0.75rem;\n  border-radius: 0.375rem;\n  width: 100%;\n}\n@media (min-width: 640px) {\n  .hero-secondary .hero-form .hero-form-container input {\n    width: 18rem;\n  }\n}\n.hero-secondary .hero-form .hero-form-container button {\n  outline: none;\n  background-color: #374151;\n  color: #FFF;\n  text-align: center;\n  padding: 0.75rem 1rem 0.75rem 1rem;\n  border-radius: 0.375rem;\n  box-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;\n  width: 100%;\n}\n.hero-secondary .hero-form .hero-form-container button:focus {\n  box-shadow: 0 0 0 2px white, 0 0 0 4px #374151;\n}\n@media (min-width: 640px) {\n  .hero-secondary .hero-form .hero-form-container button {\n    width: auto;\n  }\n}\n.hero-secondary .hero-img {\n  flex: 1;\n  text-align: center;\n  margin-top: 1rem;\n}\n@media (min-width: 1024px) {\n  .hero-secondary .hero-img {\n    margin-top: 0;\n    margin-left: 0.75rem;\n  }\n}\n.hero-secondary .hero-img img {\n  width: 100%;\n  margin-left: auto;\n  margin-right: auto;\n}\n@media (min-width: 640px) {\n  .hero-secondary .hero-img img {\n    width: 83.333333%;\n  }\n}\n@media (min-width: 1024px) {\n  .hero-secondary .hero-img img {\n    width: 100%;\n  }\n}\n\n.hide-nav, .hidden {\n  display: none;\n}\n.block {\n  display: block;\n}"}]},"html":{"htmlTail":[{"code":"<div x-data=\"{ open: false }\">\n  <header>\n    <nav class=\"relative items-center pt-5 px-4 mx-auto max-w-screen-xl sm:px-8 sm:flex sm:space-x-6\">\n      <div class=\"flex justify-between\">\n        <a href=\"javascript:void(0)\">\n          <img\n            src=\"https://www.farmui.com/logo.svg\"\n            width=\"120\"\n            height=\"50\"\n            alt=\"FarmUI logo\"\n          />\n        </a>\n        <button class=\"text-gray-500 outline-none sm:hidden\"\n                @click=\"open = !open\"\n        >\n          <template x-if=\"open\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\n            </svg>\n          </template>\n          <template x-if=\"!open\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" d=\"M4 6h16M4 12h16M4 18h16\" />\n            </svg>\n          </template>\n        </button>\n      </div>\n      <ul :class=\"{'hidden': !open, 'block': open}\" class=\"bg-white shadow-md rounded-md p-4 flex-1 mt-12 absolute z-20 top-8 right-4 w-64 border sm:shadow-none sm:block sm:border-0 sm:mt-0 sm:static sm:w-auto\">\n        <div class=\"order-1 justify-end items-center space-y-5 sm:flex sm:space-x-6 sm:space-y-0\">\n          <li class=\"text-gray-500 hover:text-indigo-600\"><a href=\"javascript:void(0)\">Customers</a></li>\n          <li class=\"text-gray-500 hover:text-indigo-600\"><a href=\"javascript:void(0)\">Careers</a></li>\n          <li class=\"text-gray-500 hover:text-indigo-600\"><a href=\"javascript:void(0)\">Guides</a></li>\n          <li class=\"text-gray-500 hover:text-indigo-600\"><a href=\"javascript:void(0)\">Partners</a></li>\n          <li class=\"text-gray-500 hover:text-indigo-600\"><a href=\"javascript:void(0)\">Team</a></li>\n        </div>\n      </ul>\n    </nav>\n  </header>\n  <section class=\"mt-24 mx-auto max-w-screen-xl pb-4 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-gray-800 font-bold text-4xl xl:text-5xl\">\n        Optimize your website for\n        <span class=\"text-indigo-600\"> Search engine</span>\n      </h1>\n      <p class=\"text-gray-500 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>\n        <p class=\"text-gray-800 py-3\">\n          Subscribe to our newsletter and we'll save your time\n        </p>\n        <form class=\"items-center space-y-3 sm:justify-center sm:space-x-3 sm:space-y-0 sm:flex lg:justify-start\">\n          <input\n            type=\"text\"\n            placeholder=\"Enter your email\"\n            class=\"text-gray-500 border outline-none p-3 rounded-md w-full sm:w-72\"\n          />\n          <button class=\"outline-none bg-gray-700 text-white text-center px-4 py-3 rounded-md shadow w-full ring-offset-2 ring-gray-700 focus:ring-2 sm:w-auto\">\n            Subscribe\n          </button>\n        </form>\n      </div>\n    </div>\n    <div class=\"flex-1 text-center mt-4 lg:mt-0 lg:ml-3\">\n      <img src=\"https://i.postimg.cc/kgd4WhyS/container.png\" class=\"w-full mx-auto sm:w-10/12 lg:w-full\" />\n    </div>\n  </section>\n</div>","label":"index.html"}]},"react":{"jsxCss":[{"code":"import { useState } from 'react'\n\nexport default () => {\n\n    const [state, setState] = useState(false)\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      { title: \"Guides\", path: \"javascript:void(0)\" },\n      { title: \"Partners\", path: \"javascript:void(0)\" },\n      { title: \"Team\", path: \"javascript:void(0)\" }\n  ]\n  \n    return (\n        <>\n            <header className=\"hero-secondary-header\">\n                <nav className=\"hero-secondary-nav\">\n                    <div className=\"nav-brand\">\n                        <a href=\"javascript:void(0)\">\n                            <img\n                                src=\"https://www.farmui.com/logo.svg\" \n                                width={120} \n                                height={50}\n                                alt=\"FarmUI logo\"\n                            />\n                        </a>\n                        <button className=\"menu-btn\"\n                            onClick={() => setState(!state)}\n                        >\n                            {\n                                state ? (\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                                        <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n                                    </svg>\n                                ) : (\n\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                                        <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M4 6h16M4 12h16M4 18h16\" />\n                                    </svg>\n                                )\n                            }\n                        </button>\n                    </div>\n                    <ul className={`nav-items ${state ? '' : 'hide-nav'}`}>\n                        <div className=\"nav-items-li\">\n                            {\n                                navigation.map((item, idx) => (\n                                    <li key={idx}>\n                                        <a href={item.path}>{item.title}</a>\n                                    </li>\n                                ))\n                            }\n                        </div>\n                    </ul>\n                </nav>\n            </header>\n            <section className=\"hero-secondary\">\n                <div className=\"hero-details\">\n                    <h1>\n                        Optimize your website for\n                         <span> Search engine</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-form\">\n                        <p className=\"\">\n                            Subscribe to our newsletter and we'll save your time\n                        </p>\n                        <form className=\"hero-form-container\">\n                            <input\n                                type=\"text\"\n                                placeholder=\"Enter your email\"\n                            />\n                            <button>\n                                Subscribe \n                            </button>\n                        </form>\n                    </div>\n                </div>\n                <div className=\"hero-img\">\n                    <img src=\"https://i.postimg.cc/kgd4WhyS/container.png\" />\n                </div>\n            </section>\n        </>\n    )\n}\n","label":"App.jsx"},{"label":"style.css","code":".hero-secondary-header .hero-secondary-nav {\n  position: relative;\n  align-items: center;\n  padding: 1.25rem 1rem 0 1rem;\n  margin: auto;\n  max-width: 1280px;\n}\n@media (min-width: 640px) {\n  .hero-secondary-header .hero-secondary-nav {\n    display: flex;\n    padding-left: 2rem;\n    padding-right: 2rem;\n  }\n  .hero-secondary-header .hero-secondary-nav > * + * {\n    margin-left: 1.5rem;\n  }\n}\n.hero-secondary-header .hero-secondary-nav .nav-brand {\n  display: flex;\n  justify-content: space-between;\n}\n.hero-secondary-header .hero-secondary-nav .nav-brand .menu-btn {\n  color: #6b7280;\n  outline: none;\n}\n.hero-secondary-header .hero-secondary-nav .nav-brand .menu-btn svg {\n  width: 1.5rem;\n  height: 1.5rem;\n}\n@media (min-width: 640px) {\n  .hero-secondary-header .hero-secondary-nav .nav-brand .menu-btn {\n    display: none;\n  }\n}\n.hero-secondary-header .hero-secondary-nav .nav-items {\n  position: absolute;\n  z-index: 20;\n  top: 2rem;\n  right: 1rem;\n  border: solid 1px #e5e7eb;\n  width: 16rem;\n  background-color: #FFF;\n  box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;\n  border-radius: 0.375rem;\n  padding: 1rem;\n  flex: 1;\n  justify-content: space-between;\n  margin-top: 3rem;\n}\n@media (min-width: 640px) {\n  .hero-secondary-header .hero-secondary-nav .nav-items {\n    position: static;\n    display: block;\n    width: auto;\n    border: none;\n    box-shadow: none;\n    margin-top: 0;\n  }\n}\n.hero-secondary-header .hero-secondary-nav .nav-items .nav-items-li {\n  flex: 1;\n  justify-content: flex-end;\n  align-items: center;\n}\n.hero-secondary-header .hero-secondary-nav .nav-items .nav-items-li > * + * {\n  margin-top: 1.25rem;\n}\n@media (min-width: 640px) {\n  .hero-secondary-header .hero-secondary-nav .nav-items .nav-items-li {\n    display: flex;\n  }\n  .hero-secondary-header .hero-secondary-nav .nav-items .nav-items-li > * + * {\n    margin-left: 1.5rem;\n  }\n  .hero-secondary-header .hero-secondary-nav .nav-items .nav-items-li > * + * {\n    margin-top: 0px;\n  }\n}\n.hero-secondary-header .hero-secondary-nav .nav-items .nav-items-li li {\n  color: #6b7280;\n}\n.hero-secondary-header .hero-secondary-nav .nav-items .nav-items-li li:hover {\n  color: #4f46e5;\n}\n\n.hide-nav {\n  display: none;\n}\n\n.hero-secondary {\n  margin: 6rem auto;\n  max-width: 1280px;\n  padding: 0 1rem;\n  align-items: center;\n}\n@media (min-width: 768px) {\n  .hero-secondary {\n    padding-left: 2rem;\n    padding-right: 2rem;\n  }\n}\n@media (min-width: 1024px) {\n  .hero-secondary {\n    display: flex;\n  }\n}\n.hero-secondary .hero-details {\n  flex: 1;\n}\n.hero-secondary .hero-details > * + * {\n  margin-top: 1rem;\n}\n.hero-secondary .hero-details h1 {\n  color: #1f2937;\n  font-weight: 700;\n  font-size: 2.25rem;\n  line-height: 2.5rem;\n}\n.hero-secondary .hero-details h1 span {\n  color: #4f46e5;\n}\n@media (min-width: 1280px) {\n  .hero-secondary .hero-details h1 {\n    font-size: 3rem;\n    line-height: 1;\n  }\n}\n.hero-secondary .hero-details p {\n  color: #6b7280;\n  max-width: 36rem;\n  line-height: 1.625;\n}\n@media (min-width: 640px) {\n  .hero-secondary .hero-details p {\n    margin-left: auto;\n    margin-right: auto;\n  }\n}\n@media (min-width: 1024px) {\n  .hero-secondary .hero-details p {\n    margin-left: 0;\n  }\n}\n@media (min-width: 640px) {\n  .hero-secondary .hero-details {\n    text-align: center;\n  }\n}\n@media (min-width: 1024px) {\n  .hero-secondary .hero-details {\n    text-align: left;\n  }\n}\n.hero-secondary .hero-form p {\n  color: #1f2937;\n  padding: 0.75rem 0 0.75rem 0;\n}\n.hero-secondary .hero-form .hero-form-container {\n  align-items: center;\n}\n.hero-secondary .hero-form .hero-form-container > * + * {\n  margin-top: 0.75rem;\n}\n@media (min-width: 640px) {\n  .hero-secondary .hero-form .hero-form-container {\n    display: flex;\n    justify-content: center;\n  }\n  .hero-secondary .hero-form .hero-form-container > * + * {\n    margin-left: 0.75rem;\n  }\n  .hero-secondary .hero-form .hero-form-container > * + * {\n    margin-top: 0px;\n  }\n}\n@media (min-width: 1024px) {\n  .hero-secondary .hero-form .hero-form-container {\n    justify-content: flex-start;\n  }\n}\n.hero-secondary .hero-form .hero-form-container input {\n  color: #6b7280;\n  border: solid 1px #e5e7eb;\n  outline: none;\n  padding: 0.75rem;\n  border-radius: 0.375rem;\n  width: 100%;\n}\n@media (min-width: 640px) {\n  .hero-secondary .hero-form .hero-form-container input {\n    width: 18rem;\n  }\n}\n.hero-secondary .hero-form .hero-form-container button {\n  outline: none;\n  background-color: #374151;\n  color: #FFF;\n  text-align: center;\n  padding: 0.75rem 1rem 0.75rem 1rem;\n  border-radius: 0.375rem;\n  box-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;\n  width: 100%;\n}\n.hero-secondary .hero-form .hero-form-container button:focus {\n  box-shadow: 0 0 0 2px white, 0 0 0 4px #374151;\n}\n@media (min-width: 640px) {\n  .hero-secondary .hero-form .hero-form-container button {\n    width: auto;\n  }\n}\n.hero-secondary .hero-img {\n  flex: 1;\n  text-align: center;\n  margin-top: 1rem;\n}\n@media (min-width: 1024px) {\n  .hero-secondary .hero-img {\n    margin-top: 0;\n    margin-left: 0.75rem;\n  }\n}\n.hero-secondary .hero-img img {\n  width: 100%;\n  margin-left: auto;\n  margin-right: auto;\n}\n@media (min-width: 640px) {\n  .hero-secondary .hero-img img {\n    width: 83.333333%;\n  }\n}\n@media (min-width: 1024px) {\n  .hero-secondary .hero-img img {\n    width: 100%;\n  }\n}\n"}],"jsxTail":[{"code":"import { useState } from 'react'\n\nexport default () => {\n\n    const [state, setState] = useState(false)\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      { title: \"Guides\", path: \"javascript:void(0)\" },\n      { title: \"Partners\", path: \"javascript:void(0)\" },\n      { title: \"Team\", path: \"javascript:void(0)\" }\n  ]\n  \n    return (\n        <>\n            <header>\n                <nav className=\"relative items-center pt-5 px-4 mx-auto max-w-screen-xl sm:px-8 sm:flex sm:space-x-6\">\n                    <div className=\"flex justify-between\">\n                        <a href=\"javascript:void(0)\">\n                            <img\n                                src=\"https://www.farmui.com/logo.svg\" \n                                width={120} \n                                height={50}\n                                alt=\"FarmUI logo\"\n                            />\n                        </a>\n                        <button className=\"text-gray-500 outline-none sm:hidden\"\n                            onClick={() => setState(!state)}\n                        >\n                            {\n                                state ? (\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                                        <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n                                    </svg>\n                                ) : (\n\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                                        <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M4 6h16M4 12h16M4 18h16\" />\n                                    </svg>\n                                )\n                            }\n                        </button>\n                    </div>\n                    <ul className={`bg-white shadow-md rounded-md p-4 flex-1 mt-12 absolute z-20 top-8 right-4 w-64 border sm:shadow-none sm:block sm:border-0 sm:mt-0 sm:static sm:w-auto ${state ? '' : 'hidden'}`}>\n                        <div className=\"order-1 justify-end items-center space-y-5 sm:flex sm:space-x-6 sm:space-y-0\">\n                            {\n                                navigation.map((item, idx) => (\n                                    <li className=\"text-gray-500 hover:text-indigo-600\" key={idx}>\n                                        <a href={item.path}>{item.title}</a>\n                                    </li>\n                                ))\n                            }\n                        </div>\n                    </ul>\n                </nav>\n            </header>\n            <section className=\"mt-24 mx-auto max-w-screen-xl pb-4 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-gray-800 font-bold text-4xl xl:text-5xl\">\n                        Optimize your website for\n                         <span className=\"text-indigo-600\"> Search engine</span>\n                    </h1>\n                    <p className=\"text-gray-500 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>\n                        <p className=\"text-gray-800 py-3\">\n                            Subscribe to our newsletter and we'll save your time\n                        </p>\n                        <form className=\"items-center space-y-3 sm:justify-center sm:space-x-3 sm:space-y-0 sm:flex lg:justify-start\">\n                            <input\n                                type=\"text\"\n                                placeholder=\"Enter your email\"\n                                className=\"text-gray-500 border outline-none p-3 rounded-md w-full sm:w-72\"\n                            />\n                            <button className=\"outline-none bg-gray-700 text-white text-center px-4 py-3 rounded-md shadow w-full ring-offset-2 ring-gray-700 focus:ring-2  sm:w-auto\">\n                                Subscribe \n                            </button>\n                        </form>\n                    </div>\n                </div>\n                <div className=\"flex-1 text-center mt-4 lg:mt-0 lg:ml-3\">\n                    <img src=\"https://i.postimg.cc/kgd4WhyS/container.png\" className=\"w-full mx-auto sm:w-10/12  lg:w-full\" />\n                </div>\n            </section>\n        </>\n    )\n}\n","label":"App.jsx"}]},"preview":"function App() {\n\n    const [state, setState] = useState(false)\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      { title: \"Guides\", path: \"javascript:void(0)\" },\n      { title: \"Partners\", path: \"javascript:void(0)\" },\n      { title: \"Team\", path: \"javascript:void(0)\" }\n  ]\n  \n    return (\n        <>\n            <header>\n                <nav className=\"relative items-center pt-5 px-4 mx-auto max-w-screen-xl sm:px-8 sm:flex sm:space-x-6\">\n                    <div className=\"flex justify-between\">\n                        <a href=\"javascript:void(0)\">\n                            <img\n                                src=\"https://www.farmui.com/logo.svg\" \n                                width={120} \n                                height={50}\n                                alt=\"FarmUI logo\"\n                            />\n                        </a>\n                        <button className=\"text-gray-500 outline-none sm:hidden\"\n                            onClick={() => setState(!state)}\n                        >\n                            {\n                                state ? (\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                                        <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n                                    </svg>\n                                ) : (\n\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                                        <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M4 6h16M4 12h16M4 18h16\" />\n                                    </svg>\n                                )\n                            }\n                        </button>\n                    </div>\n                    <ul className={`bg-white shadow-md rounded-md p-4 flex-1 mt-12 absolute z-20 top-8 right-4 w-64 border sm:shadow-none sm:block sm:border-0 sm:mt-0 sm:static sm:w-auto ${state ? '' : 'hidden'}`}>\n                        <div className=\"order-1 justify-end items-center space-y-5 sm:flex sm:space-x-6 sm:space-y-0\">\n                            {\n                                navigation.map((item, idx) => (\n                                    <li className=\"text-gray-500 hover:text-indigo-600\" key={idx}>\n                                        <a href={item.path}>{item.title}</a>\n                                    </li>\n                                ))\n                            }\n                        </div>\n                    </ul>\n                </nav>\n            </header>\n            <section className=\"mt-24 mx-auto max-w-screen-xl pb-4 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-gray-800 font-bold text-4xl xl:text-5xl\">\n                        Optimize your website for\n                         <span className=\"text-indigo-600\"> Search engine</span>\n                    </h1>\n                    <p className=\"text-gray-500 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=\"mt-12\">\n                        <p className=\"text-gray-800 py-3\">\n                            Subscribe to our newsletter and we'll save your time\n                        </p>\n                        <form \n                            onSubmit={(e) => e.preventDefault()}\n                            className=\"items-center space-y-3 sm:justify-center sm:space-x-3 sm:space-y-0 sm:flex lg:justify-start\">\n                            <input\n                                type=\"text\"\n                                placeholder=\"Enter your email\"\n                                className=\"text-gray-500 border outline-none p-3 rounded-md w-full sm:w-72\"\n                            />\n                            <button className=\"outline-none bg-gray-700 text-white text-center px-4 py-3 rounded-md shadow w-full ring-offset-2 ring-gray-700 focus:ring-2  sm:w-auto\">\n                                Subscribe \n                            </button>\n                        </form>\n                    </div>\n                </div>\n                <div className=\"flex-1 text-center mt-4 lg:mt-0 lg:ml-3\">\n                    <img src=\"https://i.postimg.cc/kgd4WhyS/container.png\" className=\"w-full mx-auto sm:w-10/12  lg:w-full\" />\n                </div>\n            </section>\n        </>\n    )\n}","svelte":{"svelteTail":[{"label":"App.svelte","code":"<script>\n    import { writable } from 'svelte/store';\n\n    const state = writable(false);\n\n    const navigation = [\n        { title: \"Customers\", path: \"javascript:void(0)\" },\n        { title: \"Careers\", path: \"javascript:void(0)\" },\n        { title: \"Guides\", path: \"javascript:void(0)\" },\n        { title: \"Partners\", path: \"javascript:void(0)\" },\n        { title: \"Team\", path: \"javascript:void(0)\" }\n    ];\n</script>\n\n<header>\n    <nav class=\"relative items-center pt-5 px-4 mx-auto max-w-screen-xl sm:px-8 sm:flex sm:space-x-6\">\n        <div class=\"flex justify-between\">\n            <a href=\"javascript:void(0)\">\n                <img\n                    src=\"https://www.farmui.com/logo.svg\" \n                    width={120} \n                    height={50}\n                    alt=\"FarmUI logo\"\n                />\n            </a>\n            <button class=\"text-gray-500 outline-none sm:hidden\"\n                    on:click={() => state.update(n => !n)}\n            >\n                {#if $state}\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                        <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n                    </svg>\n                {:else}\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                        <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M4 6h16M4 12h16M4 18h16\" />\n                    </svg>\n                {/if}\n            </button>\n        </div>\n        <ul class=\"bg-white shadow-md rounded-md p-4 flex-1 mt-12 absolute z-20 top-8 right-4 w-64 border sm:shadow-none sm:block sm:border-0 sm:mt-0 sm:static sm:w-auto\" class:hidden={!$state}>\n            <div class=\"order-1 justify-end items-center space-y-5 sm:flex sm:space-x-6 sm:space-y-0\">\n                {#each navigation as item, idx (idx)}\n                    <li class=\"text-gray-500 hover:text-indigo-600\">\n                        <a href={item.path}>{item.title}</a>\n                    </li>\n                {/each}\n            </div>\n        </ul>\n    </nav>\n</header>\n<section class=\"mt-24 mx-auto max-w-screen-xl pb-4 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-gray-800 font-bold text-4xl xl:text-5xl\">\n            Optimize your website for\n            <span class=\"text-indigo-600\"> Search engine</span>\n        </h1>\n        <p class=\"text-gray-500 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>\n            <p class=\"text-gray-800 py-3\">\n                Subscribe to our newsletter and we'll save your time\n            </p>\n            <form class=\"items-center space-y-3 sm:justify-center sm:space-x-3 sm:space-y-0 sm:flex lg:justify-start\">\n                <input\n                    type=\"text\"\n                    placeholder=\"Enter your email\"\n                    class=\"text-gray-500 border outline-none p-3 rounded-md w-full sm:w-72\"\n                />\n                <button class=\"outline-none bg-gray-700 text-white text-center px-4 py-3 rounded-md shadow w-full ring-offset-2 ring-gray-700 focus:ring-2 sm:w-auto\">\n                    Subscribe \n                </button>\n            </form>\n        </div>\n    </div>\n    <div class=\"flex-1 text-center mt-4 lg:mt-0 lg:ml-3\">\n        <img src=\"https://i.postimg.cc/kgd4WhyS/container.png\" class=\"w-full mx-auto sm:w-10/12 lg:w-full\" />\n    </div>\n</section>\n"}]}}
slug: /heroes
id: c8915eb0-02ed-4961-bb6d-799910ad7f15
created_at: 2
---

<FUISecondaryHeroSection />