How to create a custom home page with an Image as the background and an Enter text as the button?

[Huptech-Web]

Hello @shaanrevery , To achieve the identical design, kindly adhere to the steps below:
Theme library > edit theme > create new section of banner-section name and subsequently insert the provided code.

{% style %}
.image-banner {
  position: relative;
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-position: center;
}

.button-wrapper {
  position: absolute;
}

.button-wrapper.top-left {
  top: 20px;
  left: 20px;
}

.button-wrapper.top-center {
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.button-wrapper.top-right {
  top: 20px;
  right: 20px;
}

.button-wrapper.center-left {
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
}

.button-wrapper.center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.button-wrapper.center-right {
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

.button-wrapper.bottom-left {
  bottom: 20px;
  left: 20px;
}

.button-wrapper.bottom-center {
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.button-wrapper.bottom-right {
  bottom: 20px;
  right: 20px;
}

.btn {
    padding: 10px 20px;
    text-decoration: none;
    color: #fff;
    font-size: 16px;
    text-transform: uppercase;
}
.btn-outline {
  background: transparent;
  box-shadow: 4px 3px 26px 10px #fff;
}

.btn-filled {
  background: #000;
  border: none
}
{% endstyle %}

  

    
      {{ section.settings.button_text }}
    
  

{% schema %}
{
  "name": "Banner Section",
  "settings": [
    {
      "type": "image_picker",
      "id": "banner_image",
      "label": "Banner Image"
    },
    {
      "type": "text",
      "id": "button_text",
      "label": "Button Text",
      "default": "Click Here"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "Button Link"
    },
    {
      "type": "select",
      "id": "button_type",
      "label": "Button Style",
      "default": "outline",
      "options": [
        {
          "value": "outline",
          "label": "Outline"
        },
        {
          "value": "filled",
          "label": "Filled"
        }
      ]
    },
    {
      "type": "select",
      "id": "button_position",
      "label": "Button Position",
      "default": "center",
      "options": [
        {
          "value": "top-left",
          "label": "Top Left"
        },
        {
          "value": "top-center",
          "label": "Top Center"
        },
        {
          "value": "top-right",
          "label": "Top Right"
        },
        {
          "value": "center-left",
          "label": "Center Left"
        },
        {
          "value": "center",
          "label": "Center"
        },
        {
          "value": "center-right",
          "label": "Center Right"
        },
        {
          "value": "bottom-left",
          "label": "Bottom Left"
        },
        {
          "value": "bottom-center",
          "label": "Bottom Center"
        },
        {
          "value": "bottom-right",
          "label": "Bottom Right"
        }
      ]
    }
  ],
    "presets": [
    {
      "name": "Banner Section",
   
    }
  ]
}
{% endschema %}

Next, view the image and choose the banner segment.

Attached are the screenshots for reference.

Feel free to reach out if you have any additional questions. If this solution is helpful, please consider liking and accepting it.
S.P