---
title: Hero Section with image
category: Marketing
paid: false
isActive: true
ltr: {"html":{"htmlTail":[{"code":"<div class=\"relative\" x-data=\"{ state: false }\">\n  <div\n    class=\"absolute inset-0 blur-xl h-[580px]\"\n    style=\"\n      background: linear-gradient(\n        143.6deg,\n        rgba(192, 132, 252, 0) 20.79%,\n        rgba(232, 121, 249, 0.26) 40.92%,\n        rgba(204, 171, 238, 0) 70.35%\n      );\n    \"\n  ></div>\n  <div class=\"relative\">\n    <header>\n      <div\n        :class=\"{'mx-2 pb-5': state, 'hidden': !state}\"\n        class=\"md:hidden\"\n      >\n        <div class=\"flex items-center justify-between py-5 md:block\">\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          <div class=\"md:hidden\">\n            <button\n              @click=\"state = !state\"\n              class=\"menu-btn text-gray-500 hover:text-gray-800\"\n            >\n              <!-- Use x-show for conditional rendering in Alpine -->\n              <template x-if=\"state\">\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  class=\"h-6 w-6\"\n                  viewBox=\"0 0 20 20\"\n                  fill=\"currentColor\"\n                >\n                  <path\n                    fill-rule=\"evenodd\"\n                    d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\n                    clip-rule=\"evenodd\"\n                  />\n                </svg>\n              </template>\n              <template x-if=\"!state\">\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  fill=\"none\"\n                  viewBox=\"0 0 24 24\"\n                  stroke-width=\"1.5\"\n                  stroke=\"currentColor\"\n                  class=\"w-6 h-6\"\n                >\n                  <path\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    d=\"M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5\"\n                  />\n                </svg>\n              </template>\n            </button>\n          </div>\n        </div>\n      </div>\n      <nav\n        :class=\"{'absolute top-0 inset-x-0 bg-white shadow-lg rounded-xl border mx-2 mt-2 md:shadow-none md:border-none md:mx-0 md:mt-0 md:relative md:bg-transparent': state}\"\n        class=\"pb-5 md:text-sm\"\n      >\n        <div\n          class=\"gap-x-14 items-center max-w-screen-xl mx-auto px-4 md:flex md:px-8\"\n        >\n          <div class=\"flex items-center justify-between py-5 md:block\">\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            <div class=\"md:hidden\">\n              <button\n                @click=\"state = !state\"\n                class=\"menu-btn text-gray-500 hover:text-gray-800\"\n              >\n                <template x-if=\"state\">\n                  <svg\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    class=\"h-6 w-6\"\n                    viewBox=\"0 0 20 20\"\n                    fill=\"currentColor\"\n                  >\n                    <path\n                      fill-rule=\"evenodd\"\n                      d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\n                      clip-rule=\"evenodd\"\n                    />\n                  </svg>\n                </template>\n                <template x-if=\"!state\">\n                  <svg\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    fill=\"none\"\n                    viewBox=\"0 0 24 24\"\n                    stroke-width=\"1.5\"\n                    stroke=\"currentColor\"\n                    class=\"w-6 h-6\"\n                  >\n                    <path\n                      stroke-linecap=\"round\"\n                      stroke-linejoin=\"round\"\n                      d=\"M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5\"\n                    />\n                  </svg>\n                </template>\n              </button>\n            </div>\n          </div>\n          <div\n            :class=\"{'block': state, 'hidden': !state}\"\n            class=\"flex-1 items-center mt-8 md:mt-0 md:flex\"\n          >\n            <ul\n              class=\"flex-1 justify-center items-center space-y-6 md:flex md:space-x-6 md:space-y-0\"\n            >\n              <template\n                x-for=\"item in [\n                              { title: 'Features', path: 'javascript:void(0)' },\n                              { title: 'Integrations', path: 'javascript:void(0)' },\n                              { title: 'Customers', path: 'javascript:void(0)' },\n                              { title: 'Pricing', path: 'javascript:void(0)' }\n                          ]\"\n                :key=\"item.title\"\n              >\n                <li class=\"text-gray-700 hover:text-gray-900\">\n                  <a\n                    :href=\"item.path\"\n                    class=\"block\"\n                    x-text=\"item.title\"\n                  ></a>\n                </li>\n              </template>\n            </ul>\n            <div\n              class=\"items-center justify-end mt-6 space-y-6 md:flex md:mt-0\"\n            >\n              <a\n                href=\"javascript:void(0)\"\n                class=\"flex items-center justify-center gap-x-1 py-2 px-4 text-white font-medium bg-gray-800 hover:bg-gray-700 active:bg-gray-900 rounded-full md:inline-flex\"\n              >\n                Sign in\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  viewBox=\"0 0 20 20\"\n                  fill=\"currentColor\"\n                  class=\"w-5 h-5\"\n                >\n                  <path\n                    fill-rule=\"evenodd\"\n                    d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\"\n                    clip-rule=\"evenodd\"\n                  />\n                </svg>\n              </a>\n            </div>\n          </div>\n        </div>\n      </nav>\n    </header>\n    <!-- Section -->\n    <section>\n      <div\n        class=\"max-w-screen-xl mx-auto px-4 py-28 gap-12 text-gray-600 overflow-hidden md:px-8 md:flex\"\n      >\n        <div class=\"flex-none space-y-5 max-w-xl\">\n          <a\n            href=\"javascript:void(0)\"\n            class=\"inline-flex gap-x-6 items-center rounded-full p-1 pr-6 border text-sm font-medium duration-150 hover:bg-white\"\n          >\n            <span\n              class=\"inline-block rounded-full px-3 py-1 bg-indigo-600 text-white\"\n            >\n              News\n            </span>\n            <p class=\"flex items-center\">\n              Read the launch post from here\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 20 20\"\n                fill=\"currentColor\"\n                class=\"w-5 h-5\"\n              >\n                <path\n                  fillRule=\"evenodd\"\n                  d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\"\n                  clipRule=\"evenodd\"\n                />\n              </svg>\n            </p>\n          </a>\n          <h1 class=\"text-4xl text-gray-800 font-extrabold sm:text-5xl\">\n            Build your SaaS exactly how you want\n          </h1>\n          <p>\n            Sed ut perspiciatis unde omnis iste natus voluptatem accusantium\n            doloremque laudantium, totam rem aperiam, eaque ipsa quae.\n          </p>\n          <div class=\"flex items-center gap-x-3 sm:text-sm\">\n            <a\n              href=\"javascript:void(0)\"\n              class=\"flex items-center justify-center gap-x-1 py-2 px-4 text-white font-medium bg-gray-800 duration-150 hover:bg-gray-700 active:bg-gray-900 rounded-full md:inline-flex\"\n            >\n              Get started\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 20 20\"\n                fill=\"currentColor\"\n                class=\"w-5 h-5\"\n              >\n                <path\n                  fillRule=\"evenodd\"\n                  d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\"\n                  clipRule=\"evenodd\"\n                />\n              </svg>\n            </a>\n            <a\n              href=\"javascript:void(0)\"\n              class=\"flex items-center justify-center gap-x-1 py-2 px-4 text-gray-700 hover:text-gray-900 font-medium duration-150 md:inline-flex\"\n            >\n              Contact sales\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 20 20\"\n                fill=\"currentColor\"\n                class=\"w-5 h-5\"\n              >\n                <path\n                  fillRule=\"evenodd\"\n                  d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\"\n                  clipRule=\"evenodd\"\n                />\n              </svg>\n            </a>\n          </div>\n        </div>\n        <div class=\"flex-1 hidden md:block\">\n          <!-- Replace with your image -->\n          <img\n            src=\"https://raw.githubusercontent.com/sidiDev/remote-assets/c86a7ae02ac188442548f510b5393c04140515d7/undraw_progressive_app_m-9-ms_oftfv5.svg\"\n            class=\"max-w-xl\"\n          />\n        </div>\n      </div>\n    </section>\n  </div>\n</div>\n\n<script>\n  document.addEventListener(\"alpine:init\", () => {\n    Alpine.data(\"dropdown\", () => ({\n      open: false,\n      toggle() {\n        this.open = !this.open;\n      },\n      close() {\n        this.open = false;\n      },\n      init() {\n        this.$watch(\"open\", (value) => {\n          if (value) {\n            this.$nextTick(() => {\n              window.addEventListener(\"click\", this.close);\n            });\n          } else {\n            window.removeEventListener(\"click\", this.close);\n          }\n        });\n      },\n    }));\n  });\n</script>","label":"index.html"}]},"vue":{"vueTail":[{"label":"App.vue","code":"<template>\n  <div class=\"relative\">\n    <div\n      class=\"absolute inset-0 blur-xl h-[580px]\"\n      :style=\"{\n        background: 'linear-gradient(143.6deg, rgba(192, 132, 252, 0) 20.79%, rgba(232, 121, 249, 0.26) 40.92%, rgba(204, 171, 238, 0) 70.35%)',\n      }\"\n    ></div>\n    <div class=\"relative\">\n      <header>\n        <div\n          :class=\"{'mx-2 pb-5': state, 'hidden': !state}\"\n          class=\"md:hidden\"\n        >\n          <div class=\"flex items-center justify-between py-5 md:block\">\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 @click=\"toggleState\" class=\"menu-btn text-gray-500 hover:text-gray-800\">\n              <svg v-if=\"state\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                class=\"h-6 w-6\"\n                viewBox=\"0 0 20 20\"\n                fill=\"currentColor\"\n              >\n                <path\n                  fill-rule=\"evenodd\"\n                  d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\n                  clip-rule=\"evenodd\"\n                />\n              </svg>\n              <svg v-else\n                xmlns=\"http://www.w3.org/2000/svg\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke-width=\"1.5\"\n                stroke=\"currentColor\"\n                class=\"w-6 h-6\"\n              >\n                  <path\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    d=\"M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5\"\n                  />\n              </svg>\n            </button>\n          </div>\n        </div>\n        <nav\n          :class=\"{'absolute top-0 inset-x-0 bg-white shadow-lg rounded-xl border mx-2 mt-2 md:shadow-none md:border-none md:mx-0 md:mt-0 md:relative md:bg-transparent': state}\"\n          class=\"pb-5 md:text-sm\"\n        >\n          <div class=\"gap-x-14 items-center max-w-screen-xl mx-auto px-4 md:flex md:px-8\">\n            <!-- Logo and Menu Toggle Button - Desktop View -->\n            <div class=\"flex items-center justify-between py-5 md:block\">\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 @click=\"toggleState\" class=\"menu-btn text-gray-500 hover:text-gray-800\">\n                <svg v-if=\"state\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  class=\"h-6 w-6\"\n                  viewBox=\"0 0 20 20\"\n                  fill=\"currentColor\"\n                >\n                <path\n                  fill-rule=\"evenodd\"\n                  d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\n                  clip-rule=\"evenodd\"\n                />\n                </svg>\n                <svg v-else\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  fill=\"none\"\n                  viewBox=\"0 0 24 24\"\n                  stroke-width=\"1.5\"\n                  stroke=\"currentColor\"\n                  class=\"w-6 h-6\"\n                >\n                  <path\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    d=\"M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5\"\n                  />\n                </svg>\n              </button>\n            </div>\n            <!-- Navigation Links -->\n            <div :class=\"{'block': state, 'hidden': !state}\" class=\"flex-1 items-center mt-8 md:mt-0 md:flex\">\n              <ul class=\"flex-1 justify-center items-center space-y-6 md:flex md:space-x-6 md:space-y-0\">\n                <li\n                  v-for=\"item in menuItems\"\n                  :key=\"item.title\"\n                  class=\"text-gray-700 hover:text-gray-900\"\n                >\n                  <a :href=\"item.path\" class=\"block\">{{ item.title }}</a>\n                </li>\n              </ul>\n              <div class=\"items-center justify-end mt-6 space-y-6 md:flex md:mt-0\">\n                <a\n                  href=\"javascript:void(0)\"\n                  class=\"flex items-center justify-center gap-x-1 py-2 px-4 text-white font-medium bg-gray-800 hover:bg-gray-700 active:bg-gray-900 rounded-full md:inline-flex\"\n                >\n                  Sign in\n                  <svg\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    viewBox=\"0 0 20 20\"\n                    fill=\"currentColor\"\n                    class=\"w-5 h-5\"\n                  >\n                    <path\n                      fill-rule=\"evenodd\"\n                      d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\"\n                      clip-rule=\"evenodd\"\n                    />\n                  </svg>\n                </a>\n              </div>\n            </div>\n          </div>\n        </nav>\n      </header>\n      <!-- Section -->\n        <section>\n          <div class=\"max-w-screen-xl mx-auto px-4 py-28 gap-12 text-gray-600 overflow-hidden md:px-8 md:flex\">\n              <div class='flex-none space-y-5 max-w-xl'>\n                  <a href=\"javascript:void(0)\" class='inline-flex gap-x-6 items-center rounded-full p-1 pr-6 border text-sm font-medium duration-150 hover:bg-white'>\n                      <span class='inline-block rounded-full px-3 py-1 bg-indigo-600 text-white'>\n                          News\n                      </span>\n                      <p class='flex items-center'>\n                          Read the launch post from here\n                          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" class=\"w-5 h-5\">\n                              <path fillRule=\"evenodd\" d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\" clipRule=\"evenodd\" />\n                          </svg>\n                      </p>\n                  </a>\n                  <h1 class=\"text-4xl text-gray-800 font-extrabold sm:text-5xl\">\n                      Build your SaaS exactly how you want\n                  </h1>\n                  <p>\n                      Sed ut perspiciatis unde omnis iste natus voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae.\n                  </p>\n                  <div class='flex items-center gap-x-3 sm:text-sm'>\n                      <a href=\"javascript:void(0)\" class=\"flex items-center justify-center gap-x-1 py-2 px-4 text-white font-medium bg-gray-800 duration-150 hover:bg-gray-700 active:bg-gray-900 rounded-full md:inline-flex\">\n                          Get started\n                          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" class=\"w-5 h-5\">\n                              <path fillRule=\"evenodd\" d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\" clipRule=\"evenodd\" />\n                          </svg>\n                      </a>\n                      <a href=\"javascript:void(0)\" class=\"flex items-center justify-center gap-x-1 py-2 px-4 text-gray-700 hover:text-gray-900 font-medium duration-150 md:inline-flex\">\n                          Contact sales\n                          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" class=\"w-5 h-5\">\n                              <path fillRule=\"evenodd\" d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\" clipRule=\"evenodd\" />\n                          </svg>\n                      </a>\n                  </div>\n              </div>\n              <div class='flex-1 hidden md:block'>\n                  <img src=\"https://raw.githubusercontent.com/sidiDev/remote-assets/c86a7ae02ac188442548f510b5393c04140515d7/undraw_progressive_app_m-9-ms_oftfv5.svg\" class=\"max-w-xl\" />\n              </div>\n          </div>\n      </section>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'Dropdown',\n  data() {\n    return {\n      state: false,\n      menuItems: [\n        { title: 'Features', path: 'javascript:void(0)' },\n        { title: 'Integrations', path: 'javascript:void(0)' },\n        { title: 'Customers', path: 'javascript:void(0)' },\n        { title: 'Pricing', path: 'javascript:void(0)' },\n      ],\n    };\n  },\n  methods: {\n    toggleState() {\n      this.state = !this.state;\n    }\n  },\n};\n</script>"}],"vueCss":[]},"svelte":{"svelteTail":[{"label":"App.svelte","code":"<script>\n  import { onMount } from 'svelte';\n\n  let state = false;\n\n  const navigation = [\n    { title: \"Features\", path: \"#\" },\n    { title: \"Integrations\", path: \"#\" },\n    { title: \"Customers\", path: \"#\" },\n    { title: \"Pricing\", path: \"#\" }\n  ];\n</script>\n\n<div class='relative'>\n  <div class='absolute inset-0 blur-xl h-[580px]' style=\"background: linear-gradient(143.6deg, rgba(192, 132, 252, 0) 20.79%, rgba(232, 121, 249, 0.26) 40.92%, rgba(204, 171, 238, 0) 70.35%)\"></div>\n  <div class='relative'>\n    <header>\n      <div class={`md:hidden ${state ? \"mx-2 pb-5\" : \"hidden\"}`}>\n        <div class=\"flex items-center justify-between py-5 md:block\">\n          <a href=\"#\">\n            <img\n              src=\"https://www.farmui.com/logo.svg\"\n              width={120}\n              height={50}\n              alt=\"FarmUI logo\"\n            />\n          </a>\n          <div class=\"md:hidden\">\n            <button class=\"menu-btn text-gray-500 hover:text-gray-800\"\n              on:click={() => state = !state}\n            >\n              {#if state}\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  class=\"h-6 w-6\"\n                  viewBox=\"0 0 20 20\"\n                  fill=\"currentColor\"\n                >\n                  <path\n                    fill-rule=\"evenodd\"\n                    d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\n                    clip-rule=\"evenodd\"\n                  />\n                </svg>\n              {:else}\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  fill=\"none\"\n                  viewBox=\"0 0 24 24\"\n                  stroke-width=\"1.5\"\n                  stroke=\"currentColor\"\n                  class=\"w-6 h-6\"\n                >\n                  <path\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    d=\"M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5\"\n                  />\n                </svg>\n              {/if}\n            </button>\n          </div>\n        </div>\n      </div>\n      <nav class={`pb-5 md:text-sm ${state ? \"absolute top-0 inset-x-0 bg-white shadow-lg rounded-xl border mx-2 mt-2 md:shadow-none md:border-none md:mx-0 md:mt-0 md:relative md:bg-transparent\" : \"\"}`}>\n        <div class=\"gap-x-14 items-center max-w-screen-xl mx-auto px-4 md:flex md:px-8\">\n          <div class=\"flex items-center justify-between py-5 md:block\">\n            <a href=\"#\">\n              <img\n                src=\"https://www.farmui.com/logo.svg\"\n                width={120}\n                height={50}\n                alt=\"FarmUI logo\"\n              />\n            </a>\n            <div class=\"md:hidden\">\n              <button class=\"menu-btn text-gray-500 hover:text-gray-800\"\n                on:click={() => state = !state}\n              >\n                {#if state}\n                  <svg\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    class=\"h-6 w-6\"\n                    viewBox=\"0 0 20 20\"\n                    fill=\"currentColor\"\n                  >\n                    <path\n                      fill-rule=\"evenodd\"\n                      d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\n                      clip-rule=\"evenodd\"\n                    />\n                  </svg>\n                {:else}\n                  <svg\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    fill=\"none\"\n                    viewBox=\"0 0 24 24\"\n                    stroke-width=\"1.5\"\n                    stroke=\"currentColor\"\n                    class=\"w-6 h-6\"\n                  >\n                    <path\n                      stroke-linecap=\"round\"\n                      stroke-linejoin=\"round\"\n                      d=\"M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5\"\n                    />\n                  </svg>\n                {/if}\n              </button>\n            </div>\n          </div>\n          <div class={`flex-1 items-center mt-8 md:mt-0 md:flex ${state ? 'block' : 'hidden'} `}>\n            <ul class=\"flex-1 justify-center items-center space-y-6 md:flex md:space-x-6 md:space-y-0\">\n              {#each navigation as item (item.title)}\n                <li class=\"text-gray-700 hover:text-gray-900\">\n                  <a href={item.path} class=\"block\">\n                    {item.title}\n                  </a>\n                </li>\n              {/each}\n            </ul>\n            <div class=\"items-center justify-end mt-6 space-y-6 md:flex md:mt-0\">\n              <a href=\"#\" class=\"flex items-center justify-center gap-x-1 py-2 px-4 text-white font-medium bg-gray-800 hover:bg-gray-700 active:bg-gray-900 rounded-full md:inline-flex\">\n                Sign in\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  viewBox=\"0 0 20 20\"\n                  fill=\"currentColor\"\n                  class=\"w-5 h-5\"\n                >\n                  <path\n                    fill-rule=\"evenodd\"\n                    d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\"\n                    clip-rule=\"evenodd\"\n                  />\n                </svg>\n              </a>\n            </div>\n          </div>\n        </div>\n      </nav>\n    </header>\n        <!-- Section -->\n    <section>\n      <div class=\"max-w-screen-xl mx-auto px-4 py-28 gap-12 text-gray-600 overflow-hidden md:px-8 md:flex\">\n          <div class='flex-none space-y-5 max-w-xl'>\n              <a href=\"javascript:void(0)\" class='inline-flex gap-x-6 items-center rounded-full p-1 pr-6 border text-sm font-medium duration-150 hover:bg-white'>\n                  <span class='inline-block rounded-full px-3 py-1 bg-indigo-600 text-white'>\n                      News\n                  </span>\n                  <p class='flex items-center'>\n                      Read the launch post from here\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" class=\"w-5 h-5\">\n                          <path fillRule=\"evenodd\" d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\" clipRule=\"evenodd\" />\n                      </svg>\n                  </p>\n              </a>\n              <h1 class=\"text-4xl text-gray-800 font-extrabold sm:text-5xl\">\n                  Build your SaaS exactly how you want\n              </h1>\n              <p>\n                  Sed ut perspiciatis unde omnis iste natus voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae.\n              </p>\n              <div class='flex items-center gap-x-3 sm:text-sm'>\n                  <a href=\"javascript:void(0)\" class=\"flex items-center justify-center gap-x-1 py-2 px-4 text-white font-medium bg-gray-800 duration-150 hover:bg-gray-700 active:bg-gray-900 rounded-full md:inline-flex\">\n                      Get started\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" class=\"w-5 h-5\">\n                          <path fillRule=\"evenodd\" d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\" clipRule=\"evenodd\" />\n                      </svg>\n                  </a>\n                  <a href=\"javascript:void(0)\" class=\"flex items-center justify-center gap-x-1 py-2 px-4 text-gray-700 hover:text-gray-900 font-medium duration-150 md:inline-flex\">\n                      Contact sales\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" class=\"w-5 h-5\">\n                          <path fillRule=\"evenodd\" d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\" clipRule=\"evenodd\" />\n                      </svg>\n                  </a>\n              </div>\n          </div>\n          <div class='flex-1 hidden md:block'>\n              <img src=\"https://raw.githubusercontent.com/sidiDev/remote-assets/c86a7ae02ac188442548f510b5393c04140515d7/undraw_progressive_app_m-9-ms_oftfv5.svg\" class=\"max-w-xl\" />\n          </div>\n      </div>\n  </section>\n  </div>\n</div>"}]},"preview":"function App() {\n\n    const [state, setState] = useState(false)\n\n    // Replace javascript:void(0) paths with your paths\n    const navigation = [\n        { title: \"Features\", path: \"javascript:void(0)\" },\n        { title: \"Integrations\", path: \"javascript:void(0)\" },\n        { title: \"Customers\", path: \"javascript:void(0)\" },\n        { title: \"Pricing\", path: \"javascript:void(0)\" }\n    ]\n\n    useEffect(() => {\n        document.onclick = (e) => {\n            const target = e.target;\n            if (!target.closest(\".menu-btn\")) setState(false);\n        };\n    }, [])\n\n\n    const Brand = () => (\n        <div className=\"flex items-center justify-between py-5 md:block\">\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            <div className=\"md:hidden\">\n                <button className=\"menu-btn text-gray-500 hover:text-gray-800\"\n                    onClick={() => setState(!state)}\n                >\n                    {\n                        state ? (\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-6 w-6\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                                <path fillRule=\"evenodd\" d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\" clipRule=\"evenodd\" />\n                            </svg>\n                        ) : (\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" strokeWidth={1.5} stroke=\"currentColor\" className=\"w-6 h-6\">\n                                <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5\" />\n                            </svg>\n                        )\n                    }\n                </button>\n            </div>\n        </div>\n    )\n\n    return (\n        <div className='relative'>\n            <div className='absolute inset-0 blur-xl h-[580px]' style={{ background: \"linear-gradient(143.6deg, rgba(192, 132, 252, 0) 20.79%, rgba(232, 121, 249, 0.26) 40.92%, rgba(204, 171, 238, 0) 70.35%)\" }}></div>\n            <div className='relative'>\n                <header>\n                    <div className={`md:hidden ${state ? \"mx-2 pb-5\" : \"hidden\"}`}>\n                        <Brand />\n                    </div>\n                    <nav className={`pb-5 md:text-sm ${state ? \"absolute top-0 inset-x-0 bg-white shadow-lg rounded-xl border mx-2 mt-2 md:shadow-none md:border-none md:mx-0 md:mt-0 md:relative md:bg-transparent\" : \"\"}`}>\n                        <div className=\"gap-x-14 items-center max-w-screen-xl mx-auto px-4 md:flex md:px-8\">\n                            <Brand />\n                            <div className={`flex-1 items-center mt-8 md:mt-0 md:flex ${state ? 'block' : 'hidden'} `}>\n                                <ul className=\"flex-1 justify-center items-center space-y-6 md:flex md:space-x-6 md:space-y-0\">\n                                    {\n                                        navigation.map((item, idx) => {\n                                            return (\n                                                <li key={idx} className=\"text-gray-700 hover:text-gray-900\">\n                                                    <a href={item.path} className=\"block\">\n                                                        {item.title}\n                                                    </a>\n                                                </li>\n                                            )\n                                        })\n                                    }\n                                </ul>\n                                <div className=\"items-center justify-end mt-6 space-y-6 md:flex md:mt-0\">\n                                    <a href=\"javascript:void(0)\" className=\"flex items-center justify-center gap-x-1 py-2 px-4 text-white font-medium bg-gray-800 hover:bg-gray-700 active:bg-gray-900 rounded-full md:inline-flex\">\n                                        Sign in\n                                        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" className=\"w-5 h-5\">\n                                            <path fillRule=\"evenodd\" d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\" clipRule=\"evenodd\" />\n                                        </svg>\n                                    </a>\n                                </div>\n                            </div>\n                        </div>\n                    </nav>\n                </header>\n                <section>\n                    <div className=\"max-w-screen-xl mx-auto px-4 py-28 gap-12 text-gray-600 overflow-hidden md:px-8 md:flex\">\n                        <div className='flex-none space-y-5 max-w-xl'>\n                            <a href=\"javascript:void(0)\" className='inline-flex gap-x-6 items-center rounded-full p-1 pr-6 border text-sm font-medium duration-150 hover:bg-white'>\n                                <span className='inline-block rounded-full px-3 py-1 bg-indigo-600 text-white'>\n                                    News\n                                </span>\n                                <p className='flex items-center'>\n                                    Read the launch post from here\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" className=\"w-5 h-5\">\n                                        <path fillRule=\"evenodd\" d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\" clipRule=\"evenodd\" />\n                                    </svg>\n                                </p>\n                            </a>\n                            <h1 className=\"text-4xl text-gray-800 font-extrabold sm:text-5xl\">\n                                Build your SaaS exactly how you want\n                            </h1>\n                            <p>\n                                Sed ut perspiciatis unde omnis iste natus voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae.\n                            </p>\n                            <div className='flex items-center gap-x-3 sm:text-sm'>\n                                <a href=\"javascript:void(0)\" className=\"flex items-center justify-center gap-x-1 py-2 px-4 text-white font-medium bg-gray-800 duration-150 hover:bg-gray-700 active:bg-gray-900 rounded-full md:inline-flex\">\n                                    Get started\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" className=\"w-5 h-5\">\n                                        <path fillRule=\"evenodd\" d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\" clipRule=\"evenodd\" />\n                                    </svg>\n                                </a>\n                                <a href=\"javascript:void(0)\" className=\"flex items-center justify-center gap-x-1 py-2 px-4 text-gray-700 hover:text-gray-900 font-medium duration-150 md:inline-flex\">\n                                    Contact sales\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" className=\"w-5 h-5\">\n                                        <path fillRule=\"evenodd\" d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\" clipRule=\"evenodd\" />\n                                    </svg>\n                                </a>\n                            </div>\n                        </div>\n                        <div className='flex-1 hidden md:block'>\n                            {/* Replace with your image */}\n                            <img src=\"https://raw.githubusercontent.com/sidiDev/remote-assets/c86a7ae02ac188442548f510b5393c04140515d7/undraw_progressive_app_m-9-ms_oftfv5.svg\" className=\"max-w-xl\" />\n                        </div>\n                    </div>\n                </section>\n            </div>\n        </div>\n    )\n}","react":{"jsxCss":[],"jsxTail":[{"code":"import { useEffect, useState } from 'react'\n\nexport default () => {\n\n    const [state, setState] = useState(false)\n\n    // Replace javascript:void(0) paths with your paths\n    const navigation = [\n        { title: \"Features\", path: \"javascript:void(0)\" },\n        { title: \"Integrations\", path: \"javascript:void(0)\" },\n        { title: \"Customers\", path: \"javascript:void(0)\" },\n        { title: \"Pricing\", path: \"javascript:void(0)\" }\n    ]\n\n    useEffect(() => {\n        document.onclick = (e) => {\n            const target = e.target;\n            if (!target.closest(\".menu-btn\")) setState(false);\n        };\n    }, [])\n\n\n    const Brand = () => (\n        <div className=\"flex items-center justify-between py-5 md:block\">\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            <div className=\"md:hidden\">\n                <button className=\"menu-btn text-gray-500 hover:text-gray-800\"\n                    onClick={() => setState(!state)}\n                >\n                    {\n                        state ? (\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-6 w-6\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                                <path fillRule=\"evenodd\" d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\" clipRule=\"evenodd\" />\n                            </svg>\n                        ) : (\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" strokeWidth={1.5} stroke=\"currentColor\" className=\"w-6 h-6\">\n                                <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5\" />\n                            </svg>\n                        )\n                    }\n                </button>\n            </div>\n        </div>\n    )\n\n    return (\n        <div className='relative'>\n            <div className='absolute inset-0 blur-xl h-[580px]' style={{ background: \"linear-gradient(143.6deg, rgba(192, 132, 252, 0) 20.79%, rgba(232, 121, 249, 0.26) 40.92%, rgba(204, 171, 238, 0) 70.35%)\" }}></div>\n            <div className='relative'>\n                <header>\n                    <div className={`md:hidden ${state ? \"mx-2 pb-5\" : \"hidden\"}`}>\n                        <Brand />\n                    </div>\n                    <nav className={`pb-5 md:text-sm ${state ? \"absolute top-0 inset-x-0 bg-white shadow-lg rounded-xl border mx-2 mt-2 md:shadow-none md:border-none md:mx-0 md:mt-0 md:relative md:bg-transparent\" : \"\"}`}>\n                        <div className=\"gap-x-14 items-center max-w-screen-xl mx-auto px-4 md:flex md:px-8\">\n                            <Brand />\n                            <div className={`flex-1 items-center mt-8 md:mt-0 md:flex ${state ? 'block' : 'hidden'} `}>\n                                <ul className=\"flex-1 justify-center items-center space-y-6 md:flex md:space-x-6 md:space-y-0\">\n                                    {\n                                        navigation.map((item, idx) => {\n                                            return (\n                                                <li key={idx} className=\"text-gray-700 hover:text-gray-900\">\n                                                    <a href={item.path} className=\"block\">\n                                                        {item.title}\n                                                    </a>\n                                                </li>\n                                            )\n                                        })\n                                    }\n                                </ul>\n                                <div className=\"items-center justify-end mt-6 space-y-6 md:flex md:mt-0\">\n                                    <a href=\"javascript:void(0)\" className=\"flex items-center justify-center gap-x-1 py-2 px-4 text-white font-medium bg-gray-800 hover:bg-gray-700 active:bg-gray-900 rounded-full md:inline-flex\">\n                                        Sign in\n                                        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" className=\"w-5 h-5\">\n                                            <path fillRule=\"evenodd\" d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\" clipRule=\"evenodd\" />\n                                        </svg>\n                                    </a>\n                                </div>\n                            </div>\n                        </div>\n                    </nav>\n                </header>\n                <section>\n                    <div className=\"max-w-screen-xl mx-auto px-4 py-28 gap-12 text-gray-600 overflow-hidden md:px-8 md:flex\">\n                        <div className='flex-none space-y-5 max-w-xl'>\n                            <a href=\"javascript:void(0)\" className='inline-flex gap-x-6 items-center rounded-full p-1 pr-6 border text-sm font-medium duration-150 hover:bg-white'>\n                                <span className='inline-block rounded-full px-3 py-1 bg-indigo-600 text-white'>\n                                    News\n                                </span>\n                                <p className='flex items-center'>\n                                    Read the launch post from here\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" className=\"w-5 h-5\">\n                                        <path fillRule=\"evenodd\" d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\" clipRule=\"evenodd\" />\n                                    </svg>\n                                </p>\n                            </a>\n                            <h1 className=\"text-4xl text-gray-800 font-extrabold sm:text-5xl\">\n                                Build your SaaS exactly how you want\n                            </h1>\n                            <p>\n                                Sed ut perspiciatis unde omnis iste natus voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae.\n                            </p>\n                            <div className='flex items-center gap-x-3 sm:text-sm'>\n                                <a href=\"javascript:void(0)\" className=\"flex items-center justify-center gap-x-1 py-2 px-4 text-white font-medium bg-gray-800 duration-150 hover:bg-gray-700 active:bg-gray-900 rounded-full md:inline-flex\">\n                                    Get started\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" className=\"w-5 h-5\">\n                                        <path fillRule=\"evenodd\" d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\" clipRule=\"evenodd\" />\n                                    </svg>\n                                </a>\n                                <a href=\"javascript:void(0)\" className=\"flex items-center justify-center gap-x-1 py-2 px-4 text-gray-700 hover:text-gray-900 font-medium duration-150 md:inline-flex\">\n                                    Contact sales\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" className=\"w-5 h-5\">\n                                        <path fillRule=\"evenodd\" d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\" clipRule=\"evenodd\" />\n                                    </svg>\n                                </a>\n                            </div>\n                        </div>\n                        <div className='flex-1 hidden md:block'>\n                            {/* Replace with your image */}\n                            <img src=\"https://raw.githubusercontent.com/sidiDev/remote-assets/c86a7ae02ac188442548f510b5393c04140515d7/undraw_progressive_app_m-9-ms_oftfv5.svg\" className=\"max-w-xl\" />\n                        </div>\n                    </div>\n                </section>\n            </div>\n        </div>\n    )\n}","label":"App.jsx"}]}}
slug: /heroes
id: 4514c184-535e-4630-af28-acaa71156254
created_at: 1670149507993
---

<FUIHeroSectionWithImage />