uldp-degree-mangement-system/views/admin/home/sections/hero.ejs

<!-- Hero Tab -->
<div class="tab-pane fade show active" id="hero" role="tabpanel">
  <div class="row g-4">
    <!-- Basic Info -->
    <div class="col-md-12">
      <div class="card border shadow-sm">
        <div class="card-header bg-white">
          <h6 class="mb-0">
            <i class="fas fa-info-circle me-2"></i>Basic Information
          </h6>
        </div>
        <div class="card-body">
          <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label fw-medium">Title</label>
              <input
                type="text"
                class="form-control"
                id="heroTitle"
                value="<%= data.hero?.title || '' %>"
                placeholder="e.g., From Application to Visa"
              />
            </div>
            <div class="col-md-6">
              <label class="form-label fw-medium">Subtitle</label>
              <input
                type="text"
                class="form-control"
                id="heroSubtitle"
                value="<%= data.hero?.subtitle || '' %>"
                placeholder="e.g., Global Education Simplified"
              />
            </div>
            <div class="col-md-12">
              <label class="form-label fw-medium">Description</label>
              <textarea
                class="form-control"
                id="heroDescription"
                rows="3"
                placeholder="Enter hero description"
              ><%= data.hero?.description || '' %></textarea>
            </div>
            <div class="col-md-6">
              <label class="form-label fw-medium">Background Image</label>
              <div class="input-group mb-2">
                <input
                  type="text"
                  class="form-control"
                  id="heroBackgroundImage"
                  value="<%= data.hero?.backgroundImage || '' %>"
                />
                <button
                  type="button"
                  class="btn btn-outline-primary btn-upload-image"
                  data-target-input="heroBackgroundImage"
                  data-image-type="home"
                >
                  <i class="fas fa-upload me-1"></i>Upload
                </button>
              </div>
              <% if (data.hero?.backgroundImage) { %>
              <div class="mt-2">
                <img
                  src="<%= data.hero.backgroundImage %>"
                  class="img-thumbnail"
                  style="height: 200px; width: 100%; object-fit: cover;"
                  alt="Background preview"
                />
              </div>
              <% } %>
            </div>
            <div class="col-md-6">
              <label class="form-label fw-medium">Video URL</label>
              <input
                type="text"
                class="form-control"
                id="heroVideoUrl"
                value="<%= data.hero?.videoUrl || '' %>"
                placeholder="https://www.youtube.com/watch?v=..."
              />
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Primary Button -->
    <div class="col-md-6">
      <div class="card border shadow-sm">
        <div class="card-header bg-white">
          <h6 class="mb-0">
            <i class="fas fa-mouse-pointer me-2"></i>Primary Button
          </h6>
        </div>
        <div class="card-body">
          <div class="row g-3">
            <div class="col-md-12">
              <label class="form-label fw-medium">Label</label>
              <input
                type="text"
                class="form-control"
                id="heroPrimaryButtonLabel"
                value="<%= data.hero?.primaryButton?.label || '' %>"
                placeholder="e.g., Apply now"
              />
            </div>
            <div class="col-md-12">
              <label class="form-label fw-medium">Link</label>
              <input
                type="text"
                class="form-control"
                id="heroPrimaryButtonHref"
                value="<%= data.hero?.primaryButton?.href || '' %>"
                placeholder="/contact"
              />
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Secondary Button -->
    <div class="col-md-6">
      <div class="card border shadow-sm">
        <div class="card-header bg-white">
          <h6 class="mb-0">
            <i class="fas fa-mouse-pointer me-2"></i>Secondary Button
          </h6>
        </div>
        <div class="card-body">
          <div class="row g-3">
            <div class="col-md-12">
              <label class="form-label fw-medium">Label</label>
              <input
                type="text"
                class="form-control"
                id="heroSecondaryButtonLabel"
                value="<%= data.hero?.secondaryButton?.label || '' %>"
                placeholder="e.g., Book Free Consultation"
              />
            </div>
            <div class="col-md-12">
              <label class="form-label fw-medium">Link</label>
              <input
                type="text"
                class="form-control"
                id="heroSecondaryButtonHref"
                value="<%= data.hero?.secondaryButton?.href || '' %>"
                placeholder="/contact"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>