---
title: Primary Hero Section
category: Marketing
paid: false
isActive: true
ltr: {"html":{"htmlTail":[{"label":"index.html","code":"<div x-data=\"{ state: false }\">\n\n    <header>\n        <nav class=\"items-center pt-5 px-4 mx-auto max-w-screen-xl sm:px-8 md:flex md: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 md:hidden\" @click=\"state = !state\">\n                    <template x-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                    </template>\n                    <template x-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=\"M4 6h16M4 12h16M4 18h16\" />\n                        </svg>\n                    </template>\n                </button>\n            </div>\n            <ul :class=\"{'hidden': !state, 'flex-1': true, 'justify-between': true, 'mt-12': true, 'md:flex': true, 'md:mt-0': true}\">\n                <li class=\"order-2 pb-5 md:pb-0\">\n                    <a href=\"javascript:void(0)\" class=\"py-3 px-6 rounded-md shadow-md text-white text-center bg-indigo-500 focus:shadow-none block md:inline\">\n                        Sign In\n                    </a>\n                </li>\n                <div class=\"order-1 flex-1 justify-center items-center space-y-5 md:flex md:space-x-6 md:space-y-0\">\n                    <li class=\"text-gray-500 hover:text-indigo-600\">\n                        <a href=\"javascript:void(0)\">Customers</a>\n                    </li>\n                    <li class=\"text-gray-500 hover:text-indigo-600\">\n                        <a href=\"javascript:void(0)\">Careers</a>\n                    </li>\n                    <li class=\"text-gray-500 hover:text-indigo-600\">\n                        <a href=\"javascript:void(0)\">Guides</a>\n                    </li>\n                    <li class=\"text-gray-500 hover:text-indigo-600\">\n                        <a href=\"javascript:void(0)\">Partners</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 sm:px-8\">\n        <div class=\"text-center space-y-4\">\n            <h1 class=\"text-gray-800 font-bold text-4xl md: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 mx-auto leading-relaxed\">\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        <div class=\"mt-12 justify-center items-center space-y-3 sm:space-x-6 sm:space-y-0 sm:flex\">\n            <a href=\"javascript:void(0)\" class=\"px-10 py-3.5 w-full bg-indigo-600 text-white text-center rounded-md shadow-md block sm:w-auto\">\n                Get started\n            </a>\n            <a href=\"javascript:void(0)\" class=\"px-10 py-3.5 w-full text-gray-500 text-center border rounded-md duration-300 hover:text-indigo-600 hover:shadow block sm:w-auto\">\n                Try it out\n            </a>\n        </div>\n    </section>\n\n</div>"}]},"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  ]\n  \n    return (\n        <>\n            <header>\n                <nav className=\"items-center pt-5 px-4 mx-auto max-w-screen-xl sm:px-8 md:flex md:space-x-6\">\n                    <div className=\"flex justify-between\">\n                        <a href=\"javascript:void(0)\">\n                            <img\n                                src=\"/logo.svg\" \n                                width={120} \n                                height={50}\n                                alt=\"FarmUI logo\"\n                            />\n                        </a>\n                        <button className=\"text-gray-500 outline-none md: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={`flex-1 justify-between mt-12 md:flex md:mt-0 ${state ? '' : 'hidden'}`}>\n                        <li className=\"order-2 pb-5 md:pb-0\">\n                            <a href=\"javascript:void(0)\" className=\"py-3 px-6 rounded-md shadow-md text-white text-center bg-indigo-500 focus:shadow-none block md:inline\">\n                                Sign In\n                            </a>\n                        </li>\n                        <div className=\"order-1 flex-1 justify-center items-center space-y-5 md:flex md:space-x-6 md: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 sm:px-8\">\n                <div className=\"text-center space-y-4\">\n                    <h1 className=\"text-gray-800 font-bold text-4xl md: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 mx-auto leading-relaxed\">\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                <div className=\"mt-12 justify-center items-center space-y-3 sm:space-x-6 sm:space-y-0 sm:flex\">\n                    <a href=\"javascript:void(0)\" className=\"px-10 py-3.5 w-full bg-indigo-600 text-white text-center rounded-md shadow-md block sm:w-auto\">\n                        Get started\n                    </a>\n                    <a href=\"javascript:void(0)\" className=\"px-10 py-3.5 w-full text-gray-500 text-center border rounded-md duration-300 hover:text-indigo-600 hover:shadow block sm:w-auto\">\n                        Try it out\n                    </a>\n                </div>\n            </section>\n        </>\n    )\n}","vue":{"vueCss":[{"code":"<template>\n  <header class=\"hero-primary-header\">\n    <nav class=\"hero-primary-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        <li class=\"signin-li\">\n          <a href=\"javascript:void(0)\">\n            Sign In\n          </a>\n        </li>\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-primary\">\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>\n    <div class=\"hero-btns\">\n      <a href=\"javascript:void(0)\" class=\"btn-primary\">\n        Get started\n      </a>\n      <a href=\"javascript:void(0)\" class=\"btn-secondary\">\n        Try it out\n      </a>\n    </div>\n  </section>\n</template>\n\n<script>\nimport { ref } from 'vue';\nexport 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>\n","label":"App.vue"},{"code":".hero-primary-header .hero-primary-nav {\n  align-items: center;\n  padding: 1.25rem 1rem 0 1rem;\n  margin: auto;\n  max-width: 1280px;\n}\n\n@media (min-width: 640px) {\n  .hero-primary-header .hero-primary-nav {\n    padding-left: 2rem;\n    padding-right: 2rem;\n  }\n}\n\n@media (min-width: 768px) {\n  .hero-primary-header .hero-primary-nav {\n    display: flex;\n  }\n\n  .hero-primary-header .hero-primary-nav>*+* {\n    margin-left: 1.5rem;\n  }\n}\n\n.hero-primary-header .hero-primary-nav .nav-brand {\n  display: flex;\n  justify-content: space-between;\n}\n\n.hero-primary-header .hero-primary-nav .nav-brand .menu-btn {\n  color: #6b7280;\n  outline: none;\n}\n\n.hero-primary-header .hero-primary-nav .nav-brand .menu-btn svg {\n  width: 1.5rem;\n  height: 1.5rem;\n}\n\n@media (min-width: 768px) {\n  .hero-primary-header .hero-primary-nav .nav-brand .menu-btn {\n    display: none;\n  }\n}\n\n.hero-primary-header .hero-primary-nav .nav-items {\n  flex: 1;\n  justify-content: space-between;\n  margin-top: 3rem;\n}\n\n@media (min-width: 768px) {\n  .hero-primary-header .hero-primary-nav .nav-items {\n    display: flex;\n    margin-top: 0px;\n  }\n}\n\n.hero-primary-header .hero-primary-nav .nav-items .signin-li {\n  order: 2;\n  padding-bottom: 1.25rem;\n}\n\n@media (min-width: 768px) {\n  .hero-primary-header .hero-primary-nav .nav-items .signin-li {\n    padding-bottom: 0;\n  }\n}\n\n.hero-primary-header .hero-primary-nav .nav-items .signin-li a {\n  padding: 0.75rem 1.5rem 0.75rem 1.5rem;\n  border-radius: 0.375rem;\n  box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;\n  color: #FFF;\n  text-align: center;\n  background-color: #4f46e5;\n  display: block;\n}\n\n.hero-primary-header .hero-primary-nav .nav-items .signin-li a:focus {\n  box-shadow: none;\n}\n\n@media (min-width: 768px) {\n  .hero-primary-header .hero-primary-nav .nav-items .signin-li a {\n    display: inline;\n  }\n}\n\n.hero-primary-header .hero-primary-nav .nav-items .nav-items-li {\n  order: 1;\n  flex: 1;\n  justify-content: center;\n  align-items: center;\n}\n\n.hero-primary-header .hero-primary-nav .nav-items .nav-items-li>*+* {\n  margin-top: 1.25rem;\n}\n\n@media (min-width: 768px) {\n  .hero-primary-header .hero-primary-nav .nav-items .nav-items-li {\n    display: flex;\n  }\n\n  .hero-primary-header .hero-primary-nav .nav-items .nav-items-li>*+* {\n    margin-left: 1.5rem;\n  }\n\n  .hero-primary-header .hero-primary-nav .nav-items .nav-items-li>*+* {\n    margin-top: 0px;\n  }\n}\n\n.hero-primary-header .hero-primary-nav .nav-items .nav-items-li li {\n  color: #6b7280;\n}\n\n.hero-primary-header .hero-primary-nav .nav-items .nav-items-li li:hover {\n  color: #4f46e5;\n}\n\n.hero-primary {\n  margin: 6rem auto;\n  max-width: 1280px;\n  padding: 0 1rem;\n}\n\n@media (min-width: 640px) {\n  .hero-primary {\n    padding-left: 2rem;\n    padding-right: 2rem;\n  }\n}\n\n.hero-primary .hero-details {\n  text-align: center;\n}\n\n.hero-primary .hero-details>*+* {\n  margin-top: 1rem;\n}\n\n.hero-primary .hero-details h1 {\n  color: #1f2937;\n  font-weight: 700;\n  font-size: 2.25rem;\n  line-height: 2.5rem;\n}\n\n.hero-primary .hero-details h1 span {\n  color: #4f46e5;\n}\n\n@media (min-width: 768px) {\n  .hero-primary .hero-details h1 {\n    font-size: 3rem;\n    line-height: 1;\n  }\n}\n\n.hero-primary .hero-details p {\n  color: #6b7280;\n  max-width: 36rem;\n  margin-left: auto;\n  margin-right: auto;\n  line-height: 1.625;\n}\n\n.hero-primary .hero-btns {\n  margin-top: 3rem;\n  align-items: center;\n  justify-content: center;\n}\n\n.hero-primary .hero-btns>*+* {\n  margin-top: 0.75rem;\n}\n\n@media (min-width: 640px) {\n  .hero-primary .hero-btns {\n    display: flex;\n  }\n\n  .hero-primary .hero-btns>*+* {\n    margin-left: 1.5rem;\n  }\n\n  .hero-primary .hero-btns>*+* {\n    margin-top: 0px;\n  }\n}\n\n.hero-primary .hero-btns .btn-primary,\n.hero-primary .hero-btns .btn-secondary {\n  padding: 0.875rem 2.5rem 0.875rem 2.5rem;\n  width: 100%;\n  text-align: center;\n  border-radius: 0.375rem;\n  display: block;\n}\n\n.hero-primary .hero-btns .btn-primary {\n  background-color: #4f46e5;\n  color: #FFF;\n  box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;\n}\n\n.hero-primary .hero-btns .btn-secondary {\n  border: solid 1px #e5e7eb;\n  transition: 300ms;\n}\n\n.hero-primary .hero-btns .btn-secondary:hover {\n  box-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;\n}\n\n@media (min-width: 640px) {\n\n  .hero-primary .hero-btns .btn-primary,\n  .hero-primary .hero-btns .btn-secondary {\n    width: auto;\n  }\n}\n\n.hide-nav, .hidden {\n  display: none;\n}\n.block {\n  display: block;\n}","label":"style.css"}],"vueTail":[{"code":"<template>\n  <header>\n    <nav class=\"items-center pt-5 px-4 mx-auto max-w-screen-xl sm:px-8 md:flex md: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 md:hidden\" @click=\"menuOpen()\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"\n            :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\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"\n            :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=\"flex-1 justify-between mt-12 md:flex md:mt-0\" :class=\"[open ? 'block' : 'hidden']\">\n        <li class=\"order-2 pb-5 md:pb-0\">\n          <a href=\"javascript:void(0)\"\n            class=\"py-3 px-6 rounded-md shadow-md text-white text-center bg-indigo-500 focus:shadow-none block md:inline\">\n            Sign In\n          </a>\n        </li>\n        <div class=\"order-1 flex-1 justify-center items-center space-y-5 md:flex md:space-x-6 md: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 sm:px-8\">\n    <div class=\"text-center space-y-4\">\n      <h1 class=\"text-gray-800 font-bold text-4xl md: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 mx-auto leading-relaxed\">\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    <div class=\"mt-12 justify-center items-center space-y-3 sm:space-x-6 sm:space-y-0 sm:flex\">\n      <a href=\"javascript:void(0)\"\n        class=\"px-10 py-3.5 w-full bg-indigo-600 text-white text-center rounded-md shadow-md block sm:w-auto\">\n        Get started\n      </a>\n      <a href=\"javascript:void(0)\"\n        class=\"px-10 py-3.5 w-full text-gray-500 text-center border rounded-md duration-300 hover:text-indigo-600 hover:shadow block sm:w-auto\">\n        Try it out\n      </a>\n    </div>\n  </section>\n</template>\n\n<script>\nimport { ref } from 'vue';\nexport 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"}]},"svelte":{"svelteTail":[{"code":"<script>\n  let state = 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  ];\n</script>\n\n<header>\n  <nav class=\"items-center pt-5 px-4 mx-auto max-w-screen-xl sm:px-8 md:flex md: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 md:hidden\" on:click={() => state = !state}>\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=\"flex-1 justify-between mt-12 md:flex md:mt-0\" class:hidden={!state}>\n      <li class=\"order-2 pb-5 md:pb-0\">\n        <a href=\"javascript:void(0)\" class=\"py-3 px-6 rounded-md shadow-md text-white text-center bg-indigo-500 focus:shadow-none block md:inline\">\n          Sign In\n        </a>\n      </li>\n      <div class=\"order-1 flex-1 justify-center items-center space-y-5 md:flex md:space-x-6 md:space-y-0\">\n        {#each navigation as item, idx}\n          <li class=\"text-gray-500 hover:text-indigo-600\" key={idx}>\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 sm:px-8\">\n  <div class=\"text-center space-y-4\">\n    <h1 class=\"text-gray-800 font-bold text-4xl md: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 mx-auto leading-relaxed\">\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  <div class=\"mt-12 justify-center items-center space-y-3 sm:space-x-6 sm:space-y-0 sm:flex\">\n    <a href=\"javascript:void(0)\" class=\"px-10 py-3.5 w-full bg-indigo-600 text-white text-center rounded-md shadow-md block sm:w-auto\">\n      Get started\n    </a>\n    <a href=\"javascript:void(0)\" class=\"px-10 py-3.5 w-full text-gray-500 text-center border rounded-md duration-300 hover:text-indigo-600 hover:shadow block sm:w-auto\">\n      Try it out\n    </a>\n  </div>\n</section>\n","label":"App.svelte"}]},"react":{"jsxTail":[{"label":"App.jsx","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  ]\n  \n    return (\n        <>\n            <header>\n                <nav className=\"items-center pt-5 px-4 mx-auto max-w-screen-xl sm:px-8 md:flex md: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 md: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={`flex-1 justify-between mt-12 md:flex md:mt-0 ${state ? '' : 'hidden'}`}>\n                        <li className=\"order-2 pb-5 md:pb-0\">\n                            <a href=\"javascript:void(0)\" className=\"py-3 px-6 rounded-md shadow-md text-white text-center bg-indigo-500 focus:shadow-none block md:inline\">\n                                Sign In\n                            </a>\n                        </li>\n                        <div className=\"order-1 flex-1 justify-center items-center space-y-5 md:flex md:space-x-6 md: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 sm:px-8\">\n                <div className=\"text-center space-y-4\">\n                    <h1 className=\"text-gray-800 font-bold text-4xl md: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 mx-auto leading-relaxed\">\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                <div className=\"mt-12 justify-center items-center space-y-3 sm:space-x-6 sm:space-y-0 sm:flex\">\n                    <a href=\"javascript:void(0)\" className=\"px-10 py-3.5 w-full bg-indigo-600 text-white text-center rounded-md shadow-md block sm:w-auto\">\n                        Get started\n                    </a>\n                    <a href=\"javascript:void(0)\" className=\"px-10 py-3.5 w-full text-gray-500 text-center border rounded-md duration-300 hover:text-indigo-600 hover:shadow block sm:w-auto\">\n                        Try it out\n                    </a>\n                </div>\n            </section>\n        </>\n    )\n}"}],"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  ]\n  \n    return (\n        <>\n            <header className=\"hero-primary-header\">\n                <nav className=\"hero-primary-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                        <li className=\"signin-li\">\n                            <a href=\"javascript:void(0)\">\n                                Sign In\n                            </a>\n                        </li>\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-primary\">\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>\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            </section>\n        </>\n    )\n}\n","label":"App.jsx"},{"code":".hero-primary-header .hero-primary-nav {\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-primary-header .hero-primary-nav {\n    padding-left: 2rem;\n    padding-right: 2rem;\n  }\n}\n@media (min-width: 768px) {\n  .hero-primary-header .hero-primary-nav {\n    display: flex;\n  }\n  .hero-primary-header .hero-primary-nav > * + * {\n    margin-left: 1.5rem;\n  }\n}\n.hero-primary-header .hero-primary-nav .nav-brand {\n  display: flex;\n  justify-content: space-between;\n}\n.hero-primary-header .hero-primary-nav .nav-brand .menu-btn {\n  color: #6b7280;\n  outline: none;\n}\n.hero-primary-header .hero-primary-nav .nav-brand .menu-btn svg {\n  width: 1.5rem;\n  height: 1.5rem;\n}\n@media (min-width: 768px) {\n  .hero-primary-header .hero-primary-nav .nav-brand .menu-btn {\n    display: none;\n  }\n}\n.hero-primary-header .hero-primary-nav .nav-items {\n  flex: 1;\n  justify-content: space-between;\n  margin-top: 3rem;\n}\n@media (min-width: 768px) {\n  .hero-primary-header .hero-primary-nav .nav-items {\n    display: flex;\n    margin-top: 0px;\n  }\n}\n.hero-primary-header .hero-primary-nav .nav-items .signin-li {\n  order: 2;\n  padding-bottom: 1.25rem;\n}\n@media (min-width: 768px) {\n  .hero-primary-header .hero-primary-nav .nav-items .signin-li {\n    padding-bottom: 0;\n  }\n}\n.hero-primary-header .hero-primary-nav .nav-items .signin-li a {\n  padding: 0.75rem 1.5rem 0.75rem 1.5rem;\n  border-radius: 0.375rem;\n  box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;\n  color: #FFF;\n  text-align: center;\n  background-color: #4f46e5;\n  display: block;\n}\n.hero-primary-header .hero-primary-nav .nav-items .signin-li a:focus {\n  box-shadow: none;\n}\n@media (min-width: 768px) {\n  .hero-primary-header .hero-primary-nav .nav-items .signin-li a {\n    display: inline;\n  }\n}\n.hero-primary-header .hero-primary-nav .nav-items .nav-items-li {\n  order: 1;\n  flex: 1;\n  justify-content: center;\n  align-items: center;\n}\n.hero-primary-header .hero-primary-nav .nav-items .nav-items-li > * + * {\n  margin-top: 1.25rem;\n}\n@media (min-width: 768px) {\n  .hero-primary-header .hero-primary-nav .nav-items .nav-items-li {\n    display: flex;\n  }\n  .hero-primary-header .hero-primary-nav .nav-items .nav-items-li > * + * {\n    margin-left: 1.5rem;\n  }\n  .hero-primary-header .hero-primary-nav .nav-items .nav-items-li > * + * {\n    margin-top: 0px;\n  }\n}\n.hero-primary-header .hero-primary-nav .nav-items .nav-items-li li {\n  color: #6b7280;\n}\n.hero-primary-header .hero-primary-nav .nav-items .nav-items-li li:hover {\n  color: #4f46e5;\n}\n\n.hero-primary {\n  margin: 6rem auto;\n  max-width: 1280px;\n  padding: 0 1rem;\n}\n@media (min-width: 640px) {\n  .hero-primary {\n    padding-left: 2rem;\n    padding-right: 2rem;\n  }\n}\n.hero-primary .hero-details {\n  text-align: center;\n}\n.hero-primary .hero-details > * + * {\n  margin-top: 1rem;\n}\n.hero-primary .hero-details h1 {\n  color: #1f2937;\n  font-weight: 700;\n  font-size: 2.25rem;\n  line-height: 2.5rem;\n}\n.hero-primary .hero-details h1 span {\n  color: #4f46e5;\n}\n@media (min-width: 768px) {\n  .hero-primary .hero-details h1 {\n    font-size: 3rem;\n    line-height: 1;\n  }\n}\n.hero-primary .hero-details p {\n  color: #6b7280;\n  max-width: 36rem;\n  margin-left: auto;\n  margin-right: auto;\n  line-height: 1.625;\n}\n.hero-primary .hero-btns {\n  margin-top: 3rem;\n  align-items: center;\n  justify-content: center;\n}\n.hero-primary .hero-btns > * + * {\n  margin-top: 0.75rem;\n}\n@media (min-width: 640px) {\n  .hero-primary .hero-btns {\n    display: flex;\n  }\n  .hero-primary .hero-btns > * + * {\n    margin-left: 1.5rem;\n  }\n  .hero-primary .hero-btns > * + * {\n    margin-top: 0px;\n  }\n}\n.hero-primary .hero-btns .btn-primary, .hero-primary .hero-btns .btn-secondary {\n  padding: 0.875rem 2.5rem 0.875rem 2.5rem;\n  width: 100%;\n  text-align: center;\n  border-radius: 0.375rem;\n  display: block;\n}\n.hero-primary .hero-btns .btn-primary {\n  background-color: #4f46e5;\n  color: #FFF;\n  box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;\n}\n.hero-primary .hero-btns .btn-secondary {\n  border: solid 1px #e5e7eb;\n  transition: 300ms;\n}\n.hero-primary .hero-btns .btn-secondary:hover {\n  box-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;\n}\n@media (min-width: 640px) {\n  .hero-primary .hero-btns .btn-primary,\n  .hero-primary .hero-btns .btn-secondary {\n    width: auto;\n  }\n}\n\n.hide-nav {\n  display: none;\n}\n","label":"style.css"}]}}
slug: /heroes
id: 84867f8a-696f-4444-ad5f-88a21442bae9
created_at: 1
---

<FUIPrimaryHeroSection />